:root {
  --bg: #f3f1e9;
  --surface: #fffef9;
  --surface-strong: #ffffff;
  --ink: #173c33;
  --ink-strong: #0e2e27;
  --muted: #74837d;
  --line: #dde5df;
  --line-strong: #ccd8d1;
  --accent: #ff6b3d;
  --accent-soft: #fff0e9;
  --green: #1a765f;
  --green-soft: #e7f4ef;
  --lime: #c8f067;
  --yellow: #edb84b;
  --red: #d95252;
  --shadow: 0 14px 35px rgba(20, 58, 48, .08);
  --shadow-small: 0 7px 18px rgba(20, 58, 48, .07);
  --radius-lg: 24px;
  --radius-md: 17px;
  --radius-sm: 12px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(200, 240, 103, .18), transparent 25rem),
    radial-gradient(circle at 94% 18%, rgba(255, 107, 61, .10), transparent 22rem),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label:has(input:focus-visible) {
  outline: 3px solid rgba(255, 107, 61, .25);
  outline-offset: 2px;
}
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .45rem; font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1.1; letter-spacing: -.035em; }
h2 { margin-bottom: .3rem; font-size: 1.22rem; line-height: 1.2; letter-spacing: -.02em; }
p { line-height: 1.55; }
.muted { color: var(--muted); margin-bottom: 0; }
.small { font-size: .84rem; }
.eyebrow { margin-bottom: .35rem; color: var(--green); font-size: .67rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.app-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem max(1.1rem, calc((100vw - 1280px) / 2));
  border-bottom: 1px solid rgba(204, 216, 209, .72);
  background: rgba(243, 241, 233, .88);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: .75rem; color: var(--ink-strong); text-decoration: none; }
.brand-mark { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: 15px 15px 15px 5px; color: var(--ink-strong); background: var(--lime); box-shadow: 0 8px 18px rgba(137, 177, 42, .2); }
.brand-mark svg { width: 1.5rem; height: 1.5rem; fill: currentColor; stroke: none; }
.brand strong { display: block; font-size: 1rem; line-height: 1.05; letter-spacing: -.01em; }
.brand small { display: block; margin-top: .22rem; color: var(--muted); font-size: .54rem; font-weight: 800; letter-spacing: .18em; }
.topbar-actions { display: flex; align-items: center; gap: .55rem; }
.avatar-btn, .icon-btn {
  display: inline-grid;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, .74);
  cursor: pointer;
  transition: .2s ease;
}
.icon-btn:hover, .avatar-btn:hover { border-color: var(--line-strong); background: var(--surface-strong); transform: translateY(-1px); }
.icon-btn.small { width: 2.1rem; height: 2.1rem; }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }
.avatar-btn { border: 0; color: #fff; background: var(--green); font-size: .88rem; font-weight: 800; }

.main-content { width: min(1280px, calc(100% - 2.2rem)); margin: 0 auto; padding: 2.20rem 0 7.5rem; }
.view { display: none; animation: fade-up .35s ease both; }
.view.is-active { display: block; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.3rem; margin-bottom: 1.6rem; }
.page-heading .muted { max-width: 47rem; }
.date-switcher { display: flex; align-items: center; flex: 0 0 auto; gap: .35rem; padding: .3rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .7); }
.date-label { position: relative; display: flex; align-items: center; justify-content: center; min-width: 7.2rem; height: 2.1rem; padding: 0 .7rem; color: var(--ink); font-size: .86rem; font-weight: 700; cursor: pointer; }
.date-label input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.split-heading-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.split-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem .9rem; border: 1px solid #c6ded4; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: .86rem; font-weight: 800; cursor: pointer; }
.split-badge::before { width: .48rem; height: .48rem; border-radius: 50%; background: var(--accent); content: ""; }

