:root{
  --bg: #1C1712;
  --bg-raised: #241D16;
  --card: #2A2119;
  --line: rgba(242,233,218,0.1);
  --text: #F2E9DA;
  --text-dim: #B8A98F;
  --saffron: #E3A83B;
  --paprika: #B4432F;
  --teal: #4C8C86;
  --radius: 10px;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  min-height:100%;
}

h1, h2, h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 0.5em;
}

a{ color:inherit; text-decoration:none; }

/* ---------- Header ---------- */

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem clamp(1.25rem, 5vw, 3rem);
  border-bottom:1px solid var(--line);
}

.wordmark{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:1.15rem;
}

.site-header nav{ display:flex; gap:1.75rem; }
.site-header nav a{
  font-size:0.9rem;
  color:var(--text-dim);
  transition:color 0.2s ease;
}
.site-header nav a:hover{ color:var(--saffron); }

.site-footer{
  text-align:center;
  padding:2rem;
  color:var(--text-dim);
  font-size:0.8rem;
  border-top:1px solid var(--line);
  margin-top:4rem;
}

.flash{
  background:rgba(180,67,47,0.15);
  border:1px solid rgba(180,67,47,0.4);
  color:var(--text);
  padding:0.75rem 1.25rem;
  margin:1rem clamp(1.25rem, 5vw, 3rem) 0;
  border-radius:var(--radius);
  max-width:640px;
}

main{
  max-width:1100px;
  margin:0 auto;
  padding:2.5rem clamp(1.25rem, 5vw, 3rem) 4rem;
}

/* ---------- Hero / index ---------- */

.hero{
  max-width:640px;
  margin:2rem auto 0;
  text-align:center;
}

.hero h1{
  font-size:clamp(2rem, 5vw, 2.9rem);
  line-height:1.1;
}

.hero-sub{
  color:var(--text-dim);
  font-size:1.05rem;
  line-height:1.6;
  margin-bottom:2rem;
}

.stat-row{
  display:flex;
  justify-content:center;
  gap:3rem;
  margin-bottom:2.5rem;
}

.stat{ display:flex; flex-direction:column; }
.stat strong{
  font-family:'Fraunces', serif;
  font-size:2rem;
  color:var(--saffron);
}
.stat span{ font-size:0.8rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.06em; }

.scrape-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.75rem;
  text-align:left;
}

.scrape-form input[type="text"],
.scrape-form textarea{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--text);
  font-size:1rem;
  padding:0.9em 1em;
  font-family:'Inter', sans-serif;
}
.scrape-form textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.5;
}
.scrape-form input[type="text"]:focus,
.scrape-form textarea:focus{
  outline:2px solid var(--saffron);
  outline-offset:1px;
}

.mode-toggle{
  display:flex;
  gap:1.5rem;
  font-size:0.88rem;
  color:var(--text-dim);
  flex-wrap:wrap;
}
.mode-toggle label{ display:flex; align-items:center; gap:0.4em; cursor:pointer; }

.scrape-form button{
  background:var(--saffron);
  border:none;
  border-radius:6px;
  color:#1C1712;
  font-weight:600;
  font-size:1rem;
  padding:0.9em 1.5em;
  cursor:pointer;
  transition:background 0.2s ease;
}
.scrape-form button:hover{ background:#f0ba58; }
.scrape-form button:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

.hero-note{
  margin-top:1.25rem;
  font-size:0.8rem;
  color:var(--text-dim);
}

/* ---------- Homepage live activity feed ---------- */

.live-activity{
  max-width:760px;
  margin:3rem auto 0;
}

.live-activity-heading{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-dim);
  margin-bottom:0.9rem;
  text-align:left;
}

.term-empty{
  color:var(--text-dim);
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  padding:0.5rem 0.2rem;
}

/* ---------- Results page ---------- */

.results-summary{ color:var(--text-dim); margin-bottom:1.5rem; }

.result-list{
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  margin-bottom:2rem;
}
.result-list li,
.result-list li a{
  display:block;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:8px;
  padding:0.9rem 1.1rem;
  transition:border-color 0.2s ease;
  font-size:0.9rem;
  color:var(--text-dim);
  word-break:break-all;
}
.result-list li a:hover{ border-color:var(--saffron); }

.actions-row{ display:flex; gap:1.5rem; }
.actions-row a{
  color:var(--saffron);
  font-weight:600;
  font-size:0.9rem;
}

.empty-state{ color:var(--text-dim); }

/* ---------- Surprise me ---------- */

.surprise{
  max-width:520px;
  margin:1rem auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.surprise-card{
  width:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:opacity 0.2s ease;
}

.surprise-card--rerolling{ opacity:0.4; }

.surprise-link{ display:block; }

.surprise-image{
  height:260px;
  background-size:cover;
  background-position:center;
  background-color:var(--bg-raised);
}

.surprise-image--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:4rem;
}

.surprise-body{ padding:1.5rem; text-align:left; }

