:root{
  --cream:#FFF7F0;--cream-2:#FFEEE4;--paper:#FFFFFF;
  --cocoa:#4E3A33;--cocoa-soft:#8A6F64;--faint:#BBA79C;
  --peach:#FF9276;--peach-soft:#FFC4B2;--peach-wash:#FFEDE6;--peach-deep:#E4643F;
  --mint:#6FCFA8;--mint-soft:#B6E9D3;--mint-wash:#E7F8F0;--mint-deep:#37A578;
  --butter:#FFD98A;--line:rgba(78,58,51,.10);
  --dots:radial-gradient(rgba(78,58,51,.07) 1px,transparent 1px);
  --display:"Fraunces",Georgia,serif;
  --body:"Quicksand",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --cjk:"PingFang SC","Hiragino Sans GB","Noto Sans SC",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overscroll-behavior:none}
body{
  background-color:var(--cream);color:var(--cocoa);
  font-family:var(--body);font-weight:500;-webkit-font-smoothing:antialiased;
  min-height:100vh;background-image:var(--dots);background-size:22px 22px;
  transition:background-color .7s ease;
}
body[data-lang="zh"]{font-family:var(--cjk)}

/* el color de fondo es la respuesta: melocotón no, verde sí */
body[data-state="FASTING"],body[data-state="OVERDUE"],
body[data-state="READY"],body[data-state="EATING"]{
  background-size:22px 22px,100% 100%;background-repeat:repeat,no-repeat;
}
body[data-state="FASTING"],body[data-state="OVERDUE"]{
  background-image:var(--dots),linear-gradient(180deg,#FFDCCB 0%,rgba(255,247,240,0) 46%);
}
body[data-state="READY"],body[data-state="EATING"]{
  background-image:var(--dots),linear-gradient(180deg,#CFF0DF 0%,rgba(255,247,240,0) 46%);
}

#app{
  max-width:460px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 22px) 22px calc(env(safe-area-inset-bottom) + 26px);
  min-height:100vh;display:flex;flex-direction:column;
}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.brand{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cocoa-soft)}
.iconbtn{
  background:none;border:none;font-size:20px;color:var(--cocoa-soft);
  padding:6px;cursor:pointer;line-height:1;font-family:inherit;
}

/* ── la respuesta ─────────────────────────── */
.answer{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:10px}
.bigface{width:104px;height:104px;animation:bob 3.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
.verdict{
  font-family:var(--display);font-weight:700;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-size:52px;line-height:1.04;letter-spacing:-.035em;margin:16px 0 0;
}
.verdict.no{color:var(--peach-deep)}
.verdict.si{color:var(--mint-deep)}
.verdict.off{color:var(--cocoa-soft);font-size:34px}
.when{
  font-size:14.5px;font-weight:700;color:var(--cocoa);margin:20px 0 0;line-height:1.45;
}
.when b{font-family:var(--display);font-size:34px;font-weight:700;display:block;margin-top:2px;letter-spacing:-.02em}
.band{display:block;font-size:16px;font-weight:700;color:var(--cocoa-soft);margin-top:3px;letter-spacing:.01em}
.note{font-size:13px;color:var(--cocoa-soft);margin:16px 0 0;font-weight:600;text-align:center;line-height:1.6;max-width:24em}
.note-spaced{margin-bottom:16px}
.countdown{
  margin:20px 0 0;background:rgba(255,255,255,.72);border:1.5px solid var(--line);
  border-radius:99px;padding:9px 18px;font-size:12.5px;font-weight:700;
  color:var(--cocoa-soft);white-space:nowrap;
}

/* ── botones ──────────────────────────────── */
.spacer{flex:1;min-height:20px}
.btn{
  width:100%;padding:17px;border-radius:22px;text-align:center;font-size:14px;font-weight:700;
  border:2.5px solid var(--cocoa);background:var(--peach);color:#fff;
  box-shadow:0 4px 0 var(--cocoa);cursor:pointer;font-family:inherit;
}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--cocoa)}
.btn-ghost{background:var(--paper);color:var(--cocoa-soft);border-color:var(--line);box-shadow:none}
.btn-spaced{margin-bottom:16px}
/* cuando la app dice que no, su botón no debe apetecer */
.btn-quiet{background:var(--paper);color:var(--cocoa-soft);box-shadow:0 4px 0 var(--line);border-color:var(--line)}
.btn-quiet:active{box-shadow:0 2px 0 var(--line)}
.linkbtn{
  display:block;margin:12px auto 0;background:none;border:none;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--cocoa-soft);text-decoration:underline;cursor:pointer;
}
.btn-danger{background:var(--paper);color:var(--peach-deep);border-color:var(--peach-deep);box-shadow:0 4px 0 var(--peach-soft)}
.btn-danger:active{box-shadow:0 2px 0 var(--peach-soft)}