.card {
  padding: 1.35rem;
  border: 1px solid rgba(221, 229, 223, .9);
  border-radius: var(--radius-lg);
  background: rgba(255, 254, 249, .94);
  box-shadow: var(--shadow-small);
}
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.card-heading.compact { align-items: center; margin-bottom: .9rem; }
.card-heading h2 { margin-bottom: 0; }
.overview-grid { display: grid; grid-template-columns: 1.16fr .92fr .72fr; gap: 1rem; }
.hero-card { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 15.6rem; overflow: hidden; color: #f9fff9; background: linear-gradient(135deg, #123c32 0%, #175a48 58%, #217860 100%); box-shadow: 0 20px 40px rgba(17, 68, 55, .18); }
.hero-card::after { position: absolute; right: -4rem; bottom: -7rem; width: 16rem; height: 16rem; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 2.8rem rgba(255,255,255,.035), 0 0 0 5.8rem rgba(255,255,255,.025); content: ""; }
.hero-copy { position: relative; z-index: 1; max-width: 58%; }
.hero-copy h2 { font-size: 1.55rem; }
.hero-copy p { margin-bottom: 1.25rem; color: rgba(244, 255, 249, .75); font-size: .9rem; }
.status-pill { display: inline-flex; margin-bottom: 1rem; padding: .38rem .65rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: var(--lime); background: rgba(255,255,255,.08); font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.hero-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.progress-ring { position: relative; z-index: 1; display: grid; flex: 0 0 auto; width: 8.4rem; height: 8.4rem; place-items: center; border-radius: 50%; background: conic-gradient(var(--lime) calc(var(--progress) * 1%), rgba(255,255,255,.14) 0); transition: .55s ease; }
.progress-ring::before { position: absolute; inset: .67rem; border-radius: 50%; background: #195243; content: ""; }
.progress-ring > div { position: relative; text-align: center; }
.progress-ring strong { display: block; font-size: 1.55rem; line-height: 1; }
.progress-ring span { display: block; margin-top: .38rem; color: rgba(255,255,255,.62); font-size: .64rem; }
.light { color: #fff !important; }
.secondary-btn.light { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.10); }
.secondary-btn.light:hover { background: rgba(255,255,255,.16); }
.text-btn.light { color: rgba(255,255,255,.75); }

.calorie-line { display: flex; align-items: baseline; gap: .35rem; margin: .4rem 0 .8rem; }
.calorie-line strong { font-size: 2rem; letter-spacing: -.05em; }
.calorie-line span { color: var(--muted); font-size: .8rem; }
.progress-track { width: 100%; height: .42rem; overflow: hidden; border-radius: 999px; background: #edf0ed; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--lime)); transition: .45s ease; }
.macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1.2rem; }
.macro-grid > div { padding: .72rem; border-radius: 13px; background: #f6f7f3; }
.macro-dot { display: block; width: .5rem; height: .5rem; margin-bottom: .48rem; border-radius: 50%; }
.macro-dot.protein { background: var(--accent); }
.macro-dot.carbs { background: var(--yellow); }
.macro-dot.fat { background: var(--green); }
.macro-grid p { margin-bottom: .22rem; color: var(--muted); font-size: .66rem; }
.macro-grid strong { font-size: .93rem; }
.macro-grid small { display: block; margin-top: .12rem; color: #98a39e; font-size: .62rem; }
.water-value { color: var(--muted); font-size: .78rem; }
.water-value strong { color: var(--green); font-size: 1.15rem; }
.water-cups { display: grid; grid-template-columns: repeat(4, 1fr); gap: .42rem; margin: 1rem 0 .7rem; }
.water-cup { position: relative; height: 2.55rem; padding: 0; overflow: hidden; border: 1px solid #cfe0d8; border-radius: 7px 7px 11px 11px; background: #f8fbf9; cursor: pointer; transition: .2s ease; }
.water-cup::after { position: absolute; right: 0; bottom: 0; left: 0; height: 0; background: linear-gradient(180deg, #8de1c7, #32a985); content: ""; transition: height .28s ease; }
.water-cup:hover { transform: translateY(-2px); border-color: #8fc8b3; }
.water-cup.is-filled::after { height: 100%; }
.water-cup span { position: relative; z-index: 1; color: var(--green); font-size: .63rem; font-weight: 800; }
.water-cup.is-filled span { color: #0d4e3c; }

.section-grid { display: grid; grid-template-columns: 1.42fr 1fr; gap: 1rem; margin-top: 1rem; }
.list-card { min-height: 22rem; }
.meal-groups { display: grid; gap: .8rem; }
.meal-group { padding: .9rem; border: 1px solid #edf0ed; border-radius: 16px; background: #fafaf6; }
.meal-group-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.meal-group-heading strong { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.meal-group-heading strong::before { width: .46rem; height: .46rem; border-radius: 50%; background: var(--accent); content: ""; }
.meal-group-heading span { color: var(--muted); font-size: .72rem; }
.meal-item, .workout-item { display: flex; align-items: center; gap: .78rem; padding: .74rem .15rem; border-top: 1px solid #e9eee9; }
.meal-item:first-child, .workout-item:first-child { border-top: 0; }
.check-btn { display: grid; flex: 0 0 auto; width: 1.45rem; height: 1.45rem; padding: 0; place-items: center; border: 1.5px solid #b6cbc1; border-radius: 50%; color: transparent; background: #fff; cursor: pointer; transition: .2s ease; }
.check-btn svg { width: .85rem; height: .85rem; stroke-width: 2.5; }
.check-btn:hover { border-color: var(--green); transform: scale(1.05); }
.check-btn.is-checked { border-color: var(--green); color: #fff; background: var(--green); }
.item-main { min-width: 0; flex: 1; }
.item-main strong { display: block; overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.item-main span { display: block; margin-top: .18rem; overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.item-main.is-done strong { color: #9aa59f; text-decoration: line-through; }
.macro-inline { display: flex; gap: .42rem; margin-top: .24rem; color: #80918a; font-size: .65rem; }
.item-main-button { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; appearance: none; }
.item-main-button:hover strong { color: var(--green); }
.workout-set-meta { display: flex; flex-wrap: wrap; gap: .4rem .7rem; margin-top: .28rem; color: #71857d; font-size: .66rem; }
.workout-set-meta span:first-child { color: var(--green); font-weight: 800; }
.set-mini { width: 100%; height: .26rem; margin-top: .45rem; overflow: hidden; border-radius: 999px; background: #edf1ed; }
.set-mini i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--lime)); transition: width .25s ease; }
.log-exercise-summary { padding: 1rem; border: 1px solid var(--line); border-radius: 17px; background: #f8faf6; }
.log-exercise-summary > p { margin-bottom: 1rem; }
.set-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; font-size: .75rem; font-weight: 800; }
.set-progress-heading span { color: #60766d; }
.set-progress-heading strong { color: var(--green); font-size: .9rem; }
.set-counter { display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center; gap: .65rem; }
.set-adjust { display: grid; width: 2.6rem; height: 2.6rem; padding: 0; place-items: center; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--green); background: #fff; font-size: 1.3rem; font-weight: 800; cursor: pointer; }
.set-adjust:hover:not(:disabled) { border-color: var(--green); background: var(--green-soft); }
.set-adjust:disabled { color: #c2cbc7; cursor: not-allowed; }
.set-progress-track { height: .7rem; overflow: hidden; border-radius: 999px; background: #e7ece8; }
.set-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--lime)); transition: width .25s ease; }
.set-dots { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin-top: .85rem; }
.set-dot { display: grid; min-height: 2.25rem; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #fff; font-size: .7rem; font-weight: 800; cursor: pointer; }
.set-dot.is-filled { border-color: var(--green); color: #fff; background: var(--green); }
.set-log-hint { margin: .8rem 0 0; color: var(--muted); font-size: .7rem; }
.item-actions { display: flex; flex: 0 0 auto; gap: .15rem; }
.item-action { display: grid; width: 1.8rem; height: 1.8rem; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #9aa8a2; background: transparent; cursor: pointer; }
.record-btn { min-height: 1.8rem; padding: 0 .5rem; border: 1px solid #c9ded5; border-radius: 9px; color: var(--green); background: #f1f8f5; font-size: .65rem; font-weight: 800; cursor: pointer; }
.record-btn:hover { border-color: var(--green); background: var(--green-soft); }
.item-action:hover { color: var(--ink); background: #edf1ed; }
.item-action.danger:hover { color: var(--red); background: #fff0f0; }
.item-action svg { width: .95rem; height: .95rem; }
.empty-state { display: grid; min-height: 8rem; place-items: center; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: 15px; color: var(--muted); text-align: center; }
.empty-state p { margin: 0; font-size: .82rem; }
.workout-plan-meta { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .62rem; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: .7rem; font-weight: 800; }
.workout-item { padding: .86rem .15rem; }
.duration-badge { flex: 0 0 auto; color: var(--muted); font-size: .68rem; }
.note-card { margin-top: 1rem; }
textarea { width: 100%; min-height: 5.8rem; padding: .9rem 1rem; resize: vertical; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fbfcf8; line-height: 1.6; }
textarea::placeholder, input::placeholder { color: #a5afa9; }
.save-state { color: var(--muted); font-size: .7rem; }

.split-guide-card { margin-bottom: 1rem; background: linear-gradient(135deg, #fffef9 0%, #f4faf6 100%); }
.guide-units { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.guide-unit { padding: .95rem; border: 1px solid #d9e7df; border-radius: 16px; background: rgba(255,255,255,.8); }
.guide-unit span { display: inline-block; margin-bottom: .55rem; padding: .25rem .48rem; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: .64rem; font-weight: 800; }
.guide-unit strong { display: block; margin-bottom: .3rem; font-size: .85rem; line-height: 1.35; }
.guide-unit p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.guide-rule-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-top: .75rem; }
.guide-rule { padding: .85rem .95rem; border-left: 3px solid var(--lime); border-radius: 7px 13px 13px 7px; background: #f7faf5; }
.guide-rule strong { display: block; margin-bottom: .28rem; font-size: .76rem; }
.guide-rule p { margin: 0; color: #64766f; font-size: .7rem; line-height: 1.55; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .7rem; }
.week-day { min-height: 12.5rem; padding: .95rem; border: 1px solid var(--line); border-radius: 17px; background: #fbfcf8; transition: .2s ease; }
.week-day:hover { border-color: #b9cec4; transform: translateY(-2px); box-shadow: var(--shadow-small); }
.week-day.is-rest { background: #f5f6f2; }
.week-day.is-today { border-color: var(--green); box-shadow: 0 0 0 2px rgba(26,118,95,.1); }
.week-day-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.week-day-top strong { font-size: .82rem; }
.week-day-top span { color: var(--muted); font-size: .63rem; }
.week-day h3 { min-height: 2.4rem; margin-bottom: .55rem; font-size: .88rem; line-height: 1.35; }
.week-day ul { display: grid; gap: .32rem; margin: 0 0 1rem; padding: 0; color: var(--muted); font-size: .67rem; list-style: none; }
.week-day li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-day li::before { margin-right: .32rem; color: var(--accent); content: "•"; }
.week-day-actions { display: flex; gap: .28rem; flex-wrap: wrap; }
.tiny-btn { padding: .42rem .58rem; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; font-size: .67rem; font-weight: 700; cursor: pointer; }
.tiny-btn.primary { border-color: var(--green); color: #fff; background: var(--green); }
.tiny-btn:hover { transform: translateY(-1px); }
.preset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.preset-card { position: relative; min-height: 11rem; padding: 1rem; border: 1px solid var(--line); border-radius: 17px; background: #fbfcf8; }
.preset-card .preset-type { display: inline-block; margin-bottom: .7rem; padding: .27rem .48rem; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: .64rem; font-weight: 800; }
.preset-card h3 { margin-bottom: .35rem; font-size: .92rem; }
.preset-card p { color: var(--muted); font-size: .7rem; }
.preset-macros { display: flex; gap: .48rem; color: #7f9189; font-size: .64rem; }
.preset-actions { display: flex; gap: .35rem; margin-top: 1rem; }
.preset-actions button { flex: 1; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1rem; }
.stat-card { padding: 1.1rem; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,254,249,.95); box-shadow: var(--shadow-small); }
.stat-card span { color: var(--muted); font-size: .72rem; }
.stat-card strong { display: block; margin: .55rem 0 .2rem; font-size: 1.65rem; letter-spacing: -.04em; }
.stat-card small { color: var(--green); font-size: .67rem; }
.data-grid { grid-template-columns: 1.1fr .9fr; }
.chart-card { min-height: 20rem; }
.legend { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .67rem; }
.legend i { width: .7rem; height: 2px; border-top: 2px dashed #a8b7b0; }
.bar-chart { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; height: 14rem; gap: .65rem; padding: 1rem .2rem .2rem; }
.target-line { position: absolute; right: 0; left: 0; border-top: 1px dashed #a8b7b0; }
.bar-column { position: relative; z-index: 1; display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: end; gap: .4rem; }
.bar-value { color: var(--muted); font-size: .61rem; white-space: nowrap; }
.bar { width: min(2.4rem, 100%); min-height: 3px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #64c3a8, var(--green)); transition: height .3s ease; }
.bar.is-over { background: linear-gradient(180deg, #ff996d, var(--accent)); }
.bar-label { color: var(--muted); font-size: .65rem; }
.workout-chart { display: grid; gap: .75rem; padding-top: .3rem; }
.workout-chart-row { display: grid; grid-template-columns: 3rem 1fr 2.8rem; align-items: center; gap: .65rem; }
.workout-chart-row span { color: var(--muted); font-size: .68rem; }
.mini-progress { height: .62rem; overflow: hidden; border-radius: 999px; background: #eef1ed; }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #5cc39e); }
.weight-card { margin-top: 1rem; }
.inline-form { display: flex; align-items: center; gap: .55rem; }
.input-with-unit { position: relative; }
.input-with-unit input { width: 8.5rem; padding-right: 2.3rem; }
.input-with-unit span { position: absolute; top: 50%; right: .8rem; color: var(--muted); font-size: .72rem; transform: translateY(-50%); }
.weight-chart { display: flex; align-items: end; min-height: 9.5rem; gap: .62rem; padding: .8rem 0 0; overflow-x: auto; }
.weight-point { display: grid; flex: 1 0 4.6rem; height: 7.8rem; align-content: end; justify-items: center; gap: .3rem; }
.weight-point-bar { width: 1.2rem; min-height: .3rem; border-radius: 999px; background: #dfeeea; }
.weight-point strong { font-size: .74rem; }
.weight-point span { color: var(--muted); font-size: .62rem; }
.data-management { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; }
.button-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.primary-btn, .secondary-btn, .danger-btn {
  display: inline-flex;
  min-height: 2.55rem;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  padding: .65rem 1rem;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: .2s ease;
}
.primary-btn { border: 1px solid var(--green); color: #fff; background: var(--green); box-shadow: 0 7px 14px rgba(26,118,95,.16); }
.primary-btn:hover { border-color: var(--ink); background: var(--ink); transform: translateY(-1px); }
.primary-btn:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.secondary-btn { border: 1px solid var(--line-strong); color: var(--ink); background: #fff; }
.secondary-btn:hover { border-color: #9bb7aa; background: #f8fbf9; }
.danger-btn { border: 1px solid #f0caca; color: var(--red); background: #fff8f8; }
.danger-btn:hover { border-color: var(--red); background: #fff0f0; }
.text-btn { padding: .2rem; border: 0; color: var(--green); background: transparent; font-size: .75rem; font-weight: 800; cursor: pointer; }
.text-btn:hover { color: var(--accent); }
button:disabled { cursor: not-allowed; }

.install-banner { position: fixed; z-index: 29; left: 50%; bottom: calc(6.5rem + var(--safe-bottom)); display: flex; width: min(29rem, calc(100% - 1.5rem)); align-items: center; gap: .65rem; padding: .68rem .72rem; border: 1px solid #cfe1d8; border-radius: 17px; background: rgba(255,254,249,.97); box-shadow: 0 16px 40px rgba(17,56,46,.17); backdrop-filter: blur(16px); transform: translateX(-50%); }
.install-banner[hidden] { display: none; }
.install-banner-icon { display: grid; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: 11px; color: var(--ink-strong); background: var(--lime); font-size: 1rem; font-weight: 900; }
.install-banner > div { min-width: 0; flex: 1; }
.install-banner strong { display: block; font-size: .76rem; }
.install-banner small { display: block; margin-top: .1rem; overflow: hidden; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.install-banner-btn { flex: 0 0 auto; padding: .55rem .72rem; border: 0; border-radius: 10px; color: #fff; background: var(--green); font-size: .7rem; font-weight: 800; cursor: pointer; }
.install-dismiss { display: grid; flex: 0 0 auto; width: 1.8rem; height: 1.8rem; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: #eef2ee; font-size: 1rem; cursor: pointer; }
.install-steps { display: grid; gap: .65rem; }
.install-steps article { padding: .85rem .95rem; border: 1px solid var(--line); border-radius: 14px; background: #f8faf6; }
.install-steps article span { display: block; margin-bottom: .25rem; color: var(--green); font-size: .74rem; font-weight: 900; }
.install-steps article p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.bottom-nav {
  position: fixed;
  z-index: 30;
  right: 50%;
  bottom: max(.9rem, var(--safe-bottom));
  display: flex;
  width: min(24rem, calc(100% - 1.5rem));
  padding: .38rem;
  border: 1px solid rgba(207, 218, 211, .92);
  border-radius: 21px;
  background: rgba(255, 254, 249, .92);
  box-shadow: 0 15px 40px rgba(17, 56, 46, .16);
  backdrop-filter: blur(18px);
  transform: translateX(50%);
}
.nav-btn { display: flex; flex: 1; flex-direction: column; align-items: center; gap: .18rem; padding: .5rem .2rem; border: 0; border-radius: 15px; color: #82928b; background: transparent; font-size: .64rem; font-weight: 800; cursor: pointer; transition: .2s ease; }
.nav-btn svg { width: 1.18rem; height: 1.18rem; }
.nav-btn.is-active { color: var(--ink); background: var(--green-soft); }
.nav-btn.is-active svg { color: var(--green); }

.onboarding { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(10, 36, 30, .78); backdrop-filter: blur(13px); overflow-y: auto; }
.onboarding[hidden] { display: none; }
.onboarding-card { width: min(940px, 100%); max-height: calc(100vh - 2rem); padding: clamp(1.3rem, 4vw, 2.7rem); overflow-y: auto; border: 1px solid rgba(255,255,255,.6); border-radius: 30px; background: var(--surface); box-shadow: 0 35px 80px rgba(0,0,0,.28); }
.onboarding-intro { max-width: 42rem; margin-bottom: 1.5rem; }
.onboarding-intro h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.split-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.split-option { position: relative; display: block; cursor: pointer; }
.split-option input { position: absolute; opacity: 0; pointer-events: none; }
.split-option-card { position: relative; height: 100%; min-height: 14rem; padding: 1.2rem; overflow: hidden; border: 1.5px solid var(--line); border-radius: 21px; background: #fbfcf8; transition: .22s ease; }
.split-option-card::after { position: absolute; right: -2.2rem; bottom: -2.8rem; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: rgba(200, 240, 103, .26); content: ""; transition: .22s ease; }
.split-option:hover .split-option-card { border-color: #aec9bd; transform: translateY(-3px); box-shadow: var(--shadow); }
.split-option input:checked + .split-option-card { border-color: var(--green); background: #f2faf6; box-shadow: 0 0 0 3px rgba(26,118,95,.10), var(--shadow); }
.split-option input:checked + .split-option-card::before { position: absolute; top: 1rem; right: 1rem; display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: .78rem; content: "✓"; }
.split-count { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: 1rem; padding: .38rem .6rem; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: .7rem; font-weight: 800; }
.split-option-card h3 { margin-bottom: .5rem; font-size: 1.2rem; }
.split-option-card p { margin-bottom: 1rem; color: var(--muted); font-size: .78rem; }
.split-option-card ul { display: grid; gap: .38rem; margin: 0; padding: 0; color: #587068; font-size: .7rem; list-style: none; }
.split-option-card li::before { margin-right: .35rem; color: var(--accent); content: "•"; }
.onboarding-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.onboarding-note { color: var(--muted); font-size: .72rem; }
.onboarding .primary-btn { min-width: 12rem; }

.app-dialog { width: min(520px, calc(100% - 1.4rem)); max-height: calc(100vh - 2rem); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 24px; color: var(--ink); background: var(--surface); box-shadow: 0 30px 85px rgba(10,36,30,.28); }
.app-dialog::backdrop { background: rgba(10, 36, 30, .58); backdrop-filter: blur(7px); }
.app-dialog form { padding: 1.3rem; }
.wide-dialog { width: min(680px, calc(100% - 1.4rem)); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.15rem; }
.dialog-heading h2 { font-size: 1.4rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.field { display: grid; gap: .38rem; }
.field.full { grid-column: 1 / -1; }
.field > span { color: #5f746c; font-size: .72rem; font-weight: 800; }
input:not([type="checkbox"]):not([type="radio"]), select {
  width: 100%;
  min-height: 2.7rem;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #fbfcf8;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: #79ad9b; background: #fff; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1.3rem; }
.template-workout-heading { display: flex; align-items: center; justify-content: space-between; margin: 1.1rem 0 .55rem; color: #5f746c; font-size: .75rem; font-weight: 800; }
.template-workout-list { display: grid; gap: .55rem; }
.template-row { display: grid; grid-template-columns: 1.05fr 1.35fr auto; align-items: center; gap: .45rem; }
.template-row input { min-height: 2.5rem; }
.remove-template-row { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1px solid #f0d4d4; border-radius: 9px; color: var(--red); background: #fff8f8; cursor: pointer; }

.toast { position: fixed; z-index: 110; right: 50%; bottom: calc(6rem + var(--safe-bottom)); padding: .72rem 1rem; border-radius: 12px; color: #fff; background: var(--ink-strong); box-shadow: 0 12px 30px rgba(0,0,0,.2); font-size: .78rem; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(50%, 12px); transition: .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(50%, 0); }

@media (max-width: 1080px) {
  .overview-grid { grid-template-columns: 1.1fr 1fr; }
  .water-card { grid-column: 1 / -1; }
  .water-cups { grid-template-columns: repeat(8, 1fr); }
  .section-grid, .data-grid { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .topbar { padding: .8rem 1rem; }
  .brand-mark { width: 2.35rem; height: 2.35rem; }
  .main-content { width: calc(100% - 1.6rem); padding-top: 1.35rem; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 1.15rem; }
  .date-switcher { width: 100%; justify-content: space-between; }
  .date-label { flex: 1; }
  .overview-grid { grid-template-columns: 1fr; }
  .hero-card { min-height: 13.5rem; }
  .hero-copy { max-width: 61%; }
  .nutrition-summary, .water-card { grid-column: auto; }
  .water-cups { grid-template-columns: repeat(4, 1fr); }
  .section-grid { grid-template-columns: 1fr; }
  .card { padding: 1.05rem; border-radius: 19px; }
  .card-heading { gap: .65rem; }
  .card-heading .primary-btn { padding: .55rem .7rem; white-space: nowrap; }
  .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week-day { min-height: auto; }
  .preset-grid { grid-template-columns: 1fr; }
  .guide-units, .guide-rule-grid { grid-template-columns: 1fr; }
  .preset-card { min-height: auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .data-management { align-items: flex-start; flex-direction: column; }
  .inline-form { width: 100%; }
  .input-with-unit { flex: 1; }
  .input-with-unit input { width: 100%; }
  .split-options { grid-template-columns: 1fr; }
  .split-option-card { min-height: auto; }
  .onboarding-footer { align-items: stretch; flex-direction: column; }
  .onboarding .primary-btn { width: 100%; }
}
@media (max-width: 480px) {
  .topbar-actions .icon-btn { display: none; }
  .brand small { display: none; }
  .hero-card { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .hero-copy { max-width: 100%; }
  .progress-ring { width: 6.8rem; height: 6.8rem; align-self: flex-end; margin-top: -4.8rem; }
  .progress-ring strong { font-size: 1.25rem; }
  .macro-grid { gap: .38rem; }
  .macro-grid > div { padding: .58rem; }
  .week-grid { grid-template-columns: 1fr; }
  .template-row { grid-template-columns: 1fr 1fr auto; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .stats-grid { gap: .55rem; }
  .stat-card { padding: .85rem; }
  .stat-card strong { font-size: 1.35rem; }
  .install-banner { position: fixed; z-index: 29; left: 50%; bottom: calc(6.5rem + var(--safe-bottom)); display: flex; width: min(29rem, calc(100% - 1.5rem)); align-items: center; gap: .65rem; padding: .68rem .72rem; border: 1px solid #cfe1d8; border-radius: 17px; background: rgba(255,254,249,.97); box-shadow: 0 16px 40px rgba(17,56,46,.17); backdrop-filter: blur(16px); transform: translateX(-50%); }
.install-banner[hidden] { display: none; }
.install-banner-icon { display: grid; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: 11px; color: var(--ink-strong); background: var(--lime); font-size: 1rem; font-weight: 900; }
.install-banner > div { min-width: 0; flex: 1; }
.install-banner strong { display: block; font-size: .76rem; }
.install-banner small { display: block; margin-top: .1rem; overflow: hidden; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.install-banner-btn { flex: 0 0 auto; padding: .55rem .72rem; border: 0; border-radius: 10px; color: #fff; background: var(--green); font-size: .7rem; font-weight: 800; cursor: pointer; }
.install-dismiss { display: grid; flex: 0 0 auto; width: 1.8rem; height: 1.8rem; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: #eef2ee; font-size: 1rem; cursor: pointer; }
.install-steps { display: grid; gap: .65rem; }
.install-steps article { padding: .85rem .95rem; border: 1px solid var(--line); border-radius: 14px; background: #f8faf6; }
.install-steps article span { display: block; margin-bottom: .25rem; color: var(--green); font-size: .74rem; font-weight: 900; }
.install-steps article p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.bottom-nav { bottom: max(.55rem, var(--safe-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}