:root {
  --cream:#fff9f1; --paper:#fffdf9; --navy:#17233d; --terracotta:#d96c4a;
  --terracotta-dark:#b85337; --sage:#6e8b74; --gold:#d8a64a; --ink-muted:#6f6b66;
  --line:#eadfd2; --shadow:0 18px 45px rgba(23,35,61,.10); --radius-lg:28px; --radius-md:18px;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--navy); background:var(--cream); line-height:1.6; }
a { color:inherit; text-decoration:none; } a:hover { color:var(--terracotta-dark); }
.site-header { background:var(--paper); border-bottom:1px solid rgba(234,223,210,.8); position:sticky; top:0; z-index:10; }
.nav { max-width:1180px; margin:0 auto; padding:1.1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:-.03em; font-size:1.25rem; }
.brand-mark { display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; color:#fff; background:var(--navy); box-shadow:inset 0 0 0 4px var(--gold); }
.nav-link { color:var(--ink-muted); font-weight:650; }
.nav-actions { display:flex; align-items:center; gap:.8rem; } .nav-actions form { margin:0; } .nav-actions button { border:0; background:transparent; color:var(--ink-muted); font:inherit; font-weight:650; cursor:pointer; }
.page-shell { max-width:1180px; margin:0 auto; padding:3.5rem 1.5rem 5rem; }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; min-height:480px; }
.eyebrow { color:var(--terracotta-dark); text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; font-weight:800; }
h1,h2,h3 { line-height:1.1; letter-spacing:-.04em; margin:0 0 1rem; } h1 { font-size:clamp(2.8rem,6vw,5.5rem); max-width:720px; } h2 { font-size:clamp(2rem,4vw,3rem); }
.lead { color:var(--ink-muted); font-size:1.15rem; max-width:580px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; padding:.8rem 1.25rem; font:inherit; font-weight:750; cursor:pointer; background:var(--terracotta); color:#fff; box-shadow:0 8px 18px rgba(217,108,74,.22); }
.button:hover { color:#fff; background:var(--terracotta-dark); transform:translateY(-1px); } .button-secondary { background:transparent; color:var(--navy); border:1px solid var(--line); box-shadow:none; } .button-secondary:hover { color:var(--navy); background:#fff; }
.hero-art { min-height:360px; border-radius:45% 55% 40% 60% / 45% 40% 60% 55%; background:radial-gradient(circle at 28% 25%,#f2c6a0 0 10%,transparent 11%),linear-gradient(145deg,var(--navy) 0 48%,var(--sage) 48% 68%,var(--terracotta) 68%); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.hero-art::before { content:""; position:absolute; inset:15%; border-radius:50%; border:1px solid rgba(255,255,255,.45); box-shadow:0 0 0 28px rgba(255,255,255,.08),0 0 0 56px rgba(255,255,255,.06); } .hero-art::after { content:"✦  ✧  ✦"; position:absolute; top:22%; right:18%; color:#fff; font-size:1.3rem; letter-spacing:1.2rem; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; } .muted { color:var(--ink-muted); }
.filter-panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.2rem; margin-bottom:2.5rem; box-shadow:0 8px 24px rgba(23,35,61,.04); }
#ingredient-create-form { display:flex; flex-wrap:wrap; align-items:end; gap:.8rem; }
#ingredient-create-form .field { flex:1 1 18rem; }
#ingredient-create-form > .button { flex:0 0 auto; }
.filter-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr auto; gap:.8rem; align-items:end; } .field { display:grid; gap:.35rem; } .field label { color:var(--ink-muted); font-size:.78rem; font-weight:750; }
input,select { width:100%; border:1px solid var(--line); border-radius:12px; padding:.75rem .85rem; background:#fff; color:var(--navy); font:inherit; } select { appearance:none; padding-right:2.5rem; background-image:linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position:calc(100% - 1.1rem) 50%,calc(100% - .75rem) 50%; background-size:.35rem .35rem,.35rem .35rem; background-repeat:no-repeat; } input:focus,select:focus { outline:3px solid rgba(217,108,74,.18); border-color:var(--terracotta); }
.recipe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; } .recipe-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:0 8px 20px rgba(23,35,61,.04); transition:transform .2s ease,box-shadow .2s ease; } .recipe-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.recipe-card-art { height:150px; background:linear-gradient(135deg,var(--sage),#dce3d6 48%,var(--gold)); position:relative; } .recipe-card-art::after { content:"✦"; position:absolute; right:1rem; top:.7rem; color:rgba(255,255,255,.8); font-size:2rem; }
.recipe-card-body { padding:1.1rem; } .recipe-card h3 { font-size:1.3rem; margin-bottom:.7rem; } .tag-row { display:flex; flex-wrap:wrap; gap:.45rem; } .tag { display:inline-flex; border-radius:999px; padding:.25rem .65rem; background:#f4eadf; color:var(--terracotta-dark); font-size:.72rem; font-weight:750; }
.empty-state { text-align:center; background:var(--paper); border:1px dashed var(--line); border-radius:var(--radius-lg); padding:3rem 1rem; color:var(--ink-muted); }
.recipe-form { max-width:900px; margin:0 auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.2rem,4vw,2.5rem); box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } .form-grid .full-width { grid-column:1 / -1; }
.form-section { border:0; border-top:1px solid var(--line); padding:1.5rem 0 0; margin:1.5rem 0 0; } .form-section legend { padding:0 .5rem 0 0; font-size:1.4rem; font-weight:800; letter-spacing:-.03em; }
.ingredient-row { display:grid; grid-template-columns:1fr 1fr auto auto; gap:.65rem; align-items:end; margin-bottom:.7rem; } .checkbox-field { display:flex; align-items:center; gap:.4rem; padding-bottom:.8rem; white-space:nowrap; } .checkbox-field input { width:auto; }
.form-actions { display:flex; justify-content:flex-end; gap:.7rem; margin-top:1.5rem; } .form-error { display:none; margin:1rem 0; padding:.8rem 1rem; border-radius:12px; background:#fbe7df; color:var(--terracotta-dark); } .form-error.visible { display:block; }
.modal-backdrop { display:none; position:fixed; inset:0; z-index:20; place-items:center; padding:1rem; background:rgba(23,35,61,.45); } .modal-backdrop.visible { display:grid; }
.modal { width:min(100%,480px); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.5rem; box-shadow:var(--shadow); } .modal-header { display:flex; align-items:start; justify-content:space-between; gap:1rem; } .modal-close { border:0; background:transparent; color:var(--ink-muted); font-size:1.5rem; cursor:pointer; }
.auth-card { max-width:560px; margin:0 auto; } .auth-card > .recipe-form { margin-top:1.5rem; } .success-message { margin:1rem 0; padding:.8rem 1rem; border-radius:12px; background:#e5f0e6; color:#45664b; }
.detail-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:3rem; align-items:start; } .detail-image,.detail-placeholder { width:100%; min-height:430px; border-radius:var(--radius-lg); object-fit:contain; background:var(--paper); box-shadow:var(--shadow); } .detail-placeholder { display:grid; place-items:center; background:linear-gradient(145deg,var(--navy),var(--sage)); color:#fff; font-size:4rem; } .detail-title-row { display:flex; align-items:start; justify-content:space-between; gap:1rem; }
.gallery-stage { position:relative; min-width:0; } .gallery-stage .detail-image { display:block; cursor:zoom-in; } .gallery-arrow,.thumbnail-arrow { border:0; border-radius:50%; width:2.5rem; height:2.5rem; display:grid; place-items:center; background:rgba(23,35,61,.78); color:#fff; font-size:2rem; line-height:1; cursor:pointer; } .gallery-arrow:disabled,.thumbnail-arrow:disabled { opacity:.35; cursor:default; } .gallery-stage .gallery-arrow { position:absolute; z-index:1; top:50%; transform:translateY(-50%); } .gallery-prev { left:.8rem; } .gallery-next { right:.8rem; } .thumbnail-browser { display:flex; align-items:center; gap:.55rem; min-width:0; width:100%; } .thumbnail-browser .thumbnail-arrow { flex:0 0 2rem; width:2rem; height:2rem; font-size:1.5rem; } .gallery-thumbnails { display:flex; flex:1 1 auto; min-width:0; gap:.6rem; overflow:hidden; padding:.15rem 0; max-width:none; scroll-behavior:smooth; } .gallery-thumbnail { padding:0; border:2px solid transparent; border-radius:12px; overflow:hidden; background:transparent; cursor:pointer; flex:0 0 72px; } .gallery-thumbnail.active { border-color:var(--terracotta); } .gallery-thumbnail img { display:block; width:72px; height:72px; object-fit:cover; } .image-overlay { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; gap:1rem; padding:2rem; background:rgba(10,16,30,.9); } .image-overlay[hidden] { display:none; } .image-overlay img { max-width:min(85vw,1400px); max-height:90vh; object-fit:contain; } .overlay-close { position:absolute; top:1rem; right:1.5rem; border:0; background:transparent; color:#fff; font-size:2.5rem; cursor:pointer; } .existing-image-preview { align-items:start; } .existing-image { display:grid; gap:.4rem; justify-items:start; }
.detail-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.8rem; } .detail-section { border-top:1px solid var(--line); padding-top:1.5rem; margin-top:1.5rem; } .ingredient-list { list-style:none; padding:0; margin:0; display:grid; gap:.65rem; } .ingredient-list li { display:flex; justify-content:space-between; gap:1rem; padding-bottom:.65rem; border-bottom:1px dashed var(--line); }
.nutrition-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; } .nutrition { background:#f4eadf; border-radius:14px; padding:.8rem; text-align:center; } .nutrition strong { display:block; font-size:1.2rem; }
.ingredient-admin-list { display:grid; gap:1rem; } .ingredient-admin-row { display:grid; grid-template-columns:1fr auto auto; gap:.7rem; align-items:center; }
.autocomplete-field { position:relative; } .suggestions { position:absolute; left:0; right:0; z-index:5; } .field-label { color:var(--ink-muted); font-size:.78rem; font-weight:750; } .image-input-row { display:flex; align-items:center; gap:.7rem; margin-top:.5rem; } .image-input-row .recipe-image-input { flex:1; } .image-preview img { border:2px solid transparent; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.step-row { display:grid; grid-template-columns:auto 1fr auto; gap:.7rem; align-items:start; margin-bottom:.8rem; } .step-number { padding-top:.75rem; font-weight:800; color:var(--terracotta-dark); } .preparation-list { display:grid; gap:.8rem; padding-left:1.5rem; } .preparation-list li { padding-left:.4rem; } .image-gallery { display:grid; gap:1rem; } .image-preview { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.7rem; } .image-preview img { width:100px; height:100px; object-fit:cover; border-radius:12px; }
.admin-dashboard { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:stretch; } .admin-card { display:flex; flex-direction:column; min-width:0; height:clamp(30rem,65vh,40rem); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; } .admin-card-header { display:flex; align-items:start; justify-content:space-between; gap:1rem; padding:1.25rem 1.25rem 1rem; border-bottom:1px solid var(--line); background:rgba(255,253,249,.92); } .admin-card-header h2 { font-size:1.8rem; margin-bottom:0; } .admin-card-header .eyebrow { margin:.1rem 0 .35rem; } .admin-count { display:grid; place-items:center; min-width:2.1rem; height:2.1rem; padding:0 .55rem; border-radius:999px; background:#f4eadf; color:var(--terracotta-dark); font-weight:800; } .admin-card-body { min-height:0; overflow-y:auto; padding:.55rem 1.25rem 1.25rem; scrollbar-color:var(--line) transparent; } .admin-list { display:grid; gap:0; } .admin-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--line); } .admin-row:last-child { border-bottom:0; } .admin-row .muted { display:block; font-size:.8rem; } .admin-row .tag-row { grid-column:1 / -1; } .admin-row .button { font-size:.78rem; padding:.55rem .8rem; white-space:nowrap; } .admin-ingredient { border-bottom:1px solid var(--line); padding:.15rem 0 .8rem; } .admin-ingredient:last-of-type { border-bottom:0; } .admin-ingredient .admin-row { border-bottom:0; } .admin-usage { margin:0 0 .65rem; padding:.55rem .75rem; border-radius:12px; background:#fff; border:1px solid var(--line); } .admin-usage summary { cursor:pointer; font-size:.85rem; font-weight:750; } .admin-usage ul { margin:.45rem 0 0; padding-left:1.2rem; font-size:.88rem; } .admin-usage a { color:var(--terracotta-dark); } .admin-inline-error { margin:.4rem 0 0; font-size:.82rem; }
@media (max-width:1000px) { .admin-dashboard { grid-template-columns:1fr; } .admin-card { height:28rem; } }
@media (max-width:850px) { .hero,.detail-layout { grid-template-columns:1fr; } .hero { min-height:0; } .hero-art { min-height:260px; } .filter-grid { grid-template-columns:repeat(2,1fr); } .filter-grid .button { width:100%; } .recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .page-shell { padding-top:2rem; } .nav { padding-inline:1rem; } .filter-grid,.recipe-grid,.nutrition-grid,.form-grid { grid-template-columns:1fr; } .section-heading { align-items:start; flex-direction:column; } h1 { font-size:3.2rem; } .detail-image,.detail-placeholder { min-height:280px; } .ingredient-row { grid-template-columns:1fr 1fr; } .ingredient-row .button-secondary { grid-column:2; } }