@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{color:#f8fafc;font-synthesis:none;--bg-dark:#0f172a;--bg-darker:#020617;--text-main:#f8fafc;--text-muted:#94a3b8;--accent:#38bdf8;--accent-glow:#38bdf866;--glass-bg:#1e293bb8;--glass-border:#ffffff1f;background:#020617;font-family:Outfit,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at top right, var(--bg-dark), var(--bg-darker) 100%);min-width:280px;min-height:100vh;color:var(--text-main);-webkit-font-smoothing:antialiased;margin:0}button,input{font:inherit}.app-container{width:min(100% - 2rem,920px);margin:0 auto;padding:3rem 0}.header{text-align:center;margin-bottom:2.5rem}.title{background:linear-gradient(135deg,#38bdf8,#818cf8);color:#0000;filter:drop-shadow(0 0 8px var(--accent-glow));-webkit-background-clip:text;background-clip:text;margin:0 0 .5rem;font-size:clamp(2.4rem,7vw,3rem);font-weight:700}.subtitle{color:var(--text-muted);margin:0;font-size:1.1rem}.search-panel{border:1px solid var(--glass-border);background:#0f172a8c;border-radius:20px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem;width:100%;padding:1.25rem;display:grid;box-shadow:0 10px 35px #00000038}.search-examples{color:var(--text-muted);flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:.45rem;padding:.1rem .35rem 0;font-size:.78rem;display:flex}.search-examples button{color:#c7d2fe;cursor:pointer;background:#818cf814;border:1px solid #818cf847;border-radius:999px;padding:.32rem .6rem}.search-examples button:hover{background:#818cf829}.search-examples button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.field-group{min-width:0}.field-group label{color:#dbeafe;margin:0 0 .5rem .35rem;font-size:.85rem;font-weight:600;display:block}.field-group label span{color:var(--text-muted);font-weight:400}.input-shell{align-items:center;display:flex;position:relative}.field-icon{z-index:1;color:var(--text-muted);pointer-events:none;position:absolute;left:1rem}.input-shell:focus-within .field-icon{color:var(--accent)}.search-input{border:1px solid var(--glass-border);background:var(--glass-bg);width:100%;min-width:0;color:var(--text-main);border-radius:14px;outline:none;padding:1rem 1rem 1rem 3rem;transition:border-color .2s,box-shadow .2s,background .2s}.search-input::placeholder{color:#7f8ea3}.search-input:focus-visible{border-color:var(--accent);background:#1e293bf2;box-shadow:0 0 0 3px #38bdf838}.field-help{color:var(--text-muted);margin:.45rem .35rem 0;font-size:.75rem}.results-status{text-align:center;min-height:4.25rem;color:var(--text-muted);padding:1.3rem 0 .8rem;font-size:.9rem}.results-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:1.25rem;width:100%;display:grid}.cocktail-card{cursor:pointer;perspective:1200px;border-radius:16px;outline:none;min-width:0;height:360px}.card-inner{height:100%;min-height:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.75,.25,1);display:grid}.cocktail-card.is-flipped .card-inner{transform:rotateY(180deg)}.card-face{border:1px solid var(--glass-border);background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);backface-visibility:hidden;border-radius:16px;flex-direction:column;grid-area:1/1;min-width:0;height:100%;padding:1.4rem;transition:box-shadow .2s,border-color .2s;display:flex;overflow:hidden;box-shadow:0 0 #0000}.card-back{transform:rotateY(180deg)}.cocktail-card:hover .card-face{box-shadow:0 10px 30px #00000059}.card-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.9rem;display:flex}.card-title{align-items:center;gap:.65rem;min-width:0;margin:0;font-size:1.3rem;line-height:1.2;display:flex}.color-dot{border-radius:50%;flex:none;width:11px;height:11px;box-shadow:0 0 10px}.match-score{color:var(--accent);background:#38bdf826;border-radius:999px;flex:none;padding:.25rem .65rem;font-size:.78rem;font-weight:600}.card-desc{color:var(--text-muted);flex-grow:1;margin:0 0 1.25rem;font-size:.93rem;line-height:1.5}.match-reasons{flex-wrap:wrap;align-items:center;gap:.45rem;display:flex}.reason-label{color:#cbd5e1;width:100%;font-size:.75rem;font-weight:600}.tag{color:#bae6fd;background:#38bdf81a;border:1px solid #38bdf84d;border-radius:6px;padding:.3rem .6rem;font-size:.75rem}.tag-type{color:#7dd3fc;text-transform:uppercase;margin-left:.25rem;font-size:.62rem}.flip-hint{color:#7dd3fc;cursor:pointer;text-align:right;background:0 0;border:0;align-self:flex-end;margin-top:1.15rem;padding:0;font-size:.72rem;display:block}.flip-hint:hover{color:#bae6fd;text-decoration:underline}.flip-hint:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.recipe-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.recipe-label{color:#c7d2fe;text-transform:uppercase;letter-spacing:.06em;background:#818cf82e;border-radius:999px;flex:none;padding:.25rem .65rem;font-size:.72rem;font-weight:600}.recipe-scroll{overscroll-behavior:contain;scrollbar-color:#7dd3fc8c #0f172a59;scrollbar-width:thin;flex:auto;min-height:0;padding:.15rem .65rem .25rem .1rem;overflow-y:auto}.recipe-scroll:focus-visible{outline-offset:2px;border-radius:6px;outline:2px solid #38bdf8b3}.recipe-scroll::-webkit-scrollbar{width:7px}.recipe-scroll::-webkit-scrollbar-track{background:#0f172a59;border-radius:999px}.recipe-scroll::-webkit-scrollbar-thumb{background:#7dd3fc80;border-radius:999px}.recipe-list{gap:.45rem;margin:0 0 1rem;padding:0;list-style:none;display:grid}.recipe-list li{color:#e2e8f0;grid-template-columns:minmax(4.5rem,auto) 1fr;gap:.75rem;font-size:.86rem;line-height:1.35;display:grid}.recipe-amount{color:#7dd3fc;font-weight:600}.recipe-method,.recipe-extra{color:var(--text-muted);margin:0 0 .65rem;font-size:.82rem;line-height:1.45}.recipe-method strong,.recipe-extra strong{color:#dbeafe}.empty-state{text-align:center;color:var(--text-muted);font-size:1.05rem}.empty-state p{margin:0 0 .4rem}.search-tip{font-size:.88rem}.site-footer{border-top:1px solid var(--glass-border);color:var(--text-muted);text-align:center;margin-top:3.5rem;padding-top:1.25rem;font-size:.78rem;line-height:1.55}.site-footer p{margin:.2rem 0}.site-footer a{color:#7dd3fc}.site-footer a:hover{color:#bae6fd}@media (width<=680px){.app-container{width:min(100% - 1.25rem,920px);padding:2rem 0}.header{margin-bottom:2rem}.search-panel{grid-template-columns:1fr;padding:1rem}.search-examples{flex-direction:column;align-items:flex-start}.results-status{min-height:3.75rem}.cocktail-card{height:400px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}