:root{
    --bg:#FAF9F6;
    --surface:#FFFFFF;
    --surface-2:#F2F0EA;
    --border:#E4E1D8;
    --text:#1B1B17;
    --text-muted:#6E6C63;
    --accent:#3F5D3F;
    --accent-strong:#2E4630;
    --accent-tint:#EAF0E7;
    --accent-contrast:#FFFFFF;
    --shadow: 0 1px 2px rgba(20,20,10,0.04), 0 8px 24px rgba(20,20,10,0.06);
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
  }

  [data-theme="dark"]{
    --bg:#121210;
    --surface:#1B1B18;
    --surface-2:#232320;
    --border:#302F2B;
    --text:#F1EFE9;
    --text-muted:#9C9A91;
    --accent:#7FAE7A;
    --accent-strong:#9BC496;
    --accent-tint:#20281F;
    --accent-contrast:#0F150F;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing:antialiased;
    transition:background 0.25s ease, color 0.25s ease;
    min-height:100vh;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  }

  .shell{ max-width:960px; margin:0 auto; padding:0 24px 80px; }

  /* ---------- Top bar ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 24px; max-width:960px; margin:0 auto;
  }
  .brand{
    display:flex; align-items:baseline; gap:8px;
    font-family:'Fraunces', serif; font-weight:600; font-size:20px; letter-spacing:-0.01em;
  }
  .brand-mark{ color:var(--accent); font-size:22px; }

  .theme-toggle{
    display:flex; align-items:center; gap:6px;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:999px; padding:4px; cursor:pointer; position:relative;
    width:64px; height:32px;
  }
  .theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .theme-knob{
    position:absolute; top:3px; left:3px;
    width:24px; height:24px; border-radius:50%;
    background:var(--accent); color:var(--accent-contrast);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; transition:transform 0.25s ease, background 0.25s ease;
  }
  [data-theme="dark"] .theme-knob{ transform:translateX(30px); }

  /* ---------- Hero ---------- */
  .hero{ padding:36px 0 30px; text-align:left; }
  .eyebrow{
    font-size:13px; color:var(--accent); font-weight:600;
    letter-spacing:0.06em; text-transform:uppercase; margin:0 0 12px;
  }
  h1{
    font-family:'Fraunces', serif; font-weight:500; font-size:44px;
    line-height:1.08; letter-spacing:-0.02em; margin:0 0 14px; max-width:520px;
  }
  .sub{
    color:var(--text-muted); font-size:16px; line-height:1.55;
    max-width:480px; margin:0 0 28px;
  }

  /* ---------- Search ---------- */
  .search-row{
    display:flex; gap:10px; margin-bottom:16px;
  }
  .search-field{
    flex:1; position:relative;
  }
  .search-field svg{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    color:var(--text-muted); pointer-events:none;
  }
  input#searchInput{
    width:100%; padding:15px 16px 15px 44px;
    border:1px solid var(--border); border-radius:var(--radius-md);
    background:var(--surface); color:var(--text);
    font-family:'Inter', sans-serif; font-size:15px;
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
  }
  input#searchInput::placeholder{ color:var(--text-muted); }
  input#searchInput:focus{
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-tint);
  }
  button.primary{
    padding:15px 26px; border:none; border-radius:var(--radius-md);
    background:var(--accent); color:var(--accent-contrast);
    font-family:'Inter', sans-serif; font-weight:600; font-size:15px;
    cursor:pointer; transition:background 0.2s ease, transform 0.1s ease;
    white-space:nowrap;
  }
  button.primary:hover{ background:var(--accent-strong); }
  button.primary:active{ transform:scale(0.98); }
  button.primary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  button.primary:disabled{ opacity:0.6; cursor:default; }

  .chip-row{
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;
  }
  .chip{
    padding:8px 14px; border-radius:999px; border:1px solid var(--border);
    background:var(--surface); color:var(--text-muted);
    font-size:13px; font-weight:500; cursor:pointer;
    transition:all 0.15s ease;
  }
  .chip:hover{ border-color:var(--accent); color:var(--text); }
  .chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .chip.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }

  /* ---------- Status ---------- */
  .status{
    display:none; align-items:center; gap:10px;
    color:var(--text-muted); font-size:14px; padding:24px 0 4px;
  }
  .status.show{ display:flex; }
  .spinner{
    width:16px; height:16px; border-radius:50%;
    border:2px solid var(--border); border-top-color:var(--accent);
    animation:spin 0.7s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .empty{
    display:none; flex-direction:column; align-items:flex-start; gap:6px;
    padding:36px 0; border-top:1px solid var(--border); margin-top:20px;
  }
  .empty.show{ display:flex; }
  .empty-title{ font-family:'Fraunces', serif; font-size:20px; margin:0; }
  .empty-sub{ color:var(--text-muted); font-size:14px; margin:0; max-width:420px; line-height:1.5; }

  /* ---------- Results ---------- */
  #results{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;
    margin-top:26px;
  }
  @media (max-width:640px){ #results{ grid-template-columns:1fr; } }

  .recipe-card{
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); overflow:hidden; text-align:left;
    box-shadow:var(--shadow); cursor:pointer;
    transition:transform 0.18s ease, border-color 0.18s ease;
  }
  .recipe-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
  .recipe-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .thumb-wrap{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2); }
  .thumb-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
  .category-tag{
    position:absolute; top:10px; left:10px;
    background:rgba(20,20,15,0.65); color:#fff; backdrop-filter:blur(4px);
    font-size:11px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
    padding:5px 10px; border-radius:999px;
  }
  .card-body{ padding:16px 18px 18px; }
  .card-body h2{
    font-family:'Fraunces', serif; font-weight:500; font-size:19px;
    margin:0 0 6px; line-height:1.25; letter-spacing:-0.01em;
  }
  .card-meta{
    display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;
  }
  .meta-pill{
    font-size:11.5px; color:var(--text-muted); background:var(--surface-2);
    padding:3px 9px; border-radius:999px; border:1px solid var(--border);
  }
  .card-body p.excerpt{
    color:var(--text-muted); font-size:13.5px; line-height:1.5; margin:0;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .view-link{
    display:inline-flex; align-items:center; gap:5px; margin-top:12px;
    font-size:13px; font-weight:600; color:var(--accent);
  }

  /* ---------- Modal ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(15,15,10,0.5);
    display:none; align-items:flex-start; justify-content:center;
    padding:40px 20px; overflow-y:auto; z-index:50;
    backdrop-filter:blur(2px);
  }
  .overlay.show{ display:flex; }
  .modal{
    background:var(--surface); border-radius:var(--radius-lg);
    max-width:640px; width:100%; box-shadow:var(--shadow);
    border:1px solid var(--border); overflow:hidden;
  }
  .modal-img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--surface-2); }
  .modal-body{ padding:28px 30px 34px; }
  .modal-close{
    position:absolute; top:14px; right:14px;
    width:34px; height:34px; border-radius:50%; border:none;
    background:rgba(20,20,15,0.55); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .modal-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .modal-wrap{ position:relative; }
  .modal-body h2{ font-family:'Fraunces', serif; font-weight:500; font-size:26px; margin:0 0 10px; letter-spacing:-0.01em; }
  .modal-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
  .section-label{
    font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--accent); margin:22px 0 10px;
  }
  .ingredient-list{ display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; }
  .ingredient-list li{
    font-size:13px; background:var(--accent-tint); color:var(--text);
    padding:6px 12px; border-radius:999px; border:1px solid var(--border);
  }
  .instructions{ font-size:14.5px; line-height:1.7; color:var(--text); white-space:pre-line; }

  footer{
    text-align:center; padding:28px 24px 10px; color:var(--text-muted); font-size:12.5px;
    }