@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Karla:wght@400;500;600&display=swap');
:root { --bg:#fafaf8; --ink:#2b2d2a; --mute:#8a8c86; --line:#e6e6e1; --acc:#5f7f6a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 'Karla', sans-serif; }
h1,h2,h3 { font-family:'Fraunces', serif; font-weight:400; margin:0 0 .4em; }
h1 { font-size:44px; line-height:1.15; }
h2 { font-size:24px; } h3 { font-size:20px; }
a { color:var(--acc); text-decoration:none; }
.shell { max-width:1080px; margin:0 auto; padding:0 28px; }
.top { display:flex; justify-content:space-between; align-items:center; padding:32px 0; }
.brand { font-family:'Fraunces', serif; font-size:24px; color:var(--ink); }
.navr { display:flex; gap:18px; align-items:center; } .who { color:var(--mute); font-size:15px; }
.foot { padding:80px 0 40px; color:var(--mute); font-size:14px; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:13px; color:var(--mute); margin:0 0 10px; }
.lead { font-size:19px; color:#555; max-width:34em; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; padding:60px 0 90px; }
.hero img { width:100%; height:420px; object-fit:cover; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; padding:60px 0; border-top:1px solid var(--line); }
.features p { color:#666; margin:0; }
.authbox { max-width:420px; margin:60px auto 0; padding:44px; background:#fff; border:1px solid var(--line); }
label { display:block; font-size:14px; color:var(--mute); margin-bottom:14px; }
input { display:block; width:100%; margin-top:6px; padding:12px 14px; border:1px solid var(--line); background:#fff; font:inherit; color:var(--ink); border-radius:0; }
input:focus { outline:none; border-color:var(--acc); }
.btn { display:inline-block; background:var(--acc); color:#fff; border:0; padding:12px 22px; font:inherit; font-weight:500; cursor:pointer; border-radius:0; }
.btn:disabled { opacity:.6; }
.link { background:none; border:0; color:var(--acc); cursor:pointer; font:inherit; padding:0; margin-left:16px; }
.hint { font-size:13px; color:var(--mute); margin:-8px 0 16px; }
.msg { color:#8a4b3a; font-size:15px; margin-top:16px; }
.tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:26px; }
.tabs button { background:none; border:0; padding:10px 0; margin-right:24px; font:inherit; color:var(--mute); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs button.on { color:var(--ink); border-color:var(--acc); }
.tabs.small { margin:0; border:0; }
.apphead { display:flex; justify-content:space-between; align-items:flex-end; padding:30px 0 36px; }
.loading,.empty { color:var(--mute); }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.panel { background:#fff; border:1px solid var(--line); padding:36px; }
.phead { display:flex; justify-content:space-between; align-items:baseline; } .phead span { color:var(--mute); font-size:15px; }
.bar { height:4px; background:var(--line); margin:10px 0 24px; } .bar div { height:100%; background:var(--acc); transition:width .4s; }
ul { list-style:none; padding:0; margin:0 0 24px; }
.habits li,.meals li { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.hname { flex:1; } .done .hname { color:var(--mute); text-decoration:line-through; }
.streak,.mt { color:var(--mute); font-size:14px; } .mt { width:48px; }
.check { width:24px; height:24px; border:1px solid #c9cbc4; background:#fff; cursor:pointer; color:#fff; font-size:14px; padding:0; }
.done .check { background:var(--acc); border-color:var(--acc); }
.x { background:none; border:0; color:#bbb; font-size:20px; cursor:pointer; } .x:hover { color:var(--ink); }
.inline { display:flex; gap:10px; } .inline input { margin:0; }
.mealform { display:grid; grid-template-columns:1fr 110px 90px auto; gap:10px; } .mealform input { margin:0; }
.gridwrap { overflow-x:auto; }
.week { width:100%; border-collapse:collapse; }
.week th { font-weight:500; font-size:14px; color:var(--mute); padding:0 6px 16px; }
.week th small { display:block; font-size:12px; }
.week td { padding:10px 6px; text-align:center; border-top:1px solid var(--line); }
.week td.hname { text-align:left; min-width:140px; }
.cell { width:28px; height:28px; border:1px solid #d6d8d1; background:#fff; cursor:pointer; }
.cell.on { background:var(--acc); border-color:var(--acc); }
.st { font-family:'Fraunces', serif; font-size:20px; }
.kc td { color:var(--mute); font-size:14px; } .kc td:first-child { text-align:left; }
.fade { animation:fade .7s ease both; } @keyframes fade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (max-width:800px) { .hero,.cols,.features { grid-template-columns:1fr; gap:32px; } .hero img { height:260px; } h1 { font-size:34px; } .mealform { grid-template-columns:1fr 1fr; } .panel,.authbox { padding:24px; } }