:root {
  color-scheme: light;
  --paper:#f6f5f0; --panel:#fffefa; --ink:#202622; --muted:#606963;
  --line:#e5e5dc; --blue:#426278; --mist:#e8eff2; --dark:#263833;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans CJK SC",sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box }
body { margin:0 }
button,input,select { font:inherit }
button { cursor:pointer; color:inherit; border:0; background:none; min-height:44px; touch-action:manipulation }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--blue); outline-offset:2px }
[hidden] { display:none!important }
svg { display:block }
.rail { position:fixed; inset:0 auto 0 0; width:224px; padding:32px 20px; display:flex; flex-direction:column; background:#efefe8; border-right:1px solid var(--line) }
.brand { display:flex; gap:12px; align-items:center; margin:0 8px 42px }
.brand img { border-radius:12px }
.brand strong { display:block; font-size:25px; letter-spacing:-1px; line-height:1 }
.brand small { font-size:11px; color:var(--muted); letter-spacing:.12em }
nav { display:grid; gap:6px }
nav button { display:flex; gap:12px; align-items:center; text-align:left; border-radius:10px; padding:0 13px; color:var(--muted); font-size:14px }
nav button[aria-current] { background:#dfe8e9; color:#294855; font-weight:650 }
nav button:hover { background:var(--mist) }
.privacy { margin:auto 8px 0; color:var(--muted); font-size:12px }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#749186; margin-right:5px }
main { margin-left:224px; padding:46px clamp(28px,5vw,76px) 60px; max-width:1500px }
.eyebrow { font-size:11px; letter-spacing:.22em; color:var(--blue); font-weight:750; margin:0 0 9px }
h1,h2,h3,p { margin:0 }
h1 { font-size:clamp(34px,5vw,53px); letter-spacing:-.06em; line-height:1.13 }
h2 { font-size:19px; letter-spacing:-.025em }
h3 { font-size:15px }
.sub { font-size:14px; color:var(--muted); margin-top:9px; line-height:1.55 }
.page-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:25px }
.row { display:flex; align-items:center; justify-content:space-between; gap:10px }
.actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.pill,.icon-btn,.primary,.secondary { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:10px; padding:0 12px; font-size:13px; font-weight:650; white-space:nowrap }
.pill,.secondary,.icon-btn { background:var(--panel); border:1px solid var(--line) }
.icon-btn { min-width:44px; padding:0 8px; font-size:20px }
.primary { color:white; background:var(--dark) }
.secondary:hover,.icon-btn:hover,.pill:hover { background:var(--mist) }
.metrics { display:grid; grid-template-columns:1.32fr 1fr 1fr; gap:12px; margin-bottom:20px }
.metric { padding:17px 18px; text-align:left; border:1px solid var(--line); background:var(--panel); border-radius:17px; min-width:0 }
.metric:first-child { background:#e5edf0; border-color:#dce7ea }
.metric .mark { color:var(--blue) }
.metric-label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:13px }
.metric strong { display:block; font-size:clamp(26px,4vw,37px); line-height:1.1; margin:13px 0 6px; letter-spacing:-.055em; font-variant-numeric:tabular-nums }
.metric small { font-size:12px; color:var(--muted); font-weight:500; letter-spacing:0 }
.columns { display:grid; grid-template-columns:1.52fr 1fr; gap:15px; align-items:start }
.panel { border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:19px; min-width:0 }
.panel + .panel { margin-top:14px }
.section-head { margin-bottom:11px }
.caption { color:var(--muted); font-size:12px; line-height:1.55 }
.meal { padding:10px 0; border-top:1px solid var(--line) }
.meal:last-child { padding-bottom:0 }
.meal-title { display:flex; align-items:center; gap:9px; min-width:0 }
.meal-symbol { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#f0f1eb; color:var(--dark); flex:none }
.meal .icon-btn { background:transparent }
.item { width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; gap:10px; padding:8px 2px; border-top:1px dashed var(--line); margin-top:4px }
.item span:first-child { overflow-wrap:anywhere }
.item small { display:block; margin-top:2px }
.item strong { white-space:nowrap; font-size:13px; font-variant-numeric:tabular-nums }
.habit { display:flex; gap:5px; align-items:center; border-top:1px solid var(--line) }
.habit button:first-child { flex:1; display:flex; align-items:center; gap:9px; text-align:left; padding:4px 0; min-width:0; overflow-wrap:anywhere; font-size:14px }
.check { flex:none; border:1px solid #a6b2ad; width:22px; height:22px; border-radius:7px; display:grid; place-items:center }
[aria-pressed="true"] .check { color:white; background:var(--blue); border-color:var(--blue) }
.habit .edit { width:44px; flex:none; color:var(--muted); font-size:20px }
.progress { height:5px; background:#eceee8; border-radius:6px; margin:10px 0 13px; overflow:hidden }
.progress span { height:100%; background:#6d8e9c; display:block }
.link { color:var(--blue); padding:0; font-size:13px; font-weight:650 }
.empty { padding:16px 0; color:var(--muted); font-size:14px; line-height:1.6 }
.calendar { max-width:640px }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center }
.calendar-grid .caption { padding:12px 0 }
.day { border-radius:9px; padding:2px; display:grid; align-content:center; justify-items:center; gap:2px; font-variant-numeric:tabular-nums }
.day span { height:5px; width:5px; border-radius:50% }
.day .has { background:currentColor }
.day[aria-current] { background:var(--dark); color:white }
.day:hover:not([aria-current]) { background:var(--mist) }
.chart { width:100%; max-height:285px; margin-top:12px }
.chart text { font-size:11px; fill:var(--muted) }
.chart line { stroke:var(--line) }
.chart polyline { fill:none; stroke:var(--blue); stroke-width:2.5; stroke-linejoin:round }
.chart circle,.chart rect { fill:#64859a }
.summary { display:flex; gap:18px; flex-wrap:wrap; margin:13px 0 }
.summary strong { display:block; font-size:23px }
.data-actions { margin-top:16px }
dialog { width:min(calc(100% - 24px),480px); border:1px solid var(--line); border-radius:20px; padding:0; background:var(--panel); color:var(--ink); max-height:calc(100dvh - 24px) }
dialog::backdrop { background:#17252075 }
dialog form { padding:19px }
dialog header,dialog footer { display:flex; align-items:center; justify-content:space-between; gap:10px }
dialog footer { justify-content:flex-end; margin-top:12px }
dialog footer .danger { margin-right:auto }
label.field { display:grid; gap:6px; margin-top:13px; font-size:13px; color:var(--muted) }
input:not([type="checkbox"]),select { min-height:44px; width:100%; min-width:0; padding:8px 10px; border:1px solid #d6ddd8; border-radius:9px; background:white; color:var(--ink); font-size:16px }
input[type="time"] { appearance:none }
.check-label { display:flex; align-items:center; gap:7px; min-height:44px; font-size:14px }
input[type="checkbox"] { accent-color:var(--blue); width:18px; height:18px }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px }
.chips button { background:var(--mist); border-radius:8px; padding:0 9px; font-size:12px }
#hint { margin-top:6px }
.danger,#error { color:#9a382c }
#error { font-size:13px; margin-top:7px }
#toast { position:fixed; z-index:2; left:50%; bottom:22px; transform:translateX(-50%); border-radius:10px; background:var(--dark); color:white; padding:10px 14px; font-size:13px; max-width:calc(100% - 28px); text-align:center }
#toast:empty { display:none }
@media(max-width:850px) {
  .rail { width:172px; padding-inline:12px }
  main { margin-left:172px; padding-inline:22px }
  .columns { grid-template-columns:1fr }
}
@media(max-width:640px) {
  .rail { inset:auto 0 0; width:auto; z-index:1; padding:5px max(9px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left)); border-right:0; border-top:1px solid var(--line); background:var(--panel) }
  .brand,.privacy { display:none }
  nav { grid-template-columns:repeat(4,1fr); gap:4px }
  nav button { flex-direction:column; justify-content:center; text-align:center; padding:3px; gap:3px; font-size:11px }
  main { margin:0; padding:calc(20px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(84px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)) }
  .page-head { align-items:start; margin-bottom:17px }
  .page-head .actions { justify-content:flex-end }
  .metrics { gap:6px; margin-bottom:12px; grid-template-columns:1.05fr .9fr 1.12fr }
  .metric { padding:11px 7px; border-radius:12px }
  .metric strong { font-size:clamp(17px,5.8vw,27px); white-space:nowrap; margin:9px 0 4px }
  .metric small { font-size:10px }
  .metric-label { font-size:11px; gap:4px }
  .metric-label svg { width:15px; height:15px }
  .panel { padding:13px; border-radius:14px }
  .columns { gap:10px }
  #toast { bottom:calc(65px + env(safe-area-inset-bottom)) }
}