:root{color-scheme:light;--green:#164b36;--green-2:#28694d;--cream:#f7f1df;--paper:#fffdf6;--ink:#153328;--muted:#607168;--line:#d8ddcf;--amber:#a45a13;--danger:#a7362d;--shadow:0 14px 35px rgba(16,55,40,.12);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--cream);color:var(--ink);font-size:18px;line-height:1.65}.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:10px max(18px,env(safe-area-inset-left));background:rgba(22,75,54,.97);color:#fff}.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font-weight:800;letter-spacing:.04em}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border:2px solid #f5dfae;border-radius:50%;color:#f5dfae;font-family:serif;font-size:24px}.text-button{border:1px solid rgba(255,255,255,.6);border-radius:999px;background:transparent;color:#fff;padding:8px 14px;font:inherit;font-weight:700}main{width:min(920px,100%);margin:auto;padding:32px 18px 120px}.hero{padding:26px 0 18px}.eyebrow{margin:0 0 4px;color:var(--green-2);font-weight:800;font-size:.82rem;letter-spacing:.12em}.hero h1,.page-title{margin:.1em 0;font-family:serif;font-size:clamp(2rem,8vw,3.4rem);line-height:1.12}.hero p{margin:10px 0;color:var(--muted)}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.product-card{min-height:170px;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:var(--shadow);color:inherit;text-align:left;font:inherit;cursor:pointer}.product-card strong{display:block;margin:8px 0;font-family:serif;font-size:1.6rem}.product-card p{margin:0;color:var(--muted);font-size:.95rem}.product-card.pending{box-shadow:none;background:#eee9db}.status-pill{display:inline-block;border-radius:999px;background:#dfeadd;color:var(--green);padding:3px 10px;font-size:.78rem;font-weight:800}.pending .status-pill{background:#ead9bd;color:#79471d}.info-card,.state-card,.step-card{border:1px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:var(--shadow);padding:22px;margin:18px 0}.overview-step{box-shadow:none}.state-card{text-align:center;padding:38px 22px}.state-icon{font-size:2.7rem}.state-card h2{margin:.25em 0}.state-card p{color:var(--muted)}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;padding:10px 20px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer}.primary-button{border:0;background:var(--green);color:#fff}.secondary-button{border:2px solid var(--green);background:transparent;color:var(--green)}.back-link{display:inline-block;margin:4px 0 12px;color:var(--green);font-weight:800;text-decoration:none}.summary{color:var(--muted)}.progress{display:flex;align-items:center;gap:12px;margin:22px 0}.progress progress{height:10px;flex:1;border:0;border-radius:99px;overflow:hidden;accent-color:var(--green)}.step-card h2{font-size:1.65rem;line-height:1.3;margin:.2em 0 .7em}.ingredients{margin:16px 0;padding:16px 16px 16px 38px;border-radius:14px;background:#eef2e8}.ingredients li+li{margin-top:7px}.instruction{font-size:1.1rem;white-space:pre-line}.checkpoint{border-left:5px solid #c98c37;background:#fff3d8;padding:12px 16px;margin-top:18px;font-weight:800}.step-nav{position:fixed;bottom:0;left:0;right:0;z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px max(18px,calc((100vw - 920px)/2 + 18px)) calc(12px + env(safe-area-inset-bottom));background:rgba(247,241,223,.96);border-top:1px solid var(--line)}.step-nav button{width:100%}.network-status{position:fixed;top:76px;left:50%;z-index:9;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:8px 14px;border-radius:999px;background:#694414;color:white;font-size:.86rem;font-weight:800}.version{margin-top:42px;text-align:center;color:var(--muted);font-size:.78rem}.install-help summary{cursor:pointer;font-weight:800;color:var(--green)}dialog{width:min(440px,calc(100% - 28px));border:0;border-radius:22px;padding:0;background:var(--paper);box-shadow:0 30px 80px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(4,26,18,.65)}dialog form{position:relative;padding:28px}.dialog-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:2rem;color:var(--muted)}dialog h2{font-size:1.65rem;margin:.2em 0}dialog label{display:block;font-weight:800;margin-top:18px}dialog input{width:100%;min-height:52px;margin:6px 0 10px;border:2px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit}dialog .primary-button{width:100%}.error-text{min-height:1.5em;color:var(--danger);font-weight:700;font-size:.9rem}.loading{opacity:.65;pointer-events:none}
@media(max-width:560px){body{font-size:17px}.product-grid{grid-template-columns:1fr}.product-card{min-height:145px}.hero{padding-top:18px}main{padding-inline:14px}.step-nav{padding-inline:14px}}
@media(max-width:340px){.brand{font-size:.9rem}.brand-mark{width:35px;height:35px}.topbar{padding-inline:10px}.product-card,.step-card,.info-card{padding:18px}main{padding-inline:10px}.step-nav{padding-inline:10px;gap:8px}.primary-button,.secondary-button{padding-inline:10px}}
@media(prefers-reduced-motion:no-preference){.product-card{transition:transform .18s ease,box-shadow .18s ease}.product-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(16,55,40,.17)}}
