:root{
  --bg:#f6f2ec; --card:#fffdf9; --text:#2f2b28; --muted:#746e68;
  --line:#e7ded4; --accent:#6f7f6b; --accent-soft:#e6ede4;
  --danger:#a85b57; --shadow:0 14px 34px rgba(61,52,45,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:linear-gradient(180deg,#faf7f2 0%,var(--bg) 100%);color:var(--text)}
body{font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{max-width:560px;margin:0 auto;padding:20px 16px 110px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
h1{font-size:30px;margin:2px 0 0}
h2{font-size:22px;margin:0 0 8px;line-height:1.15}
h3{font-size:15px;margin:18px 0 10px}
p{line-height:1.5}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px;margin:14px 0;box-shadow:var(--shadow)}
.hero-card{padding:22px}
.emoji{font-size:40px;margin-bottom:10px}
.muted{color:var(--muted)}
.hidden{display:none!important}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#f2ede6;color:var(--text);border-radius:999px;padding:11px 14px}
.chip.active{background:var(--accent-soft);border-color:#b8c6b5;color:#304231}
.primary,.secondary,.danger{width:100%;border:0;border-radius:16px;padding:15px 16px;font-weight:700;margin-top:10px}
.primary{background:var(--accent);color:white}
.secondary{background:#eee8e0;color:var(--text)}
.danger{background:#f4e3e1;color:var(--danger)}
.icon-btn,.text-btn{border:0;background:transparent}
.icon-btn{font-size:22px;padding:8px}
.text-btn{color:var(--accent);font-weight:700}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.progress-wrap{margin:14px 0 8px}
.progress{height:10px;border-radius:99px;background:#eee8e1;overflow:hidden}
#progressBar{height:100%;width:0;background:var(--accent);transition:.25s}
#progressText{font-size:12px;color:var(--muted)}
.task{display:flex;gap:12px;padding:15px 0;border-top:1px solid var(--line)}
.task:first-child{border-top:0}
.task-check{flex:0 0 36px;height:36px;border:0;border-radius:12px;background:var(--accent-soft);font-size:18px}
.task-main{flex:1}
.task-title{font-weight:800}
.task-meta{font-size:12px;color:var(--muted);margin-top:3px}
.task-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.mini-btn{border:1px solid var(--line);background:#faf7f2;border-radius:999px;padding:8px 10px;font-size:12px}
.task.done{opacity:.52}
.task.done .task-title{text-decoration:line-through}
.soft-success{background:var(--accent-soft);padding:13px 14px;border-radius:16px;margin-top:10px}
.reset-step{display:flex;flex-direction:column;gap:3px;padding:14px 0;border-top:1px solid var(--line)}
.reset-step:first-of-type{border-top:0}
.timer{text-align:center;font-size:44px;font-weight:800;padding:22px 0 4px}
.routine-item{padding:14px 0;border-top:1px solid var(--line)}
.routine-item:first-child{border-top:0}
.routine-day{font-size:12px;color:var(--muted);font-weight:700}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.toggle-row:first-of-type{border-top:0}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,253,249,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.bottom-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bottom-nav .nav-btn{border:0;background:transparent;padding:10px;color:var(--muted)}
.bottom-nav .nav-btn.active{color:var(--text);font-weight:800}