:root {
      --bg:#f5f0e8; --card:#fff; --ink:#1f1a17; --muted:#6b6560; --line:#e8e0d4;
      --accent:#a0522d; --accent-soft:#f3e8dc; --sage:#5c7a62; --sage-soft:#e8f0ea;
      --good:#1f7a3f; --bad:#b42318;
    }
    * { box-sizing:border-box; }
    body { margin:0; font-family:Georgia,"Times New Roman",serif; background:var(--bg); color:var(--ink); line-height:1.5; }
    body.modal-open { overflow:hidden; }
    .site-header { background:linear-gradient(135deg,#2c1f17,#3d2b22); color:#fff; padding:1rem 1.15rem 1.2rem; }
    .photo-top-nav { display:flex; gap:8px; flex-wrap:nowrap; width:100%; margin-bottom:.75rem; }
    .btn-nav { flex:1; min-width:0; min-height:44px; padding:10px 8px; border:0; border-radius:999px; background:#eee; color:#2d2a26; font-weight:700; font-size:.82rem; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; cursor:pointer; font-family:system-ui,sans-serif; }
    .btn-nav:hover, .btn-nav:focus-visible { background:#e3ddd3; outline:2px solid #f4b251; outline-offset:2px; }
    .header-bar { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-bottom:.65rem; }
    .add-recipe-btn { font-family:system-ui,sans-serif; border:0; border-radius:999px; padding:.55rem 1rem; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; white-space:nowrap; min-height:40px; }
    .site-header h1 { margin:.15rem 0; font-size:1.75rem; letter-spacing:-.02em; }
    .site-header .tagline { margin:0; color:#ddd; font-family:system-ui,sans-serif; font-size:.92rem; }
    main { width:min(1140px,100%); margin:0 auto; padding:1rem 1rem 1.5rem; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
    h2,h3,h4 { margin-top:0; }
    label { display:block; font-weight:700; margin:.65rem 0 .25rem; font-size:.92rem; }
    input, textarea, select, button { font:inherit; }
    input, textarea, select { width:100%; padding:.7rem .8rem; border:1px solid #ddd5c8; border-radius:12px; background:#fff; }
    input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); }
    textarea { min-height:90px; resize:vertical; }
    button { border:0; border-radius:12px; padding:.7rem 1rem; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; min-height:44px; }
    button.secondary { background:#5c5650; }
    button.danger { background:var(--bad); }
    button.good { background:var(--good); }
    button:disabled { opacity:.5; cursor:not-allowed; }
    .row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
    .actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
    .muted { color:var(--muted); font-size:.92rem; }
    .status { margin:.75rem 0; padding:.65rem; border-radius:12px; background:#fff7d6; border:1px solid #e8d48b; }
    .hidden { display:none !important; }
    .filter-panel { background:var(--accent-soft); border:1px solid var(--line); border-radius:14px; padding:.85rem; margin-bottom:1.1rem; }
    .filter-search input { border-radius:999px; padding:.75rem 1rem; width:100%; margin-bottom:.75rem; }
    .filter-sort { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-top:.65rem; }
    .filter-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
    .filter-sort select { width:auto; min-width:10rem; padding:.5rem .65rem; font-size:.88rem; }
    .category-chips { display:flex; flex-wrap:wrap; gap:.45rem; }
    .chip { padding:.45rem .9rem; border-radius:999px; border:1px solid #d4c4b0; background:#fff; color:var(--ink); font-size:.86rem; font-weight:600; min-height:auto; cursor:pointer; }
    .chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
    .chip-fav.active { background:#c47a1a; border-color:#c47a1a; color:#fff; }
    #message.list-empty { text-align:center; padding:2.5rem 1rem; color:var(--muted); font-style:italic; }
    #recipeList { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; }
    .recipe-box { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 3px 14px rgba(44,31,23,.07); cursor:pointer; transition:transform .15s,box-shadow .15s; }
    .recipe-box:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(44,31,23,.12); }
    .recipe-box-photo { position:relative; height:178px; background:linear-gradient(135deg,#e8d5c4,#b8cfc0); }
    .recipe-box-photo img { width:100%; height:100%; object-fit:cover; display:block; }
    .recipe-box-photo .placeholder-letter { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-size:2.5rem; font-weight:700; color:rgba(255,255,255,.75); }
    .recipe-box-fav { position:absolute; top:8px; right:8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; background:rgba(255,255,255,.92); border-radius:50%; border:1px solid #ecd9b8; color:#9ca3af; cursor:pointer; }
    .recipe-box-fav.is-fav { background:#fff3d6; border-color:#e6b422; color:#d4a017; box-shadow:0 0 0 2px rgba(212,160,23,.25); }
    .recipe-box-body { padding:.8rem .85rem .9rem; }
    .recipe-box-title { margin:0 0 .35rem; font-family:Georgia,serif; font-size:1.05rem; line-height:1.3; color:var(--ink); }
    .recipe-box-meta { margin:.2rem 0; font-size:.85rem; color:var(--muted); }
    .recipe-box-author { margin:.45rem 0 0; font-size:.82rem; color:var(--muted); font-style:italic; }
    .modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:16px; background:rgba(31,26,23,.55); overflow-y:auto; }
    .modal-panel { width:min(680px,100%); background:var(--card); border-radius:18px; border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.25); margin:auto 0; max-height:calc(100vh - 32px); overflow-y:auto; }
    .modal-panel.form-panel-wide { width:min(720px,100%); }
    .modal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:1rem 1.1rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:1; }
    .modal-head h2 { margin:0; font-family:Georgia,serif; font-size:1.25rem; }
    .modal-close { min-height:36px; padding:.4rem .75rem; background:#f0ebe3; color:var(--ink); border:1px solid var(--line); }
    .modal-body { padding:1rem 1.1rem 1.15rem; }
    .ai-box { border:1px solid #dcc9b8; background:var(--accent-soft); border-radius:14px; padding:1rem; margin-bottom:1rem; }
    .ai-status { margin-top:.5rem; font-size:.9rem; }
    .detail-hero { height:252px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#e8d5c4,#b8cfc0); margin-bottom:.85rem; }
    .detail-hero img { width:100%; height:100%; object-fit:cover; display:block; }
    .detail-subtitle { margin:0 0 .85rem; color:var(--muted); font-size:.95rem; }
    .detail-meta { margin-bottom:1rem; }
    .detail-meta p { margin:.35rem 0; font-size:.94rem; }
    .detail-servings { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
    .detail-servings select { width:auto; min-width:4.5rem; padding:.4rem .55rem; }
    .detail-servings-print { display:none; }
    .pill { display:inline-block; padding:.22rem .55rem; border-radius:999px; background:#f0ebe3; color:var(--muted); margin:.12rem .2rem .12rem 0; font-size:.8rem; }
    .recipe-section { margin-bottom:1rem; }
    .recipe-section h4 { font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; color:var(--sage); margin-bottom:.4rem; }
    .recipe-divider { border:0; border-top:1px solid var(--line); margin:.45rem 0 .75rem; }
    .recipe-section ul, .recipe-section ol { margin:0; padding-left:1.25rem; }
    .recipe-section li { margin-bottom:.35rem; line-height:1.5; }
    .list { white-space:pre-wrap; line-height:1.5; margin:0; }
    .recipe-links { margin-bottom:.75rem; font-size:.85rem; }
    .recipe-links a { color:var(--accent); font-weight:600; text-decoration:none; margin-right:.65rem; }
    .detail-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--line); }
    .detail-actions button { flex:1 1 auto; min-height:42px; font-size:.9rem; }
    .detail-actions .btn-fav { background:#c47a1a; }
    .detail-actions .btn-fav.is-fav { background:#8b5a12; }
    .view-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }
    .view-tab { min-height:40px; padding:.5rem 1rem; border-radius:999px; border:1px solid #d4c4b0; background:#fff; color:var(--ink); font-weight:700; cursor:pointer; }
    .view-tab.active { background:var(--sage); color:#fff; border-color:var(--sage); }
    .recipe-box-shop { width:100%; margin-top:.55rem; padding:.45rem .65rem; min-height:auto; font-size:.78rem; background:var(--sage-soft); color:var(--sage); border:1px solid #c5d8c8; border-radius:10px; }
    .recipe-box-shop:hover { background:#dce9df; }
    .badge-pending-sync { display:inline-block; padding:.22rem .55rem; border-radius:999px; color:#8b4513; font-weight:700; background:#fff3d6; font-size:.78rem; margin-top:.35rem; }
    .recipe-box-pending { border-color:#e8c878; background:#fffdf6; }
    .offline-sync-panel { margin:.75rem 0 1rem; padding:.75rem .9rem; border-radius:12px; background:#fff7d6; border:1px solid #e8d48b; font-size:.9rem; }
    .offline-sync-panel p { margin:.25rem 0; }
    .offline-sync-error { color:var(--bad); font-weight:600; }
    .shopping-panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem; box-shadow:0 3px 14px rgba(44,31,23,.07); }
    .shopping-panel h2 { font-family:Georgia,serif; margin-bottom:.35rem; }
    .shopping-list { list-style:none; margin:1rem 0 0; padding:0; }
    .shopping-item { display:flex; flex-direction:column; gap:.2rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
    .shopping-item:last-child { border-bottom:0; }
    .shopping-item label { display:flex; align-items:flex-start; gap:.65rem; font-weight:600; cursor:pointer; }
    .shopping-item input[type="checkbox"] { width:auto; margin-top:.2rem; flex-shrink:0; }
    .shopping-item.is-checked label span { text-decoration:line-through; color:var(--muted); }
    .shopping-source { padding-left:1.65rem; }
    .small { font-size:.85rem; }
    .warn { color:var(--bad); font-weight:700; }
    @media (max-width:850px) {
      main { padding:.85rem; }
      #recipeList { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.75rem; }
      .recipe-box-photo { height:156px; }
      .detail-hero { height:220px; }
      .row { grid-template-columns:1fr; }
      .modal { padding:8px; align-items:stretch; }
      .modal-panel { max-height:calc(100vh - 16px); border-radius:14px; }
      .detail-actions button { flex:1 1 calc(50% - .25rem); }
      .photo-top-nav { gap:6px; }
      .btn-nav { font-size:.78rem; padding:10px 6px; }
    }
    @media print {
      body.printing-recipe > *:not(#detailModal) { display:none !important; }
      body.printing-recipe #detailModal { position:static; background:none; padding:0; display:block !important; }
      body.printing-recipe .modal-head, body.printing-recipe .no-print { display:none !important; }
      body.printing-recipe .modal-panel { box-shadow:none; border:0; max-height:none; }
      body.printing-recipe .detail-servings select { display:none; }
      body.printing-recipe .detail-servings-print { display:block !important; }
    }