:root {
  color-scheme: dark;
  --bg: #061923;
  --panel: #0c2b39;
  --panel2: #103747;
  --line: #1e6070;
  --cyan: #62e5e5;
  --cyan2: #a5ffff;
  --text: #e9fbff;
  --muted: #9fc1ca;
  --gold: #ffd27a;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(35,154,174,.27), transparent 55%),
    radial-gradient(circle at 12% 75%, rgba(13,104,132,.18), transparent 30%),
    var(--bg);
}
.shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 56px; }
.top { text-align: center; margin-bottom: 28px; }
.logo { display:inline-flex; align-items:center; gap:10px; color:var(--cyan2); font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:800; }
.logo-mark { width:28px; height:28px; border:1px solid var(--cyan); border-radius:50%; display:grid; place-items:center; box-shadow:0 0 18px #42d8d855; }
h1 { margin:10px 0 7px; font-size:clamp(32px, 6vw, 48px); letter-spacing:-.04em; }
.subtitle { margin:0; color:var(--muted); font-size:15px; }
.count { display:inline-block; margin-top:13px; padding:5px 10px; border:1px solid #286273; border-radius:999px; color:#a9dce3; font-size:12px; }
.layout { display:grid; gap:18px; }
.result-card, .search-card {
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(145deg, rgba(16,55,71,.97), rgba(8,34,47,.97));
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.result-card { min-height:245px; padding:24px; position:relative; overflow:hidden; }
.result-card:before { content:""; position:absolute; width:220px; height:220px; right:-85px; top:-110px; border:1px solid #51cbd522; border-radius:50%; box-shadow:0 0 0 22px #51cbd20b, 0 0 0 45px #51cbd208; pointer-events:none; }
.eyebrow { color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.result-title { margin:10px 0 18px; font-size:25px; line-height:1.2; }
.placeholder { max-width:560px; color:#bdd5db; line-height:1.7; }
.placeholder strong { color:var(--cyan2); }
.ingredients { display:flex; flex-wrap:wrap; gap:10px; }
.ingredient {
  border:1px solid #28697a; background:#0a2634; color:#e7fbff;
  border-radius:12px; padding:11px 14px; font-size:14px; line-height:1.35;
  display:flex; align-items:center; gap:9px;
}
.ingredient .dot { width:7px; height:7px; flex:none; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px #62e5e5aa; }
.ingredient .qty { color:var(--gold); font-weight:800; white-space:nowrap; }
.note { margin:17px 0 0; padding:12px 14px; border-left:3px solid var(--gold); background:#ffd27a12; color:#f7dfb4; border-radius:0 10px 10px 0; font-size:13px; line-height:1.5; }
.search-card { padding:22px; }
.search-heading { margin:0 0 7px; font-size:19px; }
.search-help { margin:0 0 16px; color:var(--muted); font-size:13px; }
.search-row { display:flex; gap:10px; }
input {
  width:100%; min-width:0; padding:15px 16px; border-radius:12px;
  border:1px solid #347285; background:#061f2b; color:var(--text);
  outline:none; font:inherit; font-size:15px;
}
input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px #62e5e522; }
button {
  border:0; border-radius:12px; padding:0 22px; color:#03252e; background:var(--cyan);
  font:inherit; font-weight:800; cursor:pointer; transition:.15s ease;
}
button:hover { background:var(--cyan2); transform:translateY(-1px); }
button:focus-visible, .suggestion:focus-visible { outline:2px solid white; outline-offset:3px; }
.suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.suggestion { border:1px solid #285a69; background:#0a2633; color:#b8dce3; border-radius:999px; padding:7px 11px; font-size:12px; cursor:pointer; }
.suggestion:hover { border-color:var(--cyan); color:white; }
.status { min-height:20px; margin:12px 0 0; color:#ffcf8c; font-size:13px; }
.footer { text-align:center; color:#789ca6; font-size:12px; margin-top:20px; line-height:1.6; }
@media (max-width:600px) {
  .shell { width:min(100% - 22px, 900px); padding-top:24px; }
  .result-card, .search-card { padding:18px; border-radius:16px; }
  .search-row { flex-direction:column; }
  button { min-height:48px; }
  .result-title { font-size:22px; }
}