*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0f0f;--surface:#1a1a1a;--surface-2:#242424;--surface-hover:#2a2a2a;--accent:#e8a87c;--accent-2:#d4796a;--accent-glow:#e8a87c26;--text:#f0ece2;--text-dim:#a0998a;--text-muted:#6b6560;--border:#333;--card-bg:#1e1e1e;--tag-bg:#2a2520;--radius:12px;--radius-lg:20px;--shadow:0 8px 32px #0006}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Inter,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}.bg-pattern{pointer-events:none;z-index:0;background:radial-gradient(at 20% 20%,#e8a87c0f 0%,#0000 50%),radial-gradient(at 80% 80%,#d4796a0a 0%,#0000 50%);position:fixed;inset:0}header{text-align:center;z-index:1;padding:3rem 1.5rem 1rem;position:relative}.logo{justify-content:center;align-items:center;gap:.75rem;display:flex}.logo-icon{font-size:2rem}h1{background:linear-gradient(135deg, var(--accent), var(--accent-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Playfair Display,serif;font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700}.subtitle{color:var(--text-dim);letter-spacing:.5px;margin-top:.25rem;font-size:1.05rem;font-weight:300}main{z-index:1;max-width:900px;margin:0 auto;padding:1rem 1.5rem 4rem;position:relative}.hero-action{justify-content:center;margin:2rem 0;display:flex}.btn-surprise{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#1a1a1a;cursor:pointer;border:none;border-radius:50px;align-items:center;gap:.6rem;padding:1rem 2.5rem;font-family:inherit;font-size:1.15rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 24px #e8a87c4d}.btn-surprise:hover{transform:translateY(-2px);box-shadow:0 6px 32px #e8a87c73}.btn-surprise:active{transform:scale(.97)}.btn-surprise .dice{font-size:1.4rem;animation:2s ease-in-out infinite wiggle}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}.filters{margin:2rem 0 1rem}.filters h2{color:var(--text-dim);text-transform:lowercase;margin-bottom:.75rem;font-family:Playfair Display,serif;font-size:1.2rem;font-weight:600}.tags{flex-wrap:wrap;gap:.5rem;display:flex}.tag{background:var(--tag-bg);color:var(--text-dim);border:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:50px;padding:.45rem 1rem;font-family:inherit;font-size:.85rem;font-weight:500;transition:all .2s}.tag:hover{background:var(--surface-hover);color:var(--text);border-color:var(--accent)}.tag.active{background:var(--accent);color:#1a1a1a;border-color:var(--accent);font-weight:600}.suggestion-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin:2rem 0;padding:2rem;animation:.4s slideUp;position:relative}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.close-card{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.5rem;transition:all .2s;display:flex;position:absolute;top:1rem;right:1rem}.close-card:hover{background:var(--surface-2);color:var(--text)}.card-badge{background:var(--accent-glow);color:var(--accent);text-transform:uppercase;letter-spacing:1px;border-radius:50px;margin-bottom:.75rem;padding:.25rem .75rem;font-size:.75rem;font-weight:600;display:inline-block}.suggestion-card h2{margin-bottom:.75rem;font-family:Playfair Display,serif;font-size:1.8rem;font-weight:700}.card-meta{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.chip{border-radius:50px;padding:.3rem .75rem;font-size:.78rem;font-weight:500}.cuisine-chip{color:var(--accent);background:#e8a87c1f}.cost-chip{color:#82c882;background:#82c8821f}.rating-chip{color:gold;background:#ffd7001f}.card-desc{color:var(--text-dim);margin-bottom:1.25rem;font-size:.95rem;line-height:1.7}.card-section{margin-bottom:1rem}.card-section h3{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:.3rem;font-size:.75rem}.card-section p{color:var(--text-dim);font-size:.9rem}.card-moods{flex-wrap:wrap;gap:.4rem;margin:1rem 0;display:flex}.card-mood-tag{background:var(--surface-2);color:var(--text-muted);border-radius:50px;padding:.25rem .65rem;font-size:.75rem}.card-actions{border-top:1px solid var(--border);flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;display:flex}.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:50px;padding:.6rem 1.25rem;font-family:inherit;font-size:.85rem;font-weight:500;text-decoration:none;transition:all .2s}.btn-secondary:hover{background:var(--surface-hover);border-color:var(--accent)}.btn-another{color:var(--accent);border:1px solid var(--accent);cursor:pointer;background:0 0;border-radius:50px;margin-left:auto;padding:.6rem 1.25rem;font-family:inherit;font-size:.85rem;font-weight:500;transition:all .2s}.btn-another:hover{background:var(--accent);color:#1a1a1a}.cafe-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:2rem;display:grid}.cafe-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:1.25rem;transition:all .25s;position:relative}.cafe-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 24px #e8a87c1a}.cafe-card .card-name{margin-bottom:.35rem;font-family:Playfair Display,serif;font-size:1.15rem;font-weight:600}.cafe-card .card-cuisine-line{color:var(--accent);margin-bottom:.5rem;font-size:.8rem;font-weight:500}.cafe-card .card-vibe-preview{color:var(--text-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:.75rem;font-size:.82rem;line-height:1.5;display:-webkit-box;overflow:hidden}.cafe-card .card-tags{flex-wrap:wrap;gap:.3rem;display:flex}.mini-tag{background:var(--surface-2);color:var(--text-muted);border-radius:50px;padding:.15rem .5rem;font-size:.7rem}.cafe-card .card-cost-badge{color:#82c882;font-size:.8rem;font-weight:600;position:absolute;top:1rem;right:1rem}.cafe-card .card-rating-badge{color:gold;font-size:.75rem;font-weight:500;position:absolute;bottom:1rem;right:1rem}.empty-state{text-align:center;color:var(--text-muted);padding:3rem}footer{text-align:center;color:var(--text-muted);z-index:1;padding:2rem 1.5rem;font-size:.8rem;position:relative}footer code{background:var(--surface-2);color:var(--accent);border-radius:4px;padding:.15rem .4rem;font-size:.8rem}@media (width<=600px){header{padding:2rem 1rem .5rem}main{padding:1rem}.suggestion-card{padding:1.25rem}.suggestion-card h2{font-size:1.4rem}.card-actions{flex-direction:column}.btn-another{margin-left:0}.cafe-grid{grid-template-columns:1fr}}