:root{
  --bg:#fff8ea;
  --card:#ffffff;
  --ink:#342416;
  --muted:#7b6b5c;
  --accent:#f7b955;
  --accent2:#8fd1a5;
  --danger:#ff8f8f;
  --shadow:0 18px 40px rgba(80,50,10,.12);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#fff1c8 0,#fff8ea 34%,#f6efe7 100%);color:var(--ink)}
.app{max-width:980px;margin:auto;padding:22px 16px 60px}
.hero{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:22px 4px 12px}
.eyebrow{font-weight:800;color:#9b6920;letter-spacing:.08em;margin:0 0 8px}
h1{font-size:clamp(34px,8vw,64px);line-height:1;margin:0 0 12px}
h2{margin:0 0 10px;font-size:22px}
.lead{margin:0;color:var(--muted);font-size:17px}
.card{background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);border-radius:28px;padding:20px;margin:16px 0;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.dog-card{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:center}
.dog-stage{height:270px;border-radius:26px;background:linear-gradient(#cdefff,#fdf7d4 58%,#bde3aa 59%);position:relative;overflow:hidden;display:grid;place-items:center}
.dog{font-size:118px;filter:drop-shadow(0 14px 12px rgba(0,0,0,.12));transform-origin:bottom center;animation:bob 2.2s ease-in-out infinite}
.heart,.weather{position:absolute;font-size:30px}
.heart{right:34px;top:36px;animation:pop 1.7s ease-in-out infinite}
.weather{left:28px;top:26px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.row{display:flex;gap:10px;align-items:center}
.message{font-size:19px;font-weight:700;min-height:56px}
.meters label{display:block;margin:12px 0;color:var(--muted);font-weight:700}
progress{width:100%;height:18px;accent-color:var(--accent);display:block;margin-top:6px}
.action-card{text-align:center}
.timer{font-variant-numeric:tabular-nums;font-size:64px;font-weight:900;letter-spacing:.04em;margin:10px 0 18px}
.buttons,.quick{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
button{border:0;border-radius:999px;padding:12px 18px;font-weight:800;font-size:15px;cursor:pointer;background:#eee5d8;color:var(--ink)}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:var(--accent);box-shadow:0 8px 18px rgba(247,185,85,.35)}
.success{background:var(--accent2)}
.ghost{background:#fff;border:1px solid #eadfcf}
.mini{padding:8px 12px;font-size:13px}
.hidden{display:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid .card{margin:0}
.stats div{display:flex;justify-content:space-between;border-bottom:1px dashed #eadfcf;padding:12px 0}
dt{color:var(--muted)}dd{margin:0;font-weight:900}
.small{font-size:13px;color:var(--muted)}
.settings{display:grid;gap:10px;margin:14px 0}
select{width:100%;padding:12px;border-radius:16px;border:1px solid #eadfcf;background:#fff;margin-top:6px;font-size:16px}
.log{display:grid;gap:8px;max-height:260px;overflow:auto}
.log-item{display:flex;justify-content:space-between;padding:12px;border-radius:16px;background:#fff7e8}
.tips p{color:var(--muted);line-height:1.7}
@media(max-width:760px){
  .hero{display:block}
  .dog-card{grid-template-columns:1fr}
  .dog-stage{height:240px}
  .grid{grid-template-columns:1fr}
  .timer{font-size:52px}
}