.surprise-origin{
  color:var(--text-dim);
  font-size:0.9rem;
  margin-bottom:0.4rem;
  display:flex;
  align-items:center;
  gap:0.4rem;
}

.surprise-body h1{
  font-size:clamp(1.4rem, 4vw, 1.9rem);
  margin:0;
}

.surprise-actions{
  display:flex;
  gap:1rem;
  margin-top:1.75rem;
  width:100%;
}

.btn-nah{
  flex:1;
  background:transparent;
  border:1px solid var(--paprika);
  color:var(--paprika);
  border-radius:8px;
  padding:0.9em 1.5em;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
  font-family:'Inter', sans-serif;
}
.btn-nah:hover{ background:var(--paprika); color:var(--text); }
.btn-nah:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

.btn-yes{
  flex:1;
  background:var(--saffron);
  border:none;
  color:#1C1712;
  border-radius:8px;
  padding:0.9em 1.5em;
  font-size:1rem;
  font-weight:600;
  text-align:center;
  transition:background 0.2s ease;
}
.btn-yes:hover{ background:#f0ba58; }
.btn-yes:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

/* ---------- Live scrape terminal ---------- */

.terminal{
  background:#000;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size:0.82rem;
  max-height:420px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  margin-bottom:1.5rem;
}

.term-line{
  display:flex;
  gap:0.65rem;
  align-items:baseline;
  flex-wrap:wrap;
}

.term-prompt{ color:var(--saffron); flex-shrink:0; }

.term-url{
  color:var(--text);
  word-break:break-all;
}

.term-status{
  margin-left:auto;
  white-space:nowrap;
  padding-left:1rem;
}

.term-status--pending{ color:var(--text-dim); }

.term-status--working{
  color:var(--saffron);
  animation:term-pulse 1.4s ease-in-out infinite;
}

.term-status--done{
  color:var(--teal);
  font-weight:600;
}

@keyframes term-pulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.45; }
}

@media (prefers-reduced-motion: reduce){
  .term-status--working{ animation:none; }
}

/* ---------- Browse / country groups ---------- */

.browse-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:2rem;
  flex-wrap:wrap;
  gap:1rem;
}

.filter-form select{
  background:var(--bg-raised);
  border:1px solid var(--line);
  color:var(--text);
  padding:0.6em 0.9em;
  border-radius:6px;
  font-family:'Inter', sans-serif;
}

.country-group{ margin-bottom:2.75rem; }

.country-group h2{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-size:1.3rem;
  border-bottom:1px solid var(--line);
  padding-bottom:0.6rem;
  margin-bottom:1.25rem;
}

.flag{ font-size:1.3em; line-height:1; }

.count{
  margin-left:auto;
  font-family:'Inter', sans-serif;
  font-size:0.75rem;
  font-weight:500;
  color:var(--text-dim);
  background:var(--bg-raised);
  border-radius:100px;
  padding:0.2em 0.7em;
}

.recipe-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:1.1rem;
}

.recipe-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform 0.15s ease, border-color 0.15s ease;
  display:block;
}
.recipe-card:hover{ transform:translateY(-2px); border-color:var(--saffron); }

.card-image{
  height:130px;
  background-size:cover;
  background-position:center;
  background-color:var(--bg-raised);
}
.card-image--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.4rem;
}

.card-body{ padding:0.9rem 1rem; }
.card-body h3{
  font-size:0.98rem;
  font-weight:600;
  margin-bottom:0.2rem;
  line-height:1.3;
}
.muted{ color:var(--text-dim); font-size:0.82rem; }

/* ---------- Recipe detail ---------- */

.back-link{
  display:inline-block;
  color:var(--text-dim);
  font-size:0.85rem;
  margin-bottom:1.5rem;
}
.back-link:hover{ color:var(--saffron); }

.detail-image{
  width:100%;
  height:280px;
  background-size:cover;
  background-position:center;
  border-radius:var(--radius);
  margin-bottom:1.5rem;
}

.recipe-detail h1{ font-size:clamp(1.8rem, 4vw, 2.4rem); }

.origin-line{
  color:var(--text-dim);
  font-size:1rem;
  margin-bottom:1.25rem;
}

.meta-row{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  font-size:0.88rem;
  color:var(--text-dim);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1rem 0;
  margin-bottom:2rem;
}
.meta-row strong{ color:var(--text); }

.recipe-columns{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:2.5rem;
}

@media (max-width:640px){
  .recipe-columns{ grid-template-columns:1fr; }
}

.ingredients-col ul{
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.55rem;
}
.ingredients-col li{
  padding-bottom:0.55rem;
  border-bottom:1px dashed var(--line);
  font-size:0.94rem;
}

.steps-col ol{
  padding-left:1.2rem;
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}
.steps-col li{ line-height:1.6; }

.notes{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  color:var(--text-dim);
}

.source-line{
  margin-top:2.5rem;
  font-size:0.8rem;
  color:var(--text-dim);
}
.source-line a{ color:var(--saffron); }

@media (prefers-reduced-motion: reduce){
  .recipe-card{ transition:none; }
}