#recept-demo .recipe-app{color-scheme:light;--paper:light-dark(#fff9f7,#1c2422);--surface:light-dark(#ffffff,#29332f);--ink:light-dark(#2b352c,#f4f7f5);--dim:light-dark(#647065,#bcc9c1);--leaf:light-dark(#28734f,#97d7b0);--onleaf:light-dark(#ffffff,#153525);--soft:light-dark(#eef8ef,#30473a);--line:light-dark(#e7ece8,#46554c);color:var(--ink);background:var(--paper);font:400 16px/1.5 system-ui,sans-serif;max-width:410px;height:740px;min-height:0;display:flex;flex-direction:column;overflow:hidden;margin:18px auto;padding:0;border-radius:28px;box-shadow:0 12px 40px #00000016;box-sizing:border-box;overflow-wrap:anywhere}
#recept-demo .recipe-app *{box-sizing:border-box}
#recept-demo .recipe-app{position:relative}
#recept-demo .app-content{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:24px 20px;scrollbar-width:thin}
#recept-demo .app-content>.eyebrow{display:block;padding-right:52px}
#recept-demo .app-content>h1{padding-right:52px}
#recept-demo .app-content>.back{max-width:calc(100% - 52px)}
#recept-demo .dark-mode-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
#recept-demo .mode-status{display:block;color:var(--dim);font-size:13px}
#recept-demo .dark-toggle{position:relative;flex-shrink:0;width:58px;height:44px;padding:0;border:0;background:transparent}
#recept-demo .dark-toggle::before{content:"";position:absolute;inset:6px 0;border-radius:20px;background:var(--line)}
#recept-demo .dark-toggle::after{content:"";position:absolute;left:4px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--ink);transition:transform .16s ease}
#recept-demo .dark-toggle[aria-checked=true]::before{background:var(--leaf)}
#recept-demo .dark-toggle[aria-checked=true]::after{background:var(--onleaf);transform:translateX(26px)}
@media(prefers-reduced-motion:reduce){#recept-demo .dark-toggle::after{transition:none}}
#recept-demo .settings-bar{position:absolute;top:24px;right:20px;width:calc(100% - 40px);display:flex;justify-content:flex-end;z-index:2;pointer-events:none}
#recept-demo .settings-bar>button,#recept-demo .settings-panel{pointer-events:auto}
#recept-demo .settings-toggle{display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:8px;background:transparent;border:0}
#recept-demo .settings-toggle svg{width:36px;height:36px;stroke-width:2}
#recept-demo .settings-panel{position:absolute;top:56px;right:0;width:260px;max-width:100%;padding:10px 16px 16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 30px #00000026}
#recept-demo .recipe-app .settings-panel h2{margin:0 0 12px;font:500 16px/1.4 system-ui;letter-spacing:normal}
#recept-demo .backup-settings{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
#recept-demo .backup-action{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin:8px 0;font-size:14px;padding:10px 8px;border:0;background:transparent}
#recept-demo .backup-status{font-size:13px;margin:8px 0 0;overflow-wrap:anywhere}
#recept-demo .backup-status:empty{display:none}
#recept-demo [data-backup-error]{color:light-dark(#a32b30,#ffb2b2)}
#recept-demo [data-backup-preview]{font-size:14px;margin-top:12px}
#recept-demo [data-cancel-backup]{margin-top:8px}
#recept-demo .recipe-app a{color:var(--leaf)}
#recept-demo .recipe-app h1{font:500 30px/1.25 "Manrope",system-ui,sans-serif;letter-spacing:-.8px;margin:8px 0;color:var(--leaf)}
#recept-demo .recipe-app h2{font:500 21px/1.35 "Manrope",system-ui,sans-serif;letter-spacing:-.4px;margin:22px 0 12px}
#recept-demo .recipe-app h3,#recept-demo .folder-grid strong{font:500 16px/1.4 system-ui,sans-serif}
#recept-demo .recipe-app h3{margin:0}
#recept-demo .recipe-app h1.recipe-name{font:500 26px/1.3 system-ui,sans-serif;color:var(--ink);letter-spacing:normal}
#recept-demo .eyebrow{font-size:12px;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase}
#recept-demo .sub{color:var(--dim);font-size:13px;margin:4px 0 18px}
#recept-demo button,#recept-demo input,#recept-demo select,#recept-demo textarea{font:inherit}
#recept-demo button{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;min-height:44px;padding:10px 14px}
#recept-demo .primary{background:var(--leaf);color:var(--onleaf);border-color:var(--leaf)}
#recept-demo .wide{width:100%}
#recept-demo .search{display:flex;align-items:center;gap:10px;padding:4px 12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:20px 0 14px}
#recept-demo input,#recept-demo select,#recept-demo textarea{width:100%;min-width:0;min-height:46px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px}
#recept-demo .search input{border:0;padding:8px 0;background:transparent}
#recept-demo .chips{display:flex;flex-wrap:wrap;gap:8px}
#recept-demo .chips button{font-size:13px;padding:8px 12px}
#recept-demo .source-tabs{display:flex;border-bottom:1px solid var(--line);margin:20px 0 22px;gap:0}
#recept-demo .source-tabs button{flex:1;min-width:0;min-height:48px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--dim);padding:12px 8px}
#recept-demo .source-tabs button[aria-selected=true]{border-bottom-color:var(--leaf);color:var(--leaf);font-weight:500}
#recept-demo button[aria-pressed=true]{background:var(--leaf);color:var(--onleaf);border-color:var(--leaf)}
#recept-demo .recipe-carousel{position:relative}
#recept-demo .recipes{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 12px)/2);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px 0 5px}
#recept-demo .recipes::-webkit-scrollbar{display:none}
#recept-demo .recipe-tile{position:relative;min-width:0;scroll-snap-align:start}
#recept-demo .recipe-tile .recipe-card{width:100%;height:100%;min-width:0}
#recept-demo .favorite-heart{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:10px;background:var(--surface);color:var(--ink)}
#recept-demo .favorite-on-card{position:absolute;top:8px;right:8px;border:0;border-radius:50%;box-shadow:0 2px 8px #00000015}
#recept-demo .favorite-heart[aria-pressed=true]{background:var(--surface);color:light-dark(#b22b4b,#ffa3b9);border-color:var(--line)}
#recept-demo .favorite-heart[aria-pressed=true] svg{fill:currentColor}
#recept-demo .recipe-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
#recept-demo .recipe-title-row h1{min-width:0}
#recept-demo .recipe-meta-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
#recept-demo .recipe-meta-row .sub{margin:0;min-width:0}
#recept-demo .edit-recipe-button{display:flex;align-items:center;gap:7px;flex-shrink:0;border:0;background:transparent;font-size:14px;color:var(--leaf);padding:10px 0 10px 8px}
#recept-demo .edit-recipe-text{min-height:145px}
#recept-demo [data-edit-error]{color:light-dark(#a32b30,#ffb2b2);font-size:14px}
#recept-demo [data-edit-error]:empty{display:none}
#recept-demo .favorite-detail,#recept-demo .favorite-detail[aria-pressed=true]{flex-shrink:0;border:0;background:transparent;padding:10px}
#recept-demo .recipe-arrow{position:absolute;top:36px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border-radius:50%;background:var(--surface);box-shadow:0 3px 12px #0000001c}
#recept-demo .recipe-arrow.previous{left:-12px}
#recept-demo .recipe-arrow.next{right:-12px}
#recept-demo .recipe-arrow:disabled{visibility:hidden}
#recept-demo .recipe-card{text-align:left;padding:0;overflow:hidden;background:var(--surface)}
#recept-demo .food{display:flex;align-items:center;justify-content:center;height:110px;background:var(--soft);font-size:58px}
#recept-demo .card-copy{padding:12px;display:block}
#recept-demo .meta{font-size:12px;color:var(--dim);display:block;margin-top:6px}
#recept-demo .list{display:flex;flex-direction:column;gap:10px}
#recept-demo .list .recipe-card{display:flex;align-items:center;gap:2px}
#recept-demo .list .food{width:74px;min-width:74px;height:90px;font-size:36px}
#recept-demo .folder-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
#recept-demo .folder-grid button{text-align:left;background:var(--soft);border:0;padding:15px}
#recept-demo .folder-grid strong{display:block;font-weight:500;margin-top:8px}
#recept-demo .category-symbol{display:flex;align-items:center;justify-content:flex-start;font-size:30px;line-height:1.2;min-height:36px}
#recept-demo .bun-picture{display:block;width:32px;height:29px;border-radius:48% 52% 45% 45%;background:repeating-radial-gradient(ellipse at 46% 45%,#7f3e19 0 2px,#d89145 2px 5px,#efbb72 5px 6px);border:2px solid #bc702c;box-shadow:0 3px 0 #a65d29;transform:rotate(-12deg)}
#recept-demo .bun-picture::after{content:"";display:block;width:3px;height:2px;background:#fff1d4;border-radius:2px;margin:4px 0 0 8px;box-shadow:9px 3px #fff1d4,3px 12px #fff1d4,14px 11px #fff1d4,0 18px #fff1d4}
#recept-demo .mince-picture{display:block;position:relative;width:35px;height:27px;background:#efe9e0;border-radius:5px 5px 10px 10px;border:1px solid #c6c0b5;box-shadow:0 2px 0 #b7b2a8}
#recept-demo .mince-picture::before{content:"";position:absolute;inset:2px 2px 5px;border-radius:5px;background:repeating-linear-gradient(28deg,transparent 0 3px,#a74c50 3px 4px,transparent 4px 6px),repeating-linear-gradient(-34deg,#e99c9d 0 2px,#c56c73 2px 3px,#f0b3ae 3px 5px)}
#recept-demo nav{display:flex;gap:4px;border-top:1px solid var(--line);flex-shrink:0;margin:0;padding:10px 12px 15px;background:var(--surface);border-radius:0 0 28px 28px}
#recept-demo nav button{flex:1;border:0;background:transparent;font-size:12px;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:5px}
#recept-demo nav button[aria-current=page]{background:var(--soft);color:var(--leaf);font-weight:500}
#recept-demo .section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
#recept-demo .section-heading h2{margin:0}
#recept-demo .section-heading button{font-size:13px;flex-shrink:0}
#recept-demo .folder-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#recept-demo .folder-heading h1{min-width:0;margin:8px 0}
#recept-demo .folder-add{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:var(--soft);color:var(--leaf)}
#recept-demo .back{border:0;background:transparent;padding-left:0}
#recept-demo .hero-food{height:145px;border-radius:18px;font-size:76px;margin:14px 0}
#recept-demo label{display:block;font-size:14px;margin:16px 0 6px}
#recept-demo textarea{min-height:95px;resize:vertical}
#recept-demo ul,#recept-demo ol{padding-left:23px}
#recept-demo li{margin:8px 0}
#recept-demo .ingredient-list{list-style:none;padding:0;margin:12px 0}
#recept-demo .ingredient-list li{margin:0;border-bottom:1px solid var(--line)}
#recept-demo .ingredient-list label{display:flex;align-items:center;gap:12px;margin:0;min-height:52px;padding:10px 0;font-size:16px}
#recept-demo .ingredient-list input{width:22px;height:22px;min-height:22px;flex-shrink:0;accent-color:var(--leaf);padding:0}
#recept-demo .ingredient-list input:checked+span{text-decoration:line-through;color:var(--dim)}
#recept-demo .empty{padding:24px 0;color:var(--dim)}
#recept-demo .status{font-size:13px;color:var(--dim);margin:12px 0;min-height:20px}
#recept-demo [hidden]{display:none!important}
@media(max-width:360px){#recept-demo .recipe-app{padding:0;border-radius:20px}#recept-demo .app-content{padding:20px 14px 24px}#recept-demo .settings-bar{top:20px;right:14px;width:calc(100% - 28px)}#recept-demo nav{margin:0}#recept-demo .card-copy{padding:9px}}

html,body{margin:0;height:100%;font-family:system-ui,sans-serif;background:light-dark(#fff9f7,#1c2422);color-scheme:light dark}
*{box-sizing:border-box}button,a,label.cursor-interaction{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #5aa97b;outline-offset:2px}
#recept-demo{height:100dvh;min-height:0;max-width:900px;margin:auto}
#recept-demo .recipe-app{width:100%;max-width:none;height:100%;margin:0;border-radius:0;box-shadow:none}
#recept-demo .app-content{padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:24px;overscroll-behavior-y:contain}
#recept-demo .settings-bar{top:calc(24px + env(safe-area-inset-top))}
#recept-demo nav{border-radius:0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
#recept-demo nav button{font-size:13px;min-height:52px}
#recept-demo .settings-panel{max-height:calc(100dvh - 190px);overflow-y:auto}
#recept-demo .recipe-photo{display:block;width:100%;height:110px;object-fit:cover}
#recept-demo .hero-photo{height:240px;border-radius:18px;margin:14px 0}
#recept-demo .edit-photo{width:100%;max-height:180px;object-fit:cover;border-radius:14px}
#recept-demo .remove-image{display:flex;align-items:center;gap:10px}
#recept-demo .remove-image input{width:22px;min-height:22px}
#recept-demo .install-help{font-size:13px;color:var(--dim);border-top:1px solid var(--line);margin-top:16px}
#recept-demo [data-save-error]{color:light-dark(#a32b30,#ffb2b2);font-size:14px}
#recept-demo [data-save-error]:empty{display:none}
#notice{position:fixed;left:12px;right:12px;bottom:100px;z-index:20;background:#29332f;color:#fff;padding:14px;border-radius:12px;max-width:650px;margin:auto}
@media(min-width:640px){#recept-demo .app-content{padding-left:40px;padding-right:40px}#recept-demo .folder-grid{grid-template-columns:repeat(3,1fr)}#recept-demo .recipe-photo,#recept-demo .food{height:190px}#recept-demo .hero-photo,#recept-demo .hero-food{height:310px}#recept-demo .recipe-arrow{top:76px}#recept-demo .settings-bar{right:40px;width:calc(100% - 80px)}}

/* Import and review share the existing mobile form rhythm. */
#recept-demo .recipe-review{border:0;margin:20px 0 0;padding:0;min-width:0}
#recept-demo .recipe-review[hidden],#recept-demo [data-import-gate][hidden]{display:none}
#recept-demo .recipe-review legend{font-size:20px;font-weight:700;margin-bottom:8px}
#recept-demo .import-help{font-size:13px;line-height:1.5;color:var(--muted);margin:8px 0 14px}
#recept-demo .import-status{font-size:14px;line-height:1.5;margin-top:12px}
#recept-demo [data-cancel-import]{margin-top:8px}
#recept-demo [data-cancel-import][hidden]{display:none}
#recept-demo .recipe-review textarea{min-height:140px}