:root{color-scheme:dark;--bg:#0c0d0c;--text:#f2f1ed;--muted:#999b95;--line:#383a36;--accent:#c9df9b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{opacity:.45;cursor:wait}header,main{width:min(100%,760px);margin:auto;padding:0 24px}header{height:84px;display:flex;align-items:center}.brand{text-decoration:none;font-weight:750;letter-spacing:-1.7px;font-size:29px;color:var(--text)}.brand span{font-size:9px;color:var(--accent);margin-left:3px}main{padding-bottom:145px}h1{font-size:38px;font-weight:500;letter-spacing:-1.6px;margin:17px 0 22px}.tools{display:flex;flex-direction:column;gap:14px;margin-bottom:30px}.search{border:1px solid var(--line);border-radius:30px;display:flex;align-items:center;gap:10px;padding:0 18px;background:var(--field)}.search:focus-within{border-color:#abc187}.search svg{width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:1.5;flex-shrink:0}.search input{width:100%;background:none;border:0;outline:0;color:var(--text);padding:16px 0;min-width:0}.search input::placeholder{color:var(--muted)}.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 1px 5px}.filters::-webkit-scrollbar{display:none}.filters button{flex-shrink:0;padding:12px 19px;border:1px solid var(--line);border-radius:30px;background:none;color:var(--secondary-text);font-size:14px}.filters button.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.grid{display:flex;flex-direction:column;gap:12px}.card{background:#eaece5;border-radius:35px;overflow:hidden;color:#121510}.card-open{border:0;background:none;color:inherit;display:flex;width:100%;padding:0;min-height:200px;text-align:left}.cover{width:42%;flex-shrink:0;display:flex;align-items:stretch;overflow:hidden;border-radius:35px;min-height:200px;background:#92b855}.cover img{width:100%;height:100%;min-height:200px;max-height:260px;object-fit:cover;align-self:center}.food-art{display:block;width:100%;height:100%;min-height:200px;object-fit:cover}.card:nth-child(even) .cover{order:2}.card-body{flex:1;min-width:0;padding:27px 23px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}.card h2{font-size:25px;line-height:1.1;font-weight:500;letter-spacing:-.7px;margin:0;overflow-wrap:anywhere}.meta{color:#71766a;font-size:13px;display:flex;gap:12px;flex-wrap:wrap}.bottom-bar{position:fixed;z-index:5;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:20px 24px calc(20px + env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(transparent,var(--dock-fade))}.glass-add{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:12px;width:min(100%,430px);min-height:61px;border-radius:26px;border:1px solid #ffffff4d;border-top-color:#ffffff80;background:#b9c7a528;color:#fff;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:0 12px 40px #0006,inset 0 1px 0 #ffffff1f;font-size:16px;font-weight:500}.glass-add span{font-size:27px;font-weight:300;color:#d7e7bd}.glass-add:hover{background:#b9c7a53f}.empty{text-align:center;border:1px solid var(--line);border-radius:30px;padding:48px 24px;margin:8px 0}.empty-symbol{font-size:42px;color:var(--accent)}.empty h2{font-size:23px;font-weight:400;letter-spacing:-.6px;margin:22px 0 12px}.empty p{font-size:14px;line-height:1.6;color:var(--muted)}#notice{padding:14px 17px;border:1px solid var(--line);color:var(--error);border-radius:16px;font-size:13px;line-height:1.6;margin:10px 0 20px}dialog{border:1px solid var(--line);border-radius:28px;background:var(--surface);color:var(--text);width:min(560px,94vw);max-height:90dvh;padding:26px;overscroll-behavior:contain}dialog::backdrop{background:#000a;backdrop-filter:blur(7px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}.dialog-top h2{font-size:25px;font-weight:500;letter-spacing:-.7px;margin:0;overflow-wrap:anywhere}.close{border:0;border-radius:50%;background:var(--ghost);width:36px;height:36px;flex-shrink:0;font-size:26px;color:var(--text)}form label{display:flex;flex-direction:column;gap:9px;margin-bottom:18px;font-size:13px;color:var(--secondary-text)}form input,form textarea,form select{border:1px solid var(--line);border-radius:13px;background:var(--field);padding:13px;width:100%;color:var(--text);min-width:0;font-size:16px}form input:focus,form textarea:focus,form select:focus{outline:1px solid var(--accent)}form textarea{resize:vertical}form small{color:var(--muted);font-size:11px}.row{display:flex;gap:14px}.row label{flex:1;min-width:0}.add{border:0;border-radius:20px;background:var(--accent);color:var(--on-accent);padding:15px 20px;font-weight:500}.save{width:100%;margin-top:12px}#form-error,#detail-error{color:var(--error);font-size:13px;line-height:1.5}#photo-preview{max-height:150px;max-width:100%;border-radius:13px}#remove-photo{border:0;color:var(--error);background:none;padding:12px 0}.detail-photo{width:100%;max-height:300px;object-fit:cover;border-radius:20px}.detail-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:15px;color:var(--secondary-text)}.detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.secondary{border:1px solid var(--line);border-radius:20px;background:none;padding:14px 20px;color:var(--text)}.danger{color:var(--error)}.detail-section{font-size:19px;font-weight:500;margin-top:28px}@media(max-width:480px){header,main{padding-left:20px;padding-right:20px}header{height:70px}.brand{font-size:25px}h1{font-size:34px;margin-top:12px;margin-bottom:19px}.tools{margin-bottom:24px}.filters button{padding:11px 16px;font-size:13px}.card,.cover{border-radius:29px}.card-open,.cover,.food-art{min-height:175px}.cover img{min-height:175px;max-height:210px}.cover{width:43%}.card-body{padding:22px 17px;gap:24px}.card h2{font-size:22px}.meta{font-size:11px;gap:6px 10px}.bottom-bar{padding-left:30px;padding-right:30px}.glass-add{min-height:59px;font-size:15px}dialog{padding:22px}}@media(prefers-reduced-motion:no-preference){button{transition:background .18s,border-color .18s}.card-open:hover{background:#fff3}}
/* Transparent artwork and photos share the card's neutral surface. */
.cover{background:transparent}.food-art{min-height:0;height:auto;align-self:center}.cover img{align-self:stretch;max-height:none;height:100%;min-height:200px}.detail-art{max-width:240px;margin:0 auto}.detail-art .food-art{width:100%}fieldset{min-width:0;border:0;padding:0;margin:0 0 25px}legend{font-size:15px;font-weight:500;margin-bottom:12px;padding:0}fieldset small,.field-hint{display:block;font-size:12px;line-height:1.6;color:var(--muted)}.field-hint{margin:0 0 14px}.step-row{border:1px solid var(--line);border-radius:16px;padding:13px;margin-bottom:12px}.step-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.step-label{font-size:13px;color:var(--accent)}.delete-step{border:0;background:none;color:var(--error);font-size:12px;padding:7px}.step-row textarea{display:block;border:0;background:var(--field);resize:vertical}.steps-field>.secondary{margin-bottom:9px}.nutrition-inputs,.nutrition-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.nutrition-inputs label{font-size:11px;margin:0}.nutrition-inputs input{padding:12px 8px}.nutrition-values{margin:17px 0 23px}.nutrition-values>div{border:1px solid var(--line);border-radius:14px;padding:13px 5px;text-align:center}.nutrition-values strong{display:block;font-size:21px;font-weight:500;margin-bottom:6px}.nutrition-values span{font-size:10px;color:var(--muted)}.art-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}.art-option{border:1px solid #3b4233;border-radius:16px;background:#24291e;color:#d6dacd;padding:7px 8px 12px;min-width:0}.art-option .food-art{width:100%;display:block}.art-option span{font-size:11px}.art-option.selected{border:2px solid var(--accent);background:#343d27;padding:6px 7px 11px}.recipe-steps{list-style:none;counter-reset:step;padding:0}.recipe-steps li{counter-increment:step;display:flex;gap:13px;align-items:flex-start;margin:18px 0}.recipe-steps li::before{content:counter(step);flex-shrink:0;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;color:var(--accent);background:var(--raised);font-size:13px}.recipe-steps .detail-text{flex:1;min-width:0}@media(max-width:480px){.cover img{min-height:175px}.nutrition-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}}
[hidden]{display:none!important}.art-picker{position:relative;display:flex;align-items:center;gap:10px;overflow-x:auto;padding:12px calc(50% - 57px);margin:0 0 16px;scroll-snap-type:x proximity;scrollbar-width:none;min-height:140px}.art-picker::-webkit-scrollbar{display:none}.art-option,.art-option.selected{flex:0 0 114px;width:114px;height:114px;padding:5px;border-radius:50%;scroll-snap-align:center;display:grid;place-items:center;overflow:hidden;border:2px solid transparent;background:radial-gradient(circle at 25% 20%,#e5efbe,#c9dfed 45%,#e6b9d1);opacity:.5;transform:scale(.84)}.art-option:nth-child(2n){background:radial-gradient(circle at 30% 25%,#fae5b9,#edb9d5 50%,#bfd7ed)}.art-option:nth-child(3n){background:radial-gradient(circle at 70% 20%,#dce9bd,#ccb9e7 50%,#f1d4b8)}.art-option.selected{opacity:1;transform:scale(1);border-color:var(--text);box-shadow:0 0 0 2px var(--surface)}.art-option:hover{opacity:1}.art-option .food-art{width:100%;height:100%}.art-option:focus-visible{outline-offset:-5px}.art-field{overflow:hidden}.nutrition-field>.row{margin-bottom:3px}
.card[data-category-color="breakfast"]{background:#f5dfb9}.card[data-category-color="main"]{background:#f1c8b9}.card[data-category-color="salad"]{background:#d5e6bd}.card[data-category-color="dessert"]{background:#e8cee4}.category-badge{border-radius:12px;background:#ffffff70;color:#394133;padding:4px 8px}.card .meta{align-items:center}.recipe-steps .no-steps::before{display:none}
header{justify-content:space-between;gap:12px}.storage-button{background:none;border:1px solid #41473a;border-radius:20px;color:#bfc9b2;padding:9px 12px;font-size:11px}.storage-button span{margin-left:6px}.storage-note{font-size:13px;line-height:1.7;color:var(--secondary-text)}.backup-actions{display:flex;flex-direction:column;gap:12px;margin:24px 0}.import-label{display:flex;flex-direction:column;gap:12px;cursor:pointer}.import-label input{max-width:100%;font-size:12px}#backup-status{font-size:13px;line-height:1.7;overflow-wrap:anywhere;color:var(--accent)}
.editor-page{padding:0;width:min(560px,100vw);max-height:94dvh;border-radius:28px}.editor-page form{padding:0 24px 24px}.editor-header{position:sticky;top:0;z-index:3;background:var(--sticky);backdrop-filter:blur(16px);display:flex;align-items:center;gap:12px;padding:22px 0;margin-bottom:12px}.editor-header h2{flex:1;margin:0;font-size:24px;font-weight:500;letter-spacing:-.7px}.back-button{background:var(--ghost);color:var(--text);border:1px solid var(--line);border-radius:50%;width:37px;height:37px;font-size:22px;flex-shrink:0}.recipe-image-setting{display:flex;align-items:center;gap:20px;margin-bottom:25px;padding:15px;border:1px solid var(--line);border-radius:22px;background:var(--raised)}#editor-cover{width:78px;height:78px;flex-shrink:0}#editor-cover img{width:100%;height:100%;object-fit:cover;border-radius:18px}#editor-cover svg{width:100%;height:100%}.recipe-image-setting button{font-size:12px;padding:11px 14px}.time-setting{display:flex;align-items:center;justify-content:space-between;padding:12px 0 22px;gap:16px}.time-setting>label{margin:0;font-size:13px}.switch{position:relative;width:48px;height:28px;flex-shrink:0}.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}.switch span{width:48px;height:28px;border-radius:20px;background:#454b3d;border:1px solid #59614e;transition:background .15s}.switch span::after{content:'';position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#e8ebdf;transition:transform .15s}.switch input:checked+span{background:var(--accent);border-color:var(--accent)}.switch input:checked+span::after{transform:translateX(20px);background:var(--on-accent)}.switch input:focus-visible+span{outline:2px solid white;outline-offset:3px}.editor-links{border-top:1px solid var(--line);margin:0 0 22px}.editor-links button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);padding:20px 3px;text-align:left;font-size:16px}.editor-links button>span:last-child{color:var(--accent);font-size:24px}.editor-links small{display:block;margin-top:6px;color:var(--muted);font-size:12px}.editor-footer{margin-top:24px}.editor-footer button{width:100%}.ingredient-row{border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:14px}.ingredient-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.ingredient-index{font-size:12px;letter-spacing:2px;color:var(--accent)}.delete-ingredient{border:0;background:none;color:var(--error);font-size:12px;padding:5px}.ingredient-quantity{display:grid;grid-template-columns:1fr 105px;gap:10px;margin-top:10px}.ingredient-details{list-style:none;padding:0;margin:0}.ingredient-details li{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:12px 0}.ingredient-details li>span{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}.ingredient-details strong{font-weight:400;color:var(--accent);flex-shrink:0}.photo-upload{padding:18px;border:1px dashed var(--line);border-radius:20px}.editor-page [data-editor-panel="steps"] .step-row{margin-top:0}.editor-page [data-editor-panel="nutrition"] legend{display:none}@media(max-width:600px){.editor-page{width:100vw;height:100dvh;max-height:100dvh;max-width:100vw;margin:0;border:0;border-radius:0}.editor-page form{padding:0 22px calc(24px + env(safe-area-inset-bottom))}.editor-header{padding-top:calc(18px + env(safe-area-inset-top))}.editor-page .nutrition-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.switch span,.switch span::after{transition:none}}
.recipe-image-setting{padding:10px 14px;margin-bottom:20px}.recipe-image-setting #editor-cover{width:60px;height:60px}.nav-chevron{display:block;width:8px;height:8px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);transform:rotate(45deg);margin-right:6px}.back-button{display:grid;place-items:center}.back-chevron{display:block;width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:3px}
:root{--surface:#171914;--field:#0f110d;--raised:#20251b;--secondary-text:#c1c9b5;--on-accent:#14200c;--error:#ffb5a7;--ghost:#ffffff0d;--sticky:#171914ed;--dock-fade:#0c0d0ca8;--glass:#b9c7a528;--glass-border:#ffffff4d}
:root[data-theme="light"]{color-scheme:light;--bg:#f7f6f0;--text:#263121;--muted:#6f7866;--line:#d7ddcf;--accent:#426333;--surface:#fffefa;--field:#fff;--raised:#eef1e6;--secondary-text:#4b5c42;--on-accent:#fff;--error:#a64235;--ghost:#23301909;--sticky:#fffefaed;--dock-fade:#f7f6f0e6;--glass:#ffffffe0;--glass-border:#9ba78d88}
.glass-add{color:var(--text);background:var(--glass);border-color:var(--glass-border)}.glass-add span{color:var(--accent)}.glass-add:hover{background:var(--raised)}.switch input:focus-visible+span{outline-color:var(--text)}.profile-button{border:1px solid var(--line);border-radius:50%;width:45px;height:45px;padding:3px;background:#fff;flex-shrink:0}.avatar-face{display:block;width:100%;height:100%;border-radius:50%;background-color:white;background-image:url('/avatars.png');background-size:300% 200%;background-position:0 0;background-repeat:no-repeat}.avatar-face[data-avatar="1"]{background-position:50% 0}.avatar-face[data-avatar="2"]{background-position:100% 0}.avatar-face[data-avatar="3"]{background-position:0 100%}.avatar-face[data-avatar="4"]{background-position:50% 100%}.avatar-face[data-avatar="5"]{background-position:100% 100%}.profile-dialog{width:min(460px,94vw);padding:26px}.profile-intro{display:flex;align-items:center;gap:18px;padding:6px 0 27px;border-bottom:1px solid var(--line)}.profile-avatar{width:80px;height:80px;flex-shrink:0;border:1px solid var(--line)}.profile-eyebrow{font-size:8px;letter-spacing:1.6px;color:var(--muted)}.profile-intro p{font-size:24px;margin:8px 0 0;letter-spacing:-.8px}.profile-section{padding:21px 0;border-bottom:1px solid var(--line)}.profile-section h3{font-size:13px;font-weight:400;margin:0 0 17px;color:var(--secondary-text)}.avatar-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.avatar-option{border:2px solid transparent;border-radius:50%;padding:3px;background:none;aspect-ratio:1;min-width:0}.avatar-option.selected{border-color:var(--accent);background:var(--raised)}.theme-options{display:flex;gap:10px}.theme-options button{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;border:1px solid var(--line);border-radius:17px;padding:16px 12px;background:var(--field);color:var(--muted);font-size:13px}.theme-options button.selected{border-color:var(--accent);color:var(--accent);background:var(--raised)}.theme-options svg,.profile-storage svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.profile-storage{display:flex;align-items:center;gap:15px;background:none;color:var(--text);border:0;width:100%;padding:24px 0 3px;text-align:left}.profile-storage>span:nth-child(2){flex:1;font-size:14px}.profile-storage small{display:block;color:var(--muted);font-size:10px;margin-top:7px}#profile-status{color:var(--error);font-size:12px;line-height:1.6}@media(max-width:400px){.avatar-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:250px;margin:auto}.avatar-option{width:70px;justify-self:center}.profile-dialog{padding:22px}.profile-section{padding:18px 0}.profile-intro{padding-bottom:20px}}
.avatar-option{display:grid;place-items:center}.avatar-option .avatar-face,.profile-button .avatar-face{aspect-ratio:1;height:auto}