:root{
  --bg: #E8F4FA;
  --text: #222;
  --muted: #666;
  --primary: #4A90E2;
  --accent: #FF6F3C;
  --card: #fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
header{
  background: var(--primary);
  color: #fff;
  padding: 14px 18px;
  display:flex;align-items:center;justify-content:space-between;
}
nav a{color:#fff;text-decoration:none;margin-left:14px;font-weight:600}
.container{max-width:1080px;margin:0 auto;padding:16px}
.card{
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding:16px;margin:16px 0;
}
h1,h2,h3{margin:8px 0 10px}
.btn{
  display:inline-block;border:0;border-radius:8px;
  background: var(--accent);color:#fff;
  font-weight:700;padding:10px 14px;cursor:pointer
}
.btn.secondary{background:#222;color:#fff}
input,select,textarea{
  width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;margin:6px 0 12px
}
.grid{
  display:grid;gap:16px
}
.grid-2{grid-template-columns:1fr 1fr}
@media(max-width:800px){.grid-2{grid-template-columns:1fr}}
.recipe-hero img{width:100%;border-radius:12px}
.meta{color:var(--muted);font-size:.95rem}
.badge{display:inline-block;background:#eef;border-radius:999px;padding:4px 10px;margin-right:6px}
footer{background:var(--primary);color:#fff;text-align:center;padding:20px;margin-top:24px}
.print-actions{display:flex;gap:10px;margin:10px 0}
/* anchor target padding for Jump to Recipe */
.anchor-offset{scroll-margin-top:90px}
/* buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; border:1px solid var(--primary,#4a90e2); background:var(--primary,#4a90e2); color:#fff; text-decoration:none; }
.btn.secondary { background:#fff; color:#174ea6; border:1px solid #cfe1ff; }
.btn:hover { filter:brightness(0.96); }

/* grid helpers */
.grid { display:grid; gap:12px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media(max-width:800px){ .grid-2{ grid-template-columns:1fr; } }

/* utilities */
.meta { color:#666; font-size:.95rem; }
.thumb-wrap {
  position: relative;
}
.badge-new {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #e53935;   /* red pop */
  color: #fff;
  font-weight: 600;
  font-size: .8rem;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}