:root{--p:#6d28d9;--p2:#8b5cf6;--bg:#f7f7fb;--card:#fff;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--ok:#0f766e}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);padding-bottom:86px}
header{position:sticky;top:0;z-index:4;background:#fff;padding:18px 18px 12px;border-bottom:1px solid var(--line);display:flex;gap:12px;justify-content:space-between;align-items:start}
h1{font-size:22px;margin:0 0 4px}header p{margin:0;color:var(--muted);font-size:13px}main{max-width:760px;margin:auto;padding:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin:0 0 14px;box-shadow:0 2px 10px #0000000a}
.hero{background:linear-gradient(135deg,#ede9fe,#faf5ff)}h2{margin:0 0 10px;font-size:21px}h3{margin:0 0 8px;font-size:17px}p{line-height:1.45}
button,.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:700;background:var(--p);color:white;font-size:15px;cursor:pointer}
button.ghost,.ghost{background:#fff;color:var(--p);border:1px solid #c4b5fd}.danger{background:#fff;color:#b91c1c;border:1px solid #fecaca}
input,select,textarea{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:11px;background:#fff;font:inherit;margin:6px 0 12px}
label{font-weight:700;font-size:14px}.muted{color:var(--muted);font-size:13px}.pill{display:inline-block;background:#ede9fe;color:#5b21b6;border-radius:999px;padding:5px 9px;font-size:12px;margin:2px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row>*{flex:1}.recipe{border-top:1px solid var(--line);padding:14px 0}.recipe:first-child{border-top:0}
ul,ol{padding-left:22px}li{margin:7px 0}.notice{background:#fff7ed;border:1px solid #fed7aa;padding:12px;border-radius:12px}.ok{background:#ecfdf5;border:1px solid #a7f3d0;padding:12px;border-radius:12px}
#nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:5;padding-bottom:env(safe-area-inset-bottom)}
#nav button{background:#fff;color:#4b5563;border-radius:0;padding:10px 2px;font-size:20px}#nav button span{display:block;font-size:11px;margin-top:3px}
#nav button.active{color:var(--p)}.step{font-size:18px}.heat{background:#f3f4f6;border-radius:12px;padding:10px}.timer{font-variant-numeric:tabular-nums;font-size:20px}
details{border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:10px}summary{font-weight:700}
.smallbtn{padding:8px 10px;font-size:13px}.right{text-align:right}.hidden{display:none}
@media(min-width:700px){main{padding:28px}header{padding-left:calc((100% - 760px)/2 + 18px);padding-right:calc((100% - 760px)/2 + 18px)}}
footer{max-width:900px;margin:28px auto 100px;padding:18px;color:var(--muted);font-size:.85rem;text-align:center}footer p{margin:8px 0}.linkbtn{background:transparent;color:var(--primary);padding:4px 8px;text-decoration:underline}.printable{max-width:720px}@media print{header,#nav,footer,.printable button{display:none!important}body{background:#fff}.card{box-shadow:none;border:0}}