:root{
  --bg:#fbf5ec;--card:#fffdf9;--ink:#3a2c22;--muted:#8a7565;--line:#eadfce;
  --accent:#c8553d;--accent-soft:#f6e1d6;--sage:#6f8f6a;--chip:#f3e9dc;
  --shadow:0 2px 10px rgba(90,60,30,.08),0 1px 2px rgba(90,60,30,.06);
  --sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--sar:env(safe-area-inset-right);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1f1915;--card:#2a221d;--ink:#f3e8dc;--muted:#b09d8d;--line:#3d322a;
  --accent:#e8775c;--accent-soft:#4a2e25;--sage:#9cbb96;--chip:#352b24;--shadow:0 2px 10px rgba(0,0,0,.35);
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:ui-serif,"New York",Georgia,serif;letter-spacing:-.01em}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:var(--accent)}
[hidden]{display:none!important}

.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:calc(var(--sat) + 12px) calc(var(--sar) + 16px) 8px calc(var(--sal) + 16px);border-bottom:1px solid var(--line)}
.top h1{margin:0 0 10px;font-size:26px;font-weight:700}
.top h1 span{color:var(--accent)}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 12px;box-shadow:var(--shadow)}
.search svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;flex:none}
.search input{flex:1;border:0;background:transparent;color:var(--ink);font-size:16px;padding:11px 0;outline:none;min-width:0}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;white-space:nowrap;padding:7px 13px;border-radius:999px;background:var(--chip);color:var(--ink);font-size:14px;font-weight:500;border:1px solid transparent}
.chip.on{background:var(--accent);color:#fff}
.chip small{opacity:.65;margin-left:4px}

main{padding:4px calc(var(--sar) + 16px) calc(var(--sab) + 24px) calc(var(--sal) + 16px);max-width:1200px;margin:0 auto}
.count{color:var(--muted);font-size:13px;margin:10px 2px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:980px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);text-align:left;display:flex;flex-direction:column;padding:0;transition:transform .15s}
.card:active{transform:scale(.97)}
.thumb{aspect-ratio:4/3;width:100%;display:grid;place-items:center;font-size:44px;position:relative;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
.card h3{font-size:15px;line-height:1.25;margin:0;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.b{font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--chip);color:var(--muted);white-space:nowrap}
.b.cal{background:var(--accent-soft);color:var(--accent)}
.b.pro{color:var(--sage)}
.fav{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.fav svg{width:18px;height:18px;fill:none;stroke:#c8553d;stroke-width:2}
.fav.on svg{fill:#e0533b;stroke:#e0533b}
.empty{text-align:center;color:var(--muted);padding:40px 0}

/* gradients per category */
.g-0{background:linear-gradient(135deg,#fde2c8,#f7b98b)} .g-1{background:linear-gradient(135deg,#fff1c9,#f6cf7d)}
.g-2{background:linear-gradient(135deg,#ffe0d2,#f4a68a)} .g-3{background:linear-gradient(135deg,#f3d6cf,#c98b7a)}
.g-4{background:linear-gradient(135deg,#d6ecf3,#8fc3d6)} .g-5{background:linear-gradient(135deg,#fbe3c4,#e9b072)}
.g-6{background:linear-gradient(135deg,#e2f0d4,#a9cf8e)} .g-7{background:linear-gradient(135deg,#f6ead7,#dcc095)}
.g-8{background:linear-gradient(135deg,#fde0ea,#f2a7c0)} .g-9{background:linear-gradient(135deg,#e4efe0,#d6b0a0)}
.g-10{background:linear-gradient(135deg,#eaf3d2,#c9d98a)}
.g-11{background:linear-gradient(135deg,#d9f2e6,#8fd1b0)}
@media (prefers-color-scheme:dark){.thumb[class*="g-"]{filter:saturate(.75) brightness(.8)}}

/* detail */
#detail{min-height:100vh;padding-bottom:calc(var(--sab) + 32px)}
.hero{position:relative;height:min(52vh,420px);display:grid;place-items:center;font-size:96px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.25))}
.bar{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;justify-content:space-between;padding:calc(var(--sat) + 8px) calc(var(--sar) + 12px) 8px calc(var(--sal) + 12px);pointer-events:none}
.round{pointer-events:auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#3a2c22;box-shadow:0 2px 8px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.round svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.round.fav{position:static;width:42px;height:42px}
.sheet{position:relative;margin-top:-28px;background:var(--bg);border-radius:26px 26px 0 0;padding:22px calc(var(--sar) + 20px) 0 calc(var(--sal) + 20px);max-width:760px;margin-left:auto;margin-right:auto}
.cat{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700}
.sheet h2{font-size:28px;line-height:1.15;margin:4px 0 14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{background:var(--card);border-radius:14px;padding:10px 6px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:18px}
.stat span{font-size:11px;color:var(--muted)}
.est{font-size:12px;color:var(--muted);margin:6px 2px 0}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.tags span{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--chip);color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;box-shadow:var(--shadow)}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.wake{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border-radius:14px;padding:12px 14px;margin:14px 0;box-shadow:var(--shadow);font-weight:500}
.wake small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.switch{position:relative;width:51px;height:31px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch i{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:.2s}
.switch i::before{content:"";position:absolute;width:27px;height:27px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.2s}
.switch input:checked+i{background:var(--sage)}
.switch input:checked+i::before{transform:translateX(20px)}
.sheet h3{font-size:21px;margin:26px 0 8px;display:flex;align-items:baseline;justify-content:space-between}
.sheet h3 button{font-family:-apple-system,system-ui,sans-serif;font-size:13px;color:var(--accent);font-weight:600}
.sheet h4{margin:16px 0 4px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.checks li .box{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--muted);margin-top:1px;display:grid;place-items:center;transition:.15s}
.checks li.done .box{background:var(--sage);border-color:var(--sage)}
.checks li.done .box::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.checks li.done .txt{text-decoration:line-through;color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:4px 0 16px 46px;cursor:pointer}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;display:grid;place-items:center;font-size:15px}
.steps li.done{color:var(--muted)}
.steps li.done::before{content:"✓";background:var(--sage);color:#fff}
.notes{background:var(--card);border-radius:14px;padding:4px 16px;margin-top:8px;box-shadow:var(--shadow);font-size:15px}
.notes ul,.notes ol{padding-left:20px}
.missing{background:var(--accent-soft);border-radius:14px;padding:14px 16px;margin-top:20px}