:root {
  color-scheme: light;
  --ink: #16211e;
  --muted: #68746f;
  --paper: #f6f7f2;
  --card: rgba(255, 255, 255, 0.9);
  --line: #dfe5df;
  --forest: #173f35;
  --forest-2: #285e4f;
  --lime: #d7f06a;
  --lime-soft: #edf6c8;
  --peach: #f6c9a5;
  --blue: #b8dce1;
  --danger: #a94545;
  --shadow: 0 14px 34px rgba(29, 55, 47, 0.08);
  --radius: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 95% 0%, #ecf3d3 0, transparent 30%), var(--paper); }
button, input, select { font: inherit; }
button { color: inherit; }
button, .button { touch-action: manipulation; }

#app { width: min(100%, 760px); margin: 0 auto; min-height: 100vh; padding: max(22px, env(safe-area-inset-top)) 20px calc(112px + env(safe-area-inset-bottom)); }
.page { animation: rise .3s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--forest); color: var(--lime); font-size: 21px; box-shadow: var(--shadow); }
.brand-name { font-size: 18px; font-weight: 750; letter-spacing: .02em; }
.brand-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.date-pill { padding: 9px 12px; border-radius: 99px; color: var(--forest); background: rgba(255,255,255,.7); border: 1px solid var(--line); font-size: 13px; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(30px, 9vw, 43px); line-height: 1.12; letter-spacing: -.04em; }
h2 { margin-bottom: 8px; font-size: 25px; letter-spacing: -.025em; }
h3 { margin-bottom: 5px; font-size: 16px; }
.eyebrow { margin-bottom: 6px; color: var(--forest-2); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin: 28px 2px 13px; }
.section-head h2 { margin: 0; font-size: 20px; }
.text-button { border: 0; padding: 5px; background: transparent; color: var(--forest-2); font-weight: 700; font-size: 13px; cursor: pointer; }

.hero { position: relative; overflow: hidden; min-height: 286px; padding: 25px; border-radius: 30px; background: var(--forest); color: white; box-shadow: 0 22px 45px rgba(23,63,53,.18); }
.hero::after { content: ""; position: absolute; width: 250px; height: 250px; right: -115px; top: -115px; border: 45px solid rgba(215,240,106,.12); border-radius: 50%; }
.hero-head { position: relative; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.hero .eyebrow { color: var(--lime); }
.hero h1 { max-width: 390px; font-size: clamp(28px, 8vw, 39px); }
.hero-copy { max-width: 390px; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.6; }
.energy-ring { --progress: 0deg; flex: none; width: 100px; height: 100px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--lime) var(--progress), rgba(255,255,255,.13) 0); }
.energy-ring::before { content: ""; grid-area: 1/1; width: 76px; height: 76px; border-radius: 50%; background: var(--forest); }
.ring-text { z-index: 1; grid-area: 1/1; text-align: center; }
.ring-text strong { display: block; font-size: 22px; }
.ring-text span { color: rgba(255,255,255,.62); font-size: 10px; }
.hero-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 25px; }
.hero-stat { padding: 13px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.07); }
.hero-stat span { display: block; margin-bottom: 5px; color: rgba(255,255,255,.6); font-size: 10px; }
.hero-stat strong { font-size: 17px; }

.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-card { min-height: 116px; padding: 15px; text-align: left; border: 1px solid var(--line); border-radius: 21px; background: var(--card); cursor: pointer; box-shadow: 0 8px 25px rgba(31,58,49,.04); }
.quick-card:active { transform: scale(.98); }
.quick-icon { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 12px; font-size: 17px; }
.quick-card.food .quick-icon { background: var(--peach); }
.quick-card.exercise .quick-icon { background: var(--blue); }
.quick-card.weight .quick-icon { background: var(--lime-soft); }
.quick-card strong, .quick-card span { display: block; }
.quick-card strong { font-size: 14px; }
.quick-card span { margin-top: 4px; color: var(--muted); font-size: 10px; }

.card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.goal-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
.goal-number { font-size: 31px; font-weight: 760; letter-spacing: -.03em; }
.goal-number small { font-size: 13px; font-weight: 600; color: var(--muted); }
.progress-track { height: 8px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: #e8ece7; }
.progress-fill { height: 100%; width: 0; border-radius: inherit; background: var(--forest); transition: width .5s ease; }
.prediction { min-width: 95px; padding: 13px; text-align: center; border-radius: 18px; background: var(--lime-soft); }
.prediction strong { display: block; color: var(--forest); font-size: 17px; }
.prediction span { color: var(--muted); font-size: 10px; }
.prediction small { display: block; max-width: 170px; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.35; }

.streak-card { overflow: hidden; padding: 21px; border: 1px solid #ead9c6; border-radius: 26px; background: linear-gradient(135deg, #fff8ee 0%, #fff 72%); box-shadow: var(--shadow); }
.streak-card.done { border-color: #d7e5a7; background: linear-gradient(135deg, #f4fad9 0%, #fff 72%); }
.streak-main { display: flex; align-items: center; gap: 16px; }
.streak-main .eyebrow { margin-bottom: 1px; color: #a85e24; }
.streak-main p:last-child { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.flame { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 19px; background: #f4a44c; color: white; font-size: 30px; transform: rotate(-5deg); box-shadow: inset 0 -5px 12px rgba(135,67,17,.13); }
.streak-card.done .flame { background: var(--forest); color: var(--lime); }
.streak-number { color: #8e491b; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.streak-card.done .streak-number { color: var(--forest); }
.streak-number small { font-size: 13px; font-weight: 700; letter-spacing: 0; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-top: 19px; }
.day-dot { display: grid; justify-items: center; gap: 5px; color: #a7aea9; font-size: 9px; }
.day-dot i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #edf0ec; color: #9ea7a2; font-size: 12px; font-style: normal; font-weight: 800; }
.day-dot.hit i { background: #f4a44c; color: white; }
.day-dot.today i { outline: 2px solid var(--forest); outline-offset: 2px; }
.streak-card.done .day-dot.hit i { background: var(--forest); color: var(--lime); }
.streak-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 17px; padding-top: 13px; border-top: 1px solid rgba(141,103,67,.12); color: var(--muted); font-size: 9px; }
.streak-foot strong { color: var(--ink); white-space: nowrap; }

.record-list { display: grid; gap: 10px; }
.record { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 13px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 19px; background: var(--card); cursor: pointer; }
.record:active { transform: scale(.995); }
.record-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--lime-soft); }
.record.food .record-icon { background: #fbe5d3; }
.record.exercise .record-icon { background: #dceff1; }
.record-main strong, .record-main span { display: block; }
.record-main strong { font-size: 14px; }
.record-main span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.record-value { text-align: right; font-weight: 760; font-size: 14px; }
.record-value span { display: block; margin-top: 3px; color: var(--muted); font-weight: 500; font-size: 10px; }
.delete-button { width: 30px; height: 30px; display: grid; place-items: center; margin-left: 1px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #9aa39f; font-size: 18px; cursor: pointer; }
.delete-button:hover { background: #edf0ed; color: var(--danger); }
.empty { padding: 36px 20px; text-align: center; border: 1px dashed #cbd4ce; border-radius: 22px; color: var(--muted); }
.empty-icon { display: block; margin-bottom: 8px; font-size: 28px; }

.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.summary-card { padding: 18px; border-radius: 21px; background: var(--card); border: 1px solid var(--line); }
.summary-card span { color: var(--muted); font-size: 11px; }
.summary-card strong { display: block; margin-top: 6px; font-size: 24px; }
.summary-card.accent { background: var(--forest); color: white; border-color: var(--forest); }
.summary-card.accent span { color: rgba(255,255,255,.65); }

.segment { display: inline-flex; padding: 3px; border-radius: 12px; background: #e9ede8; }
.segment button { border: 0; padding: 7px 12px; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.segment button.active { background: white; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.chart-card { padding: 18px 12px 13px; }
.chart-wrap { position: relative; height: 230px; }
#weightChart { display: block; width: 100%; height: 100%; }
.chart-legend { display: flex; justify-content: center; gap: 18px; color: var(--muted); font-size: 11px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--forest); }
.legend-dot.target { background: var(--lime); border: 1px solid #a7bd4d; }

.form-card { display: grid; gap: 17px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 12px; font-weight: 700; color: #45534e; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input, select { width: 100%; min-height: 48px; padding: 0 14px; color: var(--ink); border: 1px solid #d7ded9; border-radius: 14px; outline: none; background: rgba(255,255,255,.8); }
input:focus, select:focus { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(40,94,79,.1); }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 50px; }
.input-suffix span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 0; border-radius: 15px; font-weight: 750; cursor: pointer; }
.button.primary { background: var(--forest); color: white; }
.button.primary:active { background: var(--forest-2); }
.button.secondary { background: #e9ede8; color: var(--ink); }
.button.danger { background: #fae5e3; color: var(--danger); }
.button.full { width: 100%; }
.setting-list { overflow: hidden; padding: 0; }
.setting-row { width: 100%; min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.setting-row:last-child { border-bottom: 0; }
.setting-row span:last-child { color: var(--muted); }
.setting-copy strong, .setting-copy small { display: block; }
.setting-copy small { margin-top: 3px; color: var(--muted); }
.file-input { display: none; }

.onboarding { min-height: calc(100vh - 50px); display: grid; align-content: center; max-width: 520px; margin: auto; }
.onboarding-logo { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 25px; border-radius: 21px; background: var(--forest); color: var(--lime); font-size: 31px; box-shadow: var(--shadow); }
.onboarding h1 { max-width: 450px; }
.onboarding > .muted { max-width: 450px; line-height: 1.7; }
.onboarding .card { margin-top: 25px; }
.privacy-note { display: flex; gap: 9px; margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.tab-bar { position: fixed; z-index: 20; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 24px), 560px); height: 68px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border: 1px solid rgba(213,222,216,.9); border-radius: 23px; background: rgba(253,254,251,.9); box-shadow: 0 14px 38px rgba(20,44,36,.16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.tab-bar[hidden] { display: none; }
.tab { display: grid; place-items: center; align-content: center; gap: 2px; border: 0; border-radius: 17px; background: transparent; color: #83908b; font-size: 10px; cursor: pointer; }
.tab-icon { font-size: 20px; line-height: 1; }
.tab.active { background: var(--forest); color: white; }

.sheet { width: min(calc(100% - 20px), 540px); max-height: 88vh; margin: auto auto 8px; padding: 0; overflow: auto; border: 0; border-radius: 28px 28px 20px 20px; color: var(--ink); background: var(--paper); }
.sheet::backdrop { background: rgba(12,25,21,.42); backdrop-filter: blur(3px); }
.sheet form { padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); }
.sheet-handle { width: 38px; height: 4px; margin: 0 auto 17px; border-radius: 4px; background: #cbd2ce; }
.sheet-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 19px; }
.icon-button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #e6ebe7; color: #5e6b66; font-size: 23px; line-height: 1; cursor: pointer; }
#entryFields { display: grid; gap: 15px; }
.sheet-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 22px; }
.toast { position: fixed; z-index: 50; left: 50%; top: max(22px, env(safe-area-inset-top)); transform: translate(-50%, -20px); padding: 11px 16px; border-radius: 99px; background: var(--ink); color: white; font-size: 12px; opacity: 0; pointer-events: none; transition: .25s ease; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 430px) {
  #app { padding-left: 15px; padding-right: 15px; }
  .hero { padding: 21px; min-height: 275px; }
  .energy-ring { width: 88px; height: 88px; }
  .energy-ring::before { width: 67px; height: 67px; }
  .ring-text strong { font-size: 19px; }
  .hero-stats { gap: 6px; }
  .hero-stat strong { font-size: 15px; }
  .quick-card { padding: 13px; }
  .goal-card { grid-template-columns: 1fr; }
  .prediction { display: flex; justify-content: space-between; align-items: center; }
  .prediction small { text-align: right; }
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --ink: #edf3ef; --muted: #99a7a1; --paper: #101916; --card: rgba(27,39,35,.94); --line: #33443e; --forest: #d7f06a; --forest-2: #bcd656; --lime: #d7f06a; --lime-soft: #314329; --shadow: 0 14px 34px rgba(0,0,0,.18); }
  body { background: radial-gradient(circle at 95% 0%, #253525 0, transparent 30%), var(--paper); }
  .brand-mark, .hero, .tab.active, .button.primary, .summary-card.accent { background: #234a3e; color: white; }
  .brand-mark { color: var(--lime); }
  .hero .eyebrow { color: var(--lime); }
  .energy-ring::before { background: #234a3e; }
  .date-pill, input, select { background: rgba(30,44,39,.9); color: var(--ink); }
  .segment, .button.secondary, .icon-button { background: #293a34; }
  .segment button.active { background: #3a4c46; color: white; }
  .tab-bar { background: rgba(21,31,28,.92); border-color: #35463f; }
  .progress-track { background: #34443f; }
  .progress-fill { background: var(--lime); }
  .sheet { background: var(--paper); }
  .prediction strong, .eyebrow, .text-button { color: var(--lime); }
  .field label { color: #b6c2bd; }
  .streak-card, .streak-card.done { border-color: #3d4c43; background: linear-gradient(135deg, #2a332a 0%, var(--card) 72%); }
  .streak-main .eyebrow, .streak-number { color: #f4b168; }
  .day-dot i { background: #34423d; }
  .delete-button:hover { background: #33423d; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }