:root{
  --bg:#f7fafc; --ink:#0f172a; --muted:#64748b; --btn:#111827; --btnInk:#ffffff; --card:#ffffff;
  --ring: rgba(17,24,39,0.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial}
.page{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;max-width:560px;margin:0 auto;padding:24px}
.top{display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:700;letter-spacing:.3px}
.hotel{font-size:12px;color:var(--muted)}
.center{text-align:center;margin-top:10vh}
h1{font-size:28px;margin:0 0 12px}
.hint{font-size:13px;color:var(--muted);margin-top:10px}
.moods{display:flex;gap:12px;justify-content:center;margin-top:16px}
.mood{appearance:none;border:0;border-radius:999px;background:var(--btn);color:var(--btnInk);padding:14px 18px;font-weight:600;cursor:pointer;box-shadow:0 6px 12px var(--ring)}
.mood:focus{outline:2px solid var(--ring)}
.results{margin-top:28px;display:grid;gap:12px}
.hidden{display:none}
.card{background:var(--card);border-radius:16px;padding:16px 16px 12px;box-shadow:0 6px 18px var(--ring);text-align:left}
.title{font-weight:700;margin:0 0 4px}
.meta{font-size:13px;color:var(--muted);margin:0 0 8px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
a.btn{display:inline-block;text-decoration:none;background:var(--btn);color:var(--btnInk);padding:10px 14px;border-radius:999px;font-weight:600}
.small{font-size:12px;color:var(--muted);}
.foot{display:flex;justify-content:center;gap:20px;margin-top:24px}
.footlink{color:var(--muted);text-decoration:none}