:root { --ink:#242421; --muted:#7d7d75; --paper:#f8f7f4; --line:#e8e6df; --card:#fff; --tomato:#de735d; --yellow:#e9bd52; --green:#9cbda8; --lavender:#b8b1d4; --navy:#313d4c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,Arial,sans-serif; font-size:14px; }
button,a { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:242px; min-height:100vh; position:fixed; display:flex; flex-direction:column; padding:30px 16px 20px; border-right:1px solid var(--line); background:#fbfaf8; }
.brand { display:flex; align-items:center; gap:9px; padding-left:8px; font-family:Fraunces,serif; font-size:26px; font-weight:700; letter-spacing:-1.6px; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; background:var(--tomato); border-radius:9px 9px 4px 9px; color:white; font:700 19px Fraunces; letter-spacing:-2px; }
.nav-list { display:grid; gap:4px; margin-top:54px; }.nav-item { display:flex; align-items:center; gap:13px; padding:12px 13px; border-radius:9px; color:#686861; font-weight:500; }.nav-item>span { width:16px; text-align:center; font-size:18px; }.nav-item b { margin-left:auto; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#e7e5dd; color:#55554f; font:500 11px 'DM Mono'; }.nav-item.active { color:var(--ink); background:#ece9e1; font-weight:700; }.sidebar-spacer { flex:1; }.tiny-link { border:0; background:transparent; text-align:left; color:#8a8981; padding:10px 11px; font-size:12px; }.profile { border:0; border-top:1px solid var(--line); padding:17px 7px 0; margin-top:8px; background:transparent; display:flex; gap:10px; align-items:center; text-align:left; }.avatar,.mini-avatars i { display:grid; place-items:center; border-radius:50%; background:#dfaf6f; color:#fff; font-weight:700; }.avatar { width:34px; height:34px; }.profile strong { display:block; font-size:12px; }.profile small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }.profile>i { margin-left:auto; color:#777; font-style:normal; }
main { width:calc(100% - 242px); margin-left:242px; }.topbar { height:72px; padding:0 48px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:rgba(251,250,248,.8); }.crumb { display:flex; gap:10px; color:var(--muted); font-size:13px; }.crumb em { font-style:normal; color:#c2c0b9; }.crumb strong { color:var(--ink); }.top-actions { display:flex; align-items:center; gap:16px; }.icon-button { border:0; background:transparent; color:#777; width:32px; height:32px; font-size:20px; }.new-button { background:var(--ink); color:#fff; border:0; border-radius:8px; padding:11px 15px; font-size:12px; font-weight:600; box-shadow:0 2px 4px #0001; }.mobile-menu { display:none; }
.page { max-width:1240px; padding:51px 48px 64px; margin:auto; }.intro { display:flex; justify-content:space-between; align-items:end; }.eyebrow { margin:0 0 8px; color:#8b8a81; font:500 10px 'DM Mono',monospace; letter-spacing:1.1px; }.intro h1 { margin:0; font:600 43px/1.05 Fraunces,Georgia,serif; letter-spacing:-2px; }.week-controls { display:flex; gap:5px; }.week-controls button { height:34px; min-width:34px; padding:0 10px; border:1px solid var(--line); border-radius:7px; background:#fff; color:#555; }.week-controls .today-button { font-size:12px; font-weight:600; }
.overview-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:17px; margin-top:40px; }.card { padding:22px 24px; border:1px solid var(--line); border-radius:13px; background:var(--card); }.card-label { color:#88877f; font:500 10px 'DM Mono'; letter-spacing:1px; }.today-content { display:flex; align-items:center; gap:15px; margin-top:18px; }.meal-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:13px; font-size:24px; }.coral { background:#f9ddd6; color:#d8634e; }.today-content h2 { margin:0 0 5px; font:600 19px Fraunces; letter-spacing:-.5px; }.today-content p,.progress-card p { color:var(--muted); font-size:12px; margin:0; }.dot { display:inline-block; width:6px; height:6px; background:#d5816e; border-radius:50%; margin-bottom:1px; }.round-arrow { margin-left:auto; width:31px; height:31px; background:#faf9f6; border:1px solid var(--line); border-radius:50%; color:#686861; }.progress-row { display:flex; align-items:center; justify-content:space-between; margin-top:15px; }.progress-row strong { font:600 25px Fraunces; letter-spacing:-1px; }.progress-row strong small { margin-left:5px; color:var(--muted); font:500 12px Inter; letter-spacing:0; }.mini-avatars { display:flex; }.mini-avatars i { width:23px; height:23px; margin-left:-5px; border:2px solid #fff; font-size:8px; font-style:normal; }.mini-avatars i:nth-child(2){background:#9faac5}.mini-avatars i:nth-child(3){background:#8fb09b}.progress-track { overflow:hidden; height:7px; margin:14px 0 10px; border-radius:10px; background:#eeece6; }.progress-track span { display:block; height:100%; width:71%; background:var(--green); border-radius:10px; transition:width .25s; }
.planner-section { margin-top:49px; }.section-heading { display:flex; justify-content:space-between; align-items:start; }.section-heading h2 { margin:0; font:600 23px Fraunces; letter-spacing:-.8px; }.section-heading p:not(.eyebrow) { margin:6px 0 0; color:var(--muted); font-size:12px; }.outline-button { border:1px solid var(--line); border-radius:7px; background:#fff; padding:9px 12px; color:#52524c; font-size:12px; font-weight:600; }.week-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:9px; margin-top:22px; }.day-column { min-height:214px; padding:13px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; }.day-column.today { border-color:#bebbb2; background:#fffefd; }.day-label { display:flex; justify-content:space-between; align-items:baseline; margin:0 1px 12px; }.day-label b { font-size:11px; text-transform:uppercase; letter-spacing:.6px; }.day-label span { color:#999890; font:11px 'DM Mono'; }.meal-block { position:relative; display:block; width:100%; padding:11px 8px; border:0; border-radius:8px; text-align:left; }.meal-block:hover { filter:brightness(.97); }.meal-block .meal-time { display:block; margin-bottom:5px; opacity:.72; font:10px 'DM Mono'; }.meal-block .meal-name { display:block; font:600 12px/1.25 Fraunces; letter-spacing:-.25px; }.tone-coral { background:#f8ded7; color:#7e463d; }.tone-yellow { background:#f8ebc8; color:#766232; }.tone-green { background:#ddeadf; color:#496251; }.tone-lavender { background:#e9e5f4; color:#615b7b; }.add-slot { width:100%; margin-top:7px; padding:8px 3px; border:0; color:#9c9b93; background:transparent; text-align:left; font-size:11px; }.add-slot:hover { color:#4e4e49; }
.bottom-grid { display:grid; grid-template-columns:1.6fr .8fr; gap:40px; margin-top:58px; }.ideas-panel,.grocery-panel { padding-top:28px; border-top:1px solid var(--line); }.text-button { border:0; padding:4px; background:transparent; color:#62615a; font-size:12px; font-weight:600; }.recipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:20px; }.recipe-card { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }.recipe-card:hover { transform:translateY(-2px); box-shadow:0 5px 14px #29291d12; }.recipe-art { height:98px; display:flex; align-items:center; justify-content:center; font-size:39px; }.recipe-art.c1{background:#e6b07d}.recipe-art.c2{background:#a8c8a5}.recipe-art.c3{background:#d7a58f}.recipe-info { padding:12px; }.recipe-info h3 { overflow:hidden; margin:0; white-space:nowrap; text-overflow:ellipsis; font:600 14px Fraunces; letter-spacing:-.3px; }.recipe-info p { margin:6px 0 0; color:#88877f; font-size:10px; }.dark { display:grid; place-items:center; width:27px; height:27px; padding:0; border-radius:50%; background:var(--ink); color:#fff; font-size:18px; }.grocery-summary { display:flex; align-items:center; gap:8px; margin:17px 0 10px; color:#8d8b83; font-size:10px; }.grocery-progress { width:45px; height:4px; border-radius:4px; background:#e8e6df; }.grocery-progress i { display:block; width:0%; height:100%; background:var(--green); transition:width .2s; }.grocery-list { margin:0; padding:0; list-style:none; }.grocery-list li { display:flex; align-items:center; gap:9px; min-height:33px; border-bottom:1px solid #eeece7; font-size:12px; }.grocery-list input { appearance:none; width:15px; height:15px; margin:0; border:1px solid #c6c4bc; border-radius:4px; cursor:pointer; }.grocery-list input:checked { border-color:var(--green); background:var(--green); }.grocery-list input:checked::after { content:'✓'; display:block; color:#fff; font-size:10px; text-align:center; line-height:13px; }.grocery-list li.done span { color:#999790; text-decoration:line-through; }.grocery-list small { margin-left:auto; color:#9a9992; font-size:10px; }.full { display:flex; justify-content:space-between; width:100%; padding:15px 0 0; }.full span { font-size:15px; }
.modal-backdrop { position:fixed; z-index:3; inset:0; display:grid; place-items:center; padding:20px; background:#22221e55; }.modal-backdrop.hidden,.toast.hidden { display:none; }.meal-modal { position:relative; width:min(100%,390px); padding:31px; border-radius:15px; background:#fff; box-shadow:0 16px 45px #0003; }.meal-modal h2 { margin:0 0 22px; font:600 27px Fraunces; letter-spacing:-1px; }.meal-modal label { display:block; margin:13px 0; color:#686760; font-size:12px; font-weight:600; }.meal-modal input,.meal-modal select { width:100%; margin-top:6px; padding:10px 11px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; outline:none; }.meal-modal input:focus,.meal-modal select:focus { border-color:#aaa79b; }.modal-close { position:absolute; top:13px; right:15px; border:0; background:transparent; color:#777; font-size:25px; }.modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:15px; margin-top:24px; }.toast { position:fixed; z-index:5; bottom:24px; left:50%; padding:11px 15px; border-radius:8px; background:#2c2c28; color:#fff; transform:translateX(-50%); font-size:12px; box-shadow:0 5px 16px #0003; }
@media (max-width:900px){.sidebar{width:190px}.page{padding:38px 30px}.topbar{padding:0 30px}main{width:calc(100% - 190px);margin-left:190px}.week-grid{grid-template-columns:repeat(4,1fr)}.bottom-grid{grid-template-columns:1fr}.grocery-panel{max-width:480px}}
@media (max-width:650px){.sidebar{display:none}main{width:100%;margin:0}.topbar{height:62px;padding:0 18px}.mobile-menu{display:block;border:0;background:transparent;font-size:19px}.crumb{display:none}.page{padding:30px 17px 40px}.intro{align-items:start}.intro h1{font-size:34px}.week-controls{margin-top:7px}.overview-grid{grid-template-columns:1fr;margin-top:27px}.week-grid{grid-template-columns:repeat(2,1fr)}.day-column{min-height:125px}.recipe-grid{grid-template-columns:repeat(2,1fr)}.bottom-grid{margin-top:38px;gap:30px}.today-content h2{font-size:18px}.new-button{padding:10px 11px}.top-actions{gap:2px}}