:root{--bg: #f5f7fb;--surface: #ffffff;--surface-2: #f0f4fa;--line: #e3e8f0;--text: #15315e;--muted: #6b7a93;--faint: #9aa6ba;--accent: #2563eb;--accent-ink: #ffffff;--cta: #f5a623;--cta-ink: #3a2600;--navy: #15315e;--info: #2563eb;--chip: #eef3fb}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}.app{max-width:460px;margin:0 auto;min-height:100vh;background:var(--bg)}.header{padding:16px 18px 0;position:sticky;top:0;background:var(--navy);z-index:5}.brand{display:flex;align-items:center;gap:8px}.brand .basket{font-size:22px}.listbtn{display:flex;align-items:center;gap:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:18px;font-weight:600;padding:8px 12px;border-radius:11px}.listbtn .chev{font-size:12px;color:var(--cta)}.listbtn .lists-ico{font-size:16px;color:var(--cta)}.count{margin-left:auto;font-size:12px;color:#cdd9ee;background:#ffffff24;padding:4px 10px;border-radius:20px}.tabs{display:flex;gap:6px;margin-top:14px}.tab{flex:1;height:38px;border:1px solid rgba(255,255,255,.18);background:transparent;border-radius:9px 9px 0 0;font-size:14px;color:#a9c0e6;border-bottom:none}.tab.active{background:var(--bg);color:var(--navy);border-color:var(--bg);font-weight:600}.body{padding:12px 16px 96px}.addbar{display:flex;gap:8px;margin:6px 0 4px;position:relative}.addbar input{flex:1;height:46px;border:1px solid var(--line);border-radius:12px;padding:0 14px;font-size:16px;background:var(--surface);color:var(--text)}.addbar input::placeholder{color:var(--faint)}.addbar input:focus{outline:none;border-color:var(--accent)}.addbar .add{width:46px;border:none;background:var(--cta);color:var(--cta-ink);border-radius:12px;font-size:24px;line-height:1;font-weight:600}.suggest{position:absolute;top:52px;left:0;right:58px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;z-index:10;box-shadow:0 6px 20px #15315e1a}.suggest div{padding:12px 14px;font-size:15px;border-bottom:1px solid var(--line);text-transform:capitalize;color:var(--text)}.suggest div:last-child{border-bottom:none}.suggest div:active{background:var(--chip)}.badge{display:inline-block;font-size:11px;color:var(--muted);background:var(--chip);padding:4px 10px;border-radius:20px;margin:8px 0 0}.group{margin-top:18px}.group-head{display:flex;align-items:center;gap:7px;margin-bottom:2px}.group-head .emoji{font-size:15px}.group-head .name{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.item{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line)}.check{width:24px;height:24px;border-radius:7px;border:2px solid var(--faint);display:flex;align-items:center;justify-content:center;flex:none;color:#fff;font-size:14px}.item .label{flex:1;font-size:16px;text-transform:capitalize;color:var(--text)}.item.done .label{text-decoration:line-through;color:var(--faint)}.item .del{color:var(--faint);font-size:20px;background:none;border:none;padding:4px}.assign-chip{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;border:none;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}.assign-add{width:26px;height:26px;border-radius:50%;background:transparent;border:1px dashed var(--faint);color:var(--faint);font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}.points-badge{background:var(--chip);color:var(--navy);border:1px solid var(--line);border-radius:20px;font-size:11px;font-weight:600;padding:3px 9px;flex:none;white-space:nowrap}.points-options{display:flex;gap:8px;flex-wrap:wrap}.points-opt{flex:1;min-width:52px;height:46px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;font-size:17px;font-weight:600}.points-opt.on{border-color:var(--accent);color:var(--accent);background:var(--chip)}.leaderboard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:12px 0 6px}.lb-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px}.lb-row{display:flex;align-items:center;gap:10px;padding:6px 0}.lb-rank{width:16px;font-size:13px;color:var(--muted);font-weight:600}.lb-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-points{font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap}.empty{text-align:center;color:var(--faint);font-size:14px;margin-top:48px}.recipe{display:flex;align-items:center;gap:14px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:10px}.recipe .icon{width:48px;height:48px;border-radius:13px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}.recipe .meta{flex:1;min-width:0}.recipe .title{font-size:16px;font-weight:600}.recipe .sub{font-size:13px;color:var(--muted);margin-top:2px}.recipe .btn{border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:10px;height:38px;padding:0 13px;font-size:14px;font-weight:500;white-space:nowrap}.back{background:none;border:none;color:var(--accent);font-size:15px;padding:6px 0;margin-bottom:6px}.recipe-hero{height:150px;border-radius:16px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:80px;margin-bottom:14px}.recipe-h{font-size:22px;font-weight:600;margin:4px 0 2px}.recipe-sub2{font-size:13px;color:var(--muted)}.recipe-section{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:20px 0 8px}.serv{display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}.serv-label{font-size:15px;font-weight:500}.stepper{margin-left:auto;display:flex;align-items:center;gap:14px}.stepper button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--accent);font-size:20px;line-height:1}.serv-num{font-size:17px;font-weight:600;min-width:20px;text-align:center}.ing-list{list-style:none;padding:0;margin:0}.ing-list li{display:flex;align-items:center;justify-content:space-between;padding:10px 4px;border-bottom:1px solid var(--line);font-size:15px}.ing-name{text-transform:capitalize}.ing-qty{color:var(--muted);font-size:14px;white-space:nowrap;padding-left:12px}.steps{margin:0;padding-left:22px}.steps li{padding:6px 0;font-size:15px;line-height:1.55}.add-recipe-btn{width:100%;margin-top:22px;height:50px;background:var(--cta);color:var(--cta-ink);border:none;border-radius:12px;font-size:16px;font-weight:600}.match-tag{font-size:12px;color:var(--accent);margin-top:3px}.cat-row{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;margin:4px -2px 0}.cat-chip{flex:0 0 auto;height:34px;padding:0 14px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:20px;font-size:13px;white-space:nowrap}.cat-chip.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600}.stars{font-size:13px;color:#f0b429;letter-spacing:1px}.stars.muted{color:var(--faint);letter-spacing:normal}.stars-num{color:var(--muted);font-size:12px;margin-left:4px;letter-spacing:normal}.rate{display:flex;gap:6px}.star-btn{background:none;border:none;font-size:30px;line-height:1;color:var(--line);padding:2px}.star-btn.on{color:#f0b429}.reel{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px}.reel-card{flex:0 0 auto;width:96px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text)}.reel-emoji{font-size:32px}.reel-name{font-size:12px;text-align:center;line-height:1.25}.recipe-author{font-size:13px;color:var(--muted);margin-top:4px}.recipe-author a{color:var(--accent)}.frow{display:flex;gap:8px;margin-bottom:10px}.frow input,.ing-row input,.ftext{height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:15px;background:var(--surface);color:var(--text)}.frow input::placeholder,.ing-row input::placeholder,.ftext::placeholder{color:var(--faint)}.frow input:focus,.ing-row input:focus,.ftext:focus{outline:none;border-color:var(--accent)}.femoji{width:56px;text-align:center;font-size:22px}.fname{flex:1}.serv-inline{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}.serv-inline input{height:44px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--surface);color:var(--text)}.ing-row{display:flex;gap:6px;align-items:center;margin-bottom:8px}.ftext{height:auto;width:100%;padding:12px;line-height:1.5;font-family:inherit;resize:vertical}.ghost-btn{width:100%;margin-top:8px;height:44px;background:transparent;border:1px dashed var(--accent);color:var(--accent);border-radius:12px;font-size:15px}.ghost-btn.danger{border-style:solid;border-color:var(--line);color:#e05a5a;margin-top:10px}.seg{display:flex;gap:8px}.seg button{flex:1;height:44px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:10px;font-size:14px}.seg button.on{border-color:var(--accent);color:var(--accent);background:var(--chip);font-weight:600}.sheet-bg.center{align-items:center;justify-content:center}.modal{width:340px;max-width:88%;max-height:80vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 16px}.modal-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:14px 2px 8px}.list-select{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:15px;background:var(--surface);color:var(--text)}.ing-check-list{display:flex;flex-direction:column;gap:6px}.ing-check{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:15px;color:var(--text);text-transform:capitalize}.ing-check.on{border-color:var(--accent)}.ing-check .box{width:20px;height:20px;border-radius:6px;border:2px solid var(--faint);display:flex;align-items:center;justify-content:center;flex:none;color:#fff;font-size:12px}.ing-check.on .box{background:var(--accent);border-color:var(--accent)}.pick-row{display:flex;width:100%;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:8px;color:var(--text);font-size:16px}.pick-row:active{border-color:var(--accent)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--navy);color:#fff;font-size:14px;font-weight:500;padding:12px 18px;border-radius:12px;z-index:50;box-shadow:0 6px 24px #15315e40}.sheet-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#15315e73;z-index:40;display:flex;align-items:stretch;justify-content:flex-start}.sheet{width:320px;max-width:85%;height:100%;background:var(--surface);border-right:1px solid var(--line);border-radius:0 18px 18px 0;padding:18px 16px 28px;overflow-y:auto;animation:slidein .18s ease-out}@keyframes slidein{0%{transform:translate(-100%)}to{transform:translate(0)}}.sheet h2{font-size:17px;font-weight:600;margin:0 0 14px;display:flex;align-items:center}.sheet h2 .x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:22px}.sheet-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:16px 2px 8px}.lrow{display:flex;align-items:center;gap:8px;padding:13px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--surface-2)}.lrow.active{border-color:var(--accent)}.lrow .lname{flex:1;font-size:16px}.lrow .lcount{font-size:12px;color:var(--muted)}.lrow .ico{background:none;border:none;color:var(--muted);font-size:18px;padding:4px}.lrow .ico.share{color:var(--accent)}.newrow{display:flex;gap:8px;margin-top:12px}.newrow input{flex:1;height:44px;border:1px solid var(--line);border-radius:12px;padding:0 14px;font-size:16px;background:var(--surface-2);color:var(--text)}.newrow input:focus{outline:none;border-color:var(--accent)}.newrow button{background:var(--cta);color:var(--cta-ink);border:none;border-radius:12px;padding:0 16px;font-size:15px;font-weight:600}.shared-tag{font-size:10px;color:var(--accent);background:var(--chip);padding:2px 7px;border-radius:20px;margin-left:6px}.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tpl-card{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text)}.tpl-card:active{border-color:var(--accent)}.tpl-emoji{font-size:24px}.tpl-name{font-size:11px;text-align:center;line-height:1.2}.sheet-footer{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}.sheet-user{flex:1;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.signout-btn{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 14px;font-size:14px}.auth{max-width:360px;margin:80px auto;padding:0 24px;text-align:center}.auth input{width:100%;height:46px;border:1px solid var(--line);border-radius:12px;padding:0 14px;font-size:16px;margin:10px 0;background:var(--surface);color:var(--text)}.auth button{width:100%;height:46px;border:none;background:var(--cta);color:var(--cta-ink);border-radius:12px;font-size:16px;font-weight:600}.landing{max-width:480px;margin:0 auto;padding:36px 20px 48px}.hero{text-align:center}.hero-logo{font-size:56px;line-height:1}.hero h1{font-size:32px;font-weight:700;color:var(--navy);margin:8px 0 4px}.tagline{font-size:17px;color:var(--text);font-weight:500;margin:0 0 8px}.lead{font-size:15px;color:var(--muted);margin:0 auto;max-width:360px;line-height:1.5}.signin-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 18px;margin:26px 0 32px;box-shadow:0 10px 30px #15315e14;text-align:center}.signin-title{font-size:16px;font-weight:600;margin:0 0 12px;color:var(--navy)}.signin-card input{width:100%;height:48px;border:1px solid var(--line);border-radius:11px;padding:0 14px;font-size:16px;background:var(--surface);color:var(--text);margin-bottom:10px}.signin-card input:focus{outline:none;border-color:var(--accent)}.signin-card button{width:100%;height:48px;border:none;background:var(--cta);color:var(--cta-ink);border-radius:11px;font-size:16px;font-weight:600}.signin-note{font-size:13px;color:var(--muted);margin:12px 0 0}.signin-error{font-size:13px;color:#d8452f;margin:10px 0 0}.link-btn{background:none;border:none;color:var(--accent);font-size:13px;font-weight:600;padding:0;text-decoration:underline}.features-head{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;text-align:center}.features{display:flex;flex-direction:column;gap:16px}.feature{display:flex;gap:14px;align-items:flex-start}.feature-ico{font-size:24px;width:46px;height:46px;flex:none;background:var(--chip);border-radius:12px;display:flex;align-items:center;justify-content:center}.feature-title{font-size:15px;font-weight:600;color:var(--navy)}.feature-text{font-size:14px;color:var(--muted);line-height:1.45;margin-top:2px}.landing-foot{text-align:center;font-size:12px;color:var(--faint);margin-top:30px}