:root { --navy:#0b1f3a; --gold:#b8954f; --ink:#1c2026; --muted:#5a6470; --bg:#f6f3ec; --teal:#1a6b7a; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--ink); }
header { background:var(--navy); color:#fff; padding:28px 24px 56px; }
.brand { letter-spacing:.18em; font-size:12px; color:var(--gold); }
h1 { font-family: Georgia, serif; font-size: clamp(26px, 4vw, 40px); margin:14px 0 8px; max-width:720px; }
header p { color:#c9d2dc; max-width:640px; }
main { max-width:980px; margin:-36px auto 64px; padding:0 20px; }
.card { background:#fff; border-radius:12px; padding:24px; box-shadow:0 12px 40px rgba(11,31,58,.08); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:720px){ .grid { grid-template-columns:1fr; } }
label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
input { padding:10px 12px; border:1px solid #d9d3c7; border-radius:8px; font-size:15px; color:var(--ink); }
button { margin-top:16px; background:var(--navy); color:#fff; border:0; border-radius:8px; padding:12px 18px; font-size:15px; cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
.hint { color:var(--muted); font-size:13px; }
code { background:#eef2f4; padding:1px 5px; border-radius:4px; }
#results { margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.offer { background:#fff; border-radius:12px; padding:16px 18px; display:grid; grid-template-columns:120px 1fr auto; gap:16px; align-items:center; box-shadow:0 8px 24px rgba(11,31,58,.06); }
.offer img { width:120px; height:72px; object-fit:contain; background:#f4f1ea; border-radius:8px; }
.offer h3 { margin:0 0 4px; font-size:16px; }
.meta { font-size:13px; color:var(--muted); line-height:1.45; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tag { font-size:11px; background:#eef6f7; color:var(--teal); padding:3px 8px; border-radius:999px; }
.price { font-family: Georgia, serif; font-size:22px; color:var(--navy); white-space:nowrap; }
.shared { outline:2px solid var(--gold); }
footer { text-align:center; padding:24px; font-size:13px; color:var(--muted); }
@media (max-width:720px){
  .offer { grid-template-columns:1fr; }
}