:root{--wine:#6b1e2e;--aub:#2b1220;--vine:#4d5c2b;--lime:#f7f0e1;--wheat:#d4a94a;--clay:#c77d5e;--ink:#2b1220;--line:#e2d6bd;--card:#fffdf8;--r:10px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lime);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai","Sarabun",sans-serif}
a{color:var(--wine)}a:hover{color:var(--aub)}
h1{font-size:1.6rem;margin:.4em 0 .5em;color:var(--aub)}h2{font-size:1.2rem;margin:.2em 0 .6em;color:var(--wine)}h3{font-size:1.05rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
main.wrap{padding-top:12px;padding-bottom:40px;min-height:70vh}
.topbar{background:var(--aub);color:var(--lime);border-bottom:4px solid var(--wheat)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--lime);text-decoration:none;font-weight:700;letter-spacing:.02em}
.brand-mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--wine);color:var(--wheat);font-family:Georgia,serif}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a,.nav .linklike{color:var(--lime);text-decoration:none;padding:8px 10px;border-radius:6px;font-size:.95rem}
.nav a:hover,.nav .linklike:hover{background:rgba(255,255,255,.12)}
.nav a.active{background:var(--wine);color:#fff}
.nav-toggle{display:none;background:none;border:1px solid var(--wheat);color:var(--wheat);border-radius:6px;font-size:1.3rem;padding:4px 10px}
.linklike{background:none;border:0;cursor:pointer;font:inherit}
form.inline,.inline{display:inline}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 16px;box-shadow:0 1px 2px rgba(43,18,32,.06)}
.card.narrow,.narrow{max-width:520px;margin-left:auto;margin-right:auto}
.lead{font-size:1.05rem;color:#5b4a52}
.muted{color:#7a6b70}.small{font-size:.86rem}
.btn{display:inline-block;background:#fff;color:var(--wine);border:1px solid var(--wine);border-radius:8px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{background:#f3e7e4}
.btn-primary{background:var(--wine);color:#fff}.btn-primary:hover{background:var(--aub);color:#fff}
.btn-danger{color:#9b1c1c;border-color:#c9a1a1}.btn-danger:hover{background:#f8e5e5}
.btn-small{padding:5px 10px;font-size:.88rem}
.btn-row,.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.field{display:block;margin:0 0 12px;font-weight:600;font-size:.92rem}
.field input,.field select,.field textarea,input.qty,select.unit,input.piece,input.prep,input.disp,.food-search,.steps-edit textarea{width:100%;font:inherit;font-weight:400;padding:9px 10px;border:1px solid #cdbf9f;border-radius:7px;background:#fff;color:var(--ink);margin-top:3px}
.field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--wheat);outline-offset:1px}
.check{display:flex;gap:8px;align-items:flex-start;margin:8px 0;font-size:.92rem}
.check input{margin-top:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.recipe-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;color:var(--ink);display:block;position:relative}
.recipe-card:hover{border-color:var(--wine);box-shadow:0 2px 8px rgba(107,30,46,.15)}
.recipe-card h3{margin:0 0 4px;color:var(--wine)}
.chip{display:inline-block;background:#efe3c8;color:var(--aub);border-radius:999px;padding:2px 10px;font-size:.8rem;margin:2px 4px 2px 0;text-decoration:none}
.chip-on{background:var(--vine);color:#fff}.chip-test{background:var(--clay);color:#fff}
.badge{display:inline-block;font-size:.7rem;font-weight:700;border-radius:4px;padding:1px 6px;background:#ddd;color:#333;vertical-align:middle;white-space:nowrap}
.badge:empty{display:none}
.b-usda{background:#d6e0f0;color:#1d3c6e}.b-uk{background:#f3d6da;color:#7c1d2b}.b-fr{background:#dbe7f7;color:#173c78}.b-ca{background:#f8d9d4;color:#8a1a10}.b-off{background:#e6efc9;color:#42521a}.b-other{background:#eee}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{background:#f3ead3;font-weight:700}
.table td.num,.nutr td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.nutr .sub td:first-child,.sub td:first-child{padding-left:22px}
.mini{width:100%;border-collapse:collapse;font-size:.85rem}.mini th,.mini td{padding:3px 6px;border-bottom:1px solid var(--line);text-align:right}.mini th:first-child,.mini td:first-child{text-align:left}
.flash{padding:10px 14px;border-radius:8px;margin:10px 0;border:1px solid}
.flash-ok{background:#e8f0d6;border-color:var(--vine);color:#2e3a14}.flash-error{background:#f8e0e0;border-color:#b33;color:#6a1111}.flash-info{background:#fbf1d3;border-color:var(--wheat);color:#5a4210}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:0 0 14px}
.filters .field{margin:0;min-width:150px}.filters .field.grow{flex:1;min-width:200px}
.tagcloud{margin:6px 0 14px}
.pager{display:flex;gap:8px;justify-content:center;margin:16px 0}
.linkbox{background:#fff;border:1px dashed var(--wine);border-radius:8px;padding:10px;word-break:break-all;font-family:ui-monospace,monospace;font-size:.85rem}
.inline-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.foot{color:#7a6b70;padding-bottom:30px;text-align:center}
.big-kcal{font-size:2rem;font-weight:700;color:var(--wine);line-height:1}
.warnings{list-style:none;padding:0;margin:8px 0}
.warnings li,.warn-line{padding:6px 10px;border-left:4px solid var(--wheat);background:#fbf5e3;margin:4px 0;font-size:.9rem;border-radius:0 6px 6px 0}
.w-error{border-color:#b33!important;background:#f9e6e6!important}.w-info{border-color:var(--vine)!important;background:#eef2e0!important}
.warn-text{color:#8a5a00}
.band{display:inline-block;padding:2px 10px;border-radius:999px;font-weight:700;font-size:.85rem;color:#fff}
.band-keto-friendly{background:var(--vine)}.band-moderate{background:var(--wheat);color:var(--aub)}.band-not-keto{background:var(--clay)}
.ing-list{padding-left:20px}
.delete-form{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.actions-card .btn{margin:2px 0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.tab{padding:8px 14px;border-radius:8px 8px 0 0;background:#efe3c8;color:var(--aub);text-decoration:none;font-weight:600}
.tab.on{background:var(--wine);color:#fff}
.label-options{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}.label-options .field{margin:0}
li.ok{color:var(--vine)}li.bad{color:#9b1c1c}
/* editor */
.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.editor-side{position:sticky;top:8px}
.ing-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 118px 92px 40px;gap:6px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.ing-row .ing-food{grid-column:1;grid-row:1}.ing-row .qty{grid-column:2;grid-row:1}.ing-row .unit{grid-column:3;grid-row:1}
.ing-row .piece{grid-column:4;grid-row:1}.ing-row [data-remove-row]{grid-column:5;grid-row:1;width:100%}
.ing-row .prep{grid-column:1;grid-row:2}.ing-row .disp{grid-column:2/5;grid-row:2}
.ing-row .row-note{grid-row:3}
.ing-food .food-search{padding-right:112px}
.ing-row .row-note{grid-column:1/-1;margin:0}.ing-row .row-note:empty{display:none}
.ing-row input,.ing-row select{margin-top:0}
.ing-food{position:relative}
.ing-food .badge{position:absolute;right:8px;top:9px;pointer-events:none}
.ac{position:absolute;z-index:20;left:0;right:0;top:100%;margin:2px 0 0;padding:0;list-style:none;background:#fff;border:1px solid var(--wine);border-radius:8px;max-height:300px;overflow:auto;box-shadow:0 8px 20px rgba(43,18,32,.25)}
.ac[hidden]{display:none}
.ac li{padding:8px 10px;display:flex;gap:8px;align-items:center;cursor:pointer;border-bottom:1px solid #f1e8d2}
.ac li.on,.ac li:hover{background:#f6e9d0}.ac .ac-name{flex:1}.ac-empty{color:#7a6b70}
.steps-edit{padding-left:22px}.steps-edit li{margin:0 0 8px;position:relative}
.steps-edit li textarea{width:calc(100% - 52px);display:inline-block;vertical-align:top}
.steps-edit li .btn{vertical-align:top;margin-left:4px}
.savebar{position:sticky;bottom:0;background:rgba(247,240,225,.96);padding:10px 0;border-top:1px solid var(--line);display:flex;gap:8px;z-index:10}
.preview h2{margin-bottom:4px}
@media(max-width:860px){
  .editor-grid{grid-template-columns:1fr}.editor-side{position:static}
  .ing-row{grid-template-columns:1fr 1fr 1fr 40px}
  .ing-row>*{grid-row:auto!important}
  .ing-row [data-remove-row]{grid-column:auto}
  .ing-row .ing-food{grid-column:1/-1}
  .ing-row .qty{grid-column:1/2}.ing-row .unit{grid-column:2/4}
  .ing-row .piece,.ing-row .prep,.ing-row .disp{grid-column:1/4}
  .grid2,.row2{grid-template-columns:1fr}
}
@media(max-width:720px){
  .nav-toggle{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:8px}.nav.open{display:flex}
  .topbar-in{padding-top:6px;padding-bottom:6px}
  h1{font-size:1.35rem}
}