:root{font-family:Arial,sans-serif;color:#2f352b;background:#faf8f2}*{box-sizing:border-box}body{margin:0;background:#faf8f2}.shell{display:flex;min-height:100vh}.sidebar{width:238px;background:#f2f0e7;border-right:1px solid #e4e3d9;padding:34px 22px;display:flex;flex-direction:column;flex-shrink:0}.brand{text-decoration:none;color:#3f5135;font-family:Georgia,serif;font-size:25px;font-weight:bold;white-space:nowrap}.side-label,.eyebrow{font-size:11px;letter-spacing:2px;color:#9c7461;font-weight:700}.side-label{margin:58px 12px 17px}.sidebar nav{display:grid;gap:8px}.sidebar nav a{color:#596151;text-decoration:none;padding:13px 14px;border-radius:10px}.sidebar nav a:hover,.sidebar nav a:first-child{background:#dfe6d8;color:#3f5135}.side-foot{margin-top:auto;color:#9a9d8e;font-family:Georgia,serif;font-style:italic;font-size:14px}.main-content{flex:1;min-width:0}.topbar{height:82px;border-bottom:1px solid #e9e8df;background:#fffefa;display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:24px}.search{display:flex;align-items:center;gap:12px;color:#9a9d8e;max-width:530px;width:100%;background:#f5f4ed;border:1px solid #e7e8dc;border-radius:10px;padding:11px 15px}.search span{font-size:26px;line-height:18px}.search input{border:0;outline:0;background:transparent;width:100%;color:#333}.primary,.secondary{border:0;border-radius:9px;padding:12px 20px;cursor:pointer;font-weight:700}.primary{background:#526a43;color:white}.primary:hover{background:#405637}.secondary{background:#edf0e8;color:#42573a}.page-content{max-width:1320px;margin:auto;padding:47px 5% 80px}.intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:38px}.intro h1,.detail h1{font:normal 44px Georgia,serif;color:#344431;margin:12px 0}.intro p,.detail p{color:#858a7d;margin:0}.mobile-add{display:none}.list-bar{display:flex;justify-content:space-between;border-bottom:1px solid #e3e4d8;padding-bottom:16px;margin-bottom:24px;color:#7e8578;font-size:14px}.recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.card{background:#fff;border:1px solid #e8e8de;border-radius:14px;overflow:hidden;cursor:pointer;box-shadow:0 5px 18px #33333308}.card:hover{box-shadow:0 8px 24px #33333316}.card-image{height:210px;background:#e8ebde;position:relative;display:grid;place-items:center}.card-image img{width:100%;height:100%;object-fit:cover}.card-image>span{font:76px Georgia,serif;color:#b7bea5}.card-heart,.favorite{border:0;background:#fffdf7;border-radius:50%;color:#ae6855;cursor:pointer;font-size:23px;width:42px;height:42px}.card-heart{position:absolute;right:14px;top:14px}.card-content{padding:21px}.card-tags{height:24px;display:flex;gap:6px}.card-tags span,.tag{font-size:11px;background:#ecf0e5;color:#5e7653;border-radius:30px;padding:5px 9px}.card h2{font:normal 23px Georgia,serif;color:#344431;margin:10px 0}.card p{color:#888d82;font-size:14px;min-height:42px;line-height:1.5}.card-bottom{border-top:1px solid #eee;padding-top:16px;margin-top:18px;display:flex;justify-content:space-between;color:#8b9184;font-size:12px}.card-bottom span{color:#58724a;font-weight:700}.empty{text-align:center;background:#fff;border:1px dashed #d9dfcf;border-radius:16px;padding:80px 20px}.empty>div{font:60px Georgia,serif;color:#aab89b}.empty h2,.editor h2,.detail h2{font:normal 30px Georgia,serif;color:#344431}.empty p{color:#858a7d}.notice{background:#f8e9e2;color:#8f4839;padding:12px 16px;border-radius:8px;margin-bottom:18px}.back{border:0;background:transparent;color:#607552;cursor:pointer;margin-bottom:25px}.detail{background:#fff;border:1px solid #e8e8de;border-radius:16px;overflow:hidden}.detail-photo{width:100%;height:360px;object-fit:cover}.detail-body{padding:38px}.detail-top{display:flex;justify-content:space-between}.meta{margin:25px 0;display:flex;align-items:center;gap:8px;color:#697363}.recipe-columns{display:grid;grid-template-columns:1fr 1.4fr;gap:45px;border-top:1px solid #eee;padding-top:22px}.recipe-columns li{margin:0 0 13px;line-height:1.6}.detail-actions{display:flex;gap:10px;border-top:1px solid #eee;padding-top:25px;margin-top:25px}.editor-backdrop{position:fixed;inset:0;background:#1f2a1baa;display:flex;justify-content:center;align-items:start;overflow:auto;padding:35px 15px;z-index:10}.editor{background:#fffefa;width:min(700px,100%);padding:32px;border-radius:16px}.editor-head{display:flex;justify-content:space-between;align-items:start}.editor-head h2{margin:8px 0 24px}.icon-button{border:0;background:transparent;font-size:30px;cursor:pointer;color:#7d8578}.editor label{display:block;font-weight:700;font-size:14px;margin-bottom:18px}.editor small{font-weight:400;color:#909589}.field{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid #daddd2;border-radius:8px;background:#fff;color:#30382d}.field:focus{outline:2px solid #9aac8d}textarea.field{resize:vertical}.two-col{display:grid;grid-template-columns:1fr 2fr;gap:15px}.photo-preview{max-width:180px;max-height:120px;object-fit:cover;border-radius:8px}.editor-actions{display:flex;justify-content:end;gap:10px;margin-top:20px}@media(max-width:1050px){.recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.shell{display:block}.sidebar{width:100%;padding:15px 20px;display:block}.brand{font-size:21px}.sidebar nav{display:flex;gap:5px;margin-top:12px}.sidebar nav a{padding:7px 10px;font-size:13px}.side-label,.side-foot{display:none}.topbar{height:68px;padding:0 20px}.desktop-add{display:none}.mobile-add{display:block}.page-content{padding:30px 20px}.intro{align-items:start;gap:15px}.intro h1,.detail h1{font-size:34px}.intro p{font-size:13px}.recipe-grid{grid-template-columns:1fr}.recipe-columns{grid-template-columns:1fr;gap:10px}.detail-body{padding:24px}.detail-photo{height:220px}.list-bar span:last-child{display:none}.two-col{grid-template-columns:1fr}}
.card{position:relative}.card-link{position:absolute;inset:0;z-index:1}.card-link:focus-visible{outline:3px solid #526a43;outline-offset:-3px}.card-heart{z-index:2}.back{display:inline-block;text-decoration:none}.back:hover{text-decoration:underline}
.ingredient-group{margin:18px 0 24px}.ingredient-group h3{font:normal 19px Georgia,serif;color:#526a43;margin:0 0 12px}.ingredient-group ul{margin-top:0}

/* Een portretfoto mag de vaste hoogte van een receptkaart niet oprekken. */
.card-image { overflow: hidden; }
.card-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Kleuren uit het OnsKookboek-logo. */
:root {
  --ivory: #fff9e9;
  --paper: #fffdf5;
  --sand: #e9dfc8;
  --olive: #788b60;
  --olive-dark: #4d603b;
  --olive-soft: #e9eedf;
  --terracotta: #c64b2b;
  --terracotta-dark: #a93d24;
  --ink: #25313a;
  --muted: #69736a;
  background: var(--ivory);
  color: var(--ink);
}
body { background: var(--ivory); color: var(--ink); }
.sidebar { width: 280px; background: #f4ecda; border-color: var(--sand); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--olive-dark); font-size: 22px; }
.brand img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px #25313a22; }
.brand span { white-space: nowrap; }
.side-label, .eyebrow { color: var(--terracotta-dark); }
.sidebar nav a { color: var(--ink); }
.sidebar nav a:hover, .sidebar nav a:first-child { background: var(--olive-soft); color: var(--olive-dark); }
.sidebar nav a:first-child { border-left: 3px solid var(--terracotta); }
.side-foot { color: var(--olive-dark); }
.topbar { background: var(--paper); border-color: var(--sand); }
.search { background: var(--ivory); border-color: var(--sand); color: var(--olive-dark); }
.search input { color: var(--ink); }
.search input::placeholder { color: #8a907e; }
.primary { background: var(--olive-dark); color: var(--paper); text-decoration: none; }
.primary:hover { background: #394a2b; color: white; }
.secondary { background: var(--olive-soft); color: var(--olive-dark); }
.secondary:hover { background: #dce5d0; }
.intro h1, .detail h1, .empty h2, .editor h2, .detail h2, .card h2 { color: var(--ink); }
.intro p, .detail p, .empty p, .card p, .list-bar, .meta { color: var(--muted); }
.list-bar, .recipe-columns, .detail-actions, .card-bottom { border-color: var(--sand); }
.card, .detail, .empty { background: var(--paper); border-color: var(--sand); }
.card:hover { border-color: #d6a58c; box-shadow: 0 9px 25px #25313a18; }
.card-image { background: var(--olive-soft); }
.card-image > span { color: var(--olive); }
.card-heart, .favorite { background: var(--paper); color: var(--terracotta); }
.card-tags span, .tag { background: var(--olive-soft); color: var(--olive-dark); }
.tag-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 25px; }
.tag-filter { border: 1px solid var(--sand); border-radius: 999px; padding: 9px 15px; background: var(--paper); color: var(--olive-dark); font: inherit; font-size: 13px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tag-filter:hover { border-color: var(--olive); background: var(--olive-soft); }
.tag-filter.active { background: var(--olive-dark); border-color: var(--olive-dark); color: var(--paper); }
.tag-filter:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.card-bottom span, .back, .ingredient-group h3 { color: var(--olive-dark); }
.empty { border-style: dashed; }
.empty > div { color: var(--terracotta); }
.notice { background: #f8e9df; color: var(--terracotta-dark); }
.editor { background: var(--paper); }
.field { border-color: var(--sand); color: var(--ink); }
.field:focus, .card-link:focus-visible { outline: 2px solid var(--olive); }
.loading-state { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--olive-dark); }
.loading-state p { margin: 0; font-size: 15px; }
.loading-spinner { width: 44px; height: 44px; border: 4px solid var(--olive-soft); border-top-color: var(--terracotta); border-radius: 50%; animation: recipe-spin .8s linear infinite; }
@keyframes recipe-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; } }
@media (max-width: 700px) {
  .sidebar { width: 100%; }
  .brand img { width: 44px; height: 44px; }
  .brand { font-size: 20px; }
  .sidebar nav a:first-child { border-left-width: 2px; }
}