/* el deshacer enseña lo que le queda: barra que se vacía y segundos */
.btn-undo{position:relative;overflow:hidden}
.undo-bar{
  position:absolute;inset:0;background:var(--cream-2);transform-origin:left center;
  animation-name:drain;animation-timing-function:linear;animation-fill-mode:forwards;
}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.undo-label{position:relative}
.undo-label b{font-family:var(--display);font-size:17px}

/* ── hoja de ajuste ───────────────────────── */
.sheet-title{
  font-family:var(--display);font-weight:700;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-size:27px;line-height:1.24;letter-spacing:-.02em;margin:14px 0 22px;
}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  flex:1 1 30%;padding:15px 10px;border-radius:18px;border:2.5px solid var(--cocoa);
  background:var(--paper);font-family:inherit;font-size:13.5px;font-weight:700;color:var(--cocoa);
  cursor:pointer;box-shadow:0 3px 0 var(--cream-2);
}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--cream-2)}
.sheet-or{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);text-align:center;margin:26px 0 12px;
}
.field{display:flex;gap:9px;align-items:stretch}
.timeinput{
  flex:0 0 40%;border:2.5px solid var(--cocoa);border-radius:18px;background:var(--paper);
  font-family:var(--display);font-weight:700;font-size:24px;color:var(--cocoa);
  text-align:center;padding:12px 8px;min-width:0;
}
.field .btn{flex:1;padding:14px 10px;font-size:13px}

/* ── relojes: solo progreso, la respuesta ya está arriba ── */
.dial{position:relative;width:132px;height:132px;margin:26px auto 0}
.dial > svg{position:absolute;inset:0;width:100%;height:100%}
.dial-track{fill:none;stroke:rgba(78,58,51,.08);stroke-width:10}
.dial-prog{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .6s ease-out}
.dial-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.dial-pct{font-family:var(--display);font-weight:700;font-size:24px;color:var(--cocoa-soft)}

.bars{margin:30px 0 0}
.bar{position:relative;height:26px;border-radius:99px;background:var(--cream-2);overflow:hidden;border:2.5px solid var(--cocoa)}
.bar-fill{height:100%;border-radius:99px 0 0 99px;transition:width .6s ease-out;
  background:repeating-linear-gradient(115deg,var(--peach) 0 9px,var(--peach-soft) 9px 18px)}
.bar-fill[data-state="EATING"]{background:repeating-linear-gradient(115deg,var(--mint) 0 9px,var(--mint-soft) 9px 18px)}
.bar-legend{display:flex;justify-content:space-between;margin-top:9px;font-size:11px;font-weight:700;color:var(--faint)}

.clock24{position:relative;width:172px;height:172px;margin:22px auto 0}
.clock24 > svg{position:absolute;inset:0;width:100%;height:100%}
.legend{
  display:flex;gap:18px;justify-content:center;margin-top:10px;
  font-size:11px;font-weight:700;color:var(--cocoa-soft);
}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}
.legend-dot.is-window{background:var(--mint)}
.legend-dot.is-now{background:var(--peach)}
.stats{display:flex;gap:10px;margin-top:14px}
.stat{flex:1;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:11px 6px;text-align:center}
.stat-n{font-family:var(--display);font-weight:700;font-size:22px;line-height:1}
.stat-l{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:5px}

/* ── ajustes ──────────────────────────────── */
.sect{font-family:var(--display);font-weight:700;font-size:19px;margin:26px 0 10px}
.optbtn{display:block;width:100%;background:none;border:none;padding:0;font-family:inherit;cursor:pointer;text-align:left}
.opt{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:18px;border:2px solid var(--line);background:var(--paper);margin-bottom:9px}
.opt-name{font-size:14px;font-weight:700;flex:1;color:var(--cocoa)}
.check{width:21px;height:21px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto}
.check.on{background:var(--peach);border-color:var(--cocoa)}
.toggle{width:46px;height:27px;border-radius:99px;background:var(--cream-2);border:2px solid var(--line);position:relative;flex:0 0 auto}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px rgba(78,58,51,.25)}
.toggle.on{background:var(--mint);border-color:var(--cocoa)}
.toggle.on::after{left:auto;right:2px}
.stepper{display:flex;gap:4px}
.stepper .iconbtn{font-size:22px;color:var(--cocoa);width:34px}
.credit{
  margin:26px 0 0;text-align:center;font-size:11.5px;font-weight:600;
  color:var(--faint);letter-spacing:.02em;
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}