body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}a{color:inherit;text-decoration:none}button{font-family:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#f3f4f6}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#8b5cf6,#ec4899);border-radius:5px;border:2px solid #F3F4F6}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#7c3aed,#db2777)}[data-theme=dark] ::-webkit-scrollbar-track{background:#1a1a1a}[data-theme=dark] ::-webkit-scrollbar-thumb{border:2px solid #1A1A1A}::selection{background:#8b5cf64d;color:inherit}::-moz-selection{background:#8b5cf64d;color:inherit}:focus-visible{outline:3px solid #8B5CF6;outline-offset:2px}img{opacity:1}:root{--font-display: "Space Grotesk", sans-serif;--font-body: "Inter", sans-serif;--purple: #8B5CF6;--pink: #EC4899;--orange: #F97316;--cyan: #06B6D4;--green: #10B981;--yellow: #FBBF24;--red: #EF4444;--gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #F97316 100%);--gradient-purple: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);--gradient-pink: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);--gradient-orange: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);--gradient-cyan: linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%);--gradient-card: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(139,92,246,.03) 100%);--background: #FAFAFA;--background-alt: #F3F4F6;--surface: #FFFFFF;--surface-hover: #F9FAFB;--text: #111827;--text-secondary: #4B5563;--text-muted: #9CA3AF;--text-inverse: #FFFFFF;--border: #E5E7EB;--border-light: #F3F4F6;--radius: 16px;--radius-sm: 10px;--radius-lg: 24px;--radius-xl: 32px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow: 0 8px 30px rgba(0, 0, 0, .08);--shadow-lg: 0 20px 50px rgba(0, 0, 0, .12);--shadow-purple: 0 10px 40px rgba(139, 92, 246, .25);--shadow-pink: 0 10px 40px rgba(236, 72, 153, .25);--shadow-orange: 0 10px 40px rgba(249, 115, 22, .25);--header-bg: rgba(255, 255, 255, .8);--header-border: rgba(0, 0, 0, .05)}[data-theme=dark]{--background: #0F0F0F;--background-alt: #1A1A1A;--surface: #1F1F1F;--surface-hover: #2A2A2A;--text: #F9FAFB;--text-secondary: #D1D5DB;--text-muted: #6B7280;--border: #2D2D2D;--border-light: #252525;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow: 0 8px 30px rgba(0, 0, 0, .4);--shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);--shadow-purple: 0 10px 40px rgba(139, 92, 246, .35);--shadow-pink: 0 10px 40px rgba(236, 72, 153, .35);--gradient-card: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(139,92,246,.05) 100%);--header-bg: rgba(15, 15, 15, .85);--header-border: rgba(255, 255, 255, .05)}*{margin:0;padding:0;box-sizing:border-box}html{overscroll-behavior:none}body{font-family:var(--font-body);background:var(--background);color:var(--text);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overscroll-behavior:none}.app{min-height:100vh;display:flex;flex-direction:column}.app main{flex:1;padding-top:73px;position:relative;z-index:1;isolation:isolate}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:-.02em}.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.loading-screen,.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1.5rem}.loading-screen h2{font-family:var(--font-display);font-size:1.5rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.spinner{animation:spin 1s linear infinite;color:var(--purple)}@keyframes spin{to{transform:rotate(360deg)}}.error-screen button{padding:1rem 2rem;background:var(--gradient-primary);border:none;border-radius:var(--radius-full);color:#fff;font-family:var(--font-display);font-weight:600;cursor:pointer;transition:box-shadow .2s ease}.error-screen button:hover{box-shadow:var(--shadow-purple)}.header{position:fixed;top:0;left:0;right:0;height:73px;z-index:9999;padding:1rem 2rem;background:var(--surface);border-bottom:1px solid var(--header-border);transform:translateZ(0);will-change:transform;backface-visibility:hidden}.header-container{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem}.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}.logo:hover{opacity:.8}.logo-icon{width:36px;height:36px}.logo-text{font-family:"Inter",var(--font-body);font-size:1.35rem;color:var(--text-primary)}.logo-main{font-weight:600}.logo-tld{font-weight:300;opacity:.7}.header-actions{display:flex;align-items:center;gap:1rem}.theme-toggle{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);font-weight:500;transition:border-color .2s ease,color .2s ease}.theme-toggle:hover{border-color:var(--purple);color:var(--purple)}.theme-label{display:none}@media (min-width: 768px){.theme-label{display:inline}}.language-switcher{position:relative}.language-btn{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:.875rem;transition:border-color .2s ease,color .2s ease}.language-btn:hover{border-color:var(--purple);color:var(--purple)}.language-btn .lang-code{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.language-btn .rotate{transform:rotate(180deg)}.language-btn svg{flex-shrink:0;transition:transform .2s ease}.language-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:200;min-width:220px;max-height:400px;overflow:hidden}.language-list{max-height:380px;overflow-y:auto;padding:.5rem}.language-option{display:flex;flex-direction:row;align-items:center;gap:.75rem;width:100%;padding:.625rem .875rem;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;color:var(--text-primary);transition:background .2s ease}.language-option:hover{background:var(--background-alt)}.language-option.active{background:var(--gradient-purple);color:#fff}.language-option .lang-flag{font-size:1.25rem;line-height:1;flex-shrink:0}.language-option .lang-text{display:flex;flex-direction:column;gap:.125rem;min-width:0}.language-option .lang-native{font-weight:600;font-size:.875rem;color:var(--text-primary)}.language-option.active .lang-native{color:#fff}.language-option .lang-english{font-size:.7rem;color:var(--text-secondary)}.language-option.active .lang-english{color:#ffffffd9}.language-btn .lang-flag{font-size:1.125rem;line-height:1}[dir=rtl] .header-container,[dir=rtl] .nav,[dir=rtl] .header-actions,[dir=rtl] .logo{flex-direction:row-reverse}[dir=rtl] .language-dropdown{right:auto;left:0}@media (max-width: 768px){.language-btn .lang-code{display:none}.language-dropdown{position:fixed;top:70px;right:1rem;left:1rem;min-width:auto}}.search-bar{flex:1;max-width:400px;display:flex;align-items:center;gap:.75rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);padding:.75rem 1.25rem;transition:border-color .2s ease,box-shadow .2s ease}.search-bar:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px #8b5cf61a}.search-bar input{flex:1;background:transparent;border:none;color:var(--text);font-size:.9375rem;outline:none}.search-bar input::placeholder{color:var(--text-muted)}.search-bar svg{color:var(--text-muted)}.nav{display:flex;gap:.5rem}.nav a{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;color:var(--text-secondary);text-decoration:none;font-weight:600;border-radius:var(--radius-full);transition:color .2s ease,background-color .2s ease}.nav a:hover{color:var(--text);background:var(--surface-hover)}.nav a.active{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-purple)}.nav a svg{width:18px;height:18px}.mobile-menu-btn{display:none;background:transparent;border:none;color:var(--text);cursor:pointer;padding:.5rem}.desktop-actions{display:flex;align-items:center;gap:1rem}.mobile-menu-extras{display:none}.hero-section{max-width:1280px;margin:0 auto;padding:5rem 2rem 4rem;display:grid;grid-template-columns:1fr 450px;gap:4rem;align-items:center}.hero-content h1{font-size:4.5rem;font-weight:700;line-height:1.05;margin-bottom:1.5rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-content p{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2.5rem;line-height:1.7;max-width:500px}.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}.btn-primary,.btn-secondary{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2rem;border-radius:var(--radius-full);font-family:var(--font-display);font-weight:600;font-size:1rem;cursor:pointer;transition:box-shadow .2s ease,border-color .2s ease,color .2s ease;text-decoration:none}.btn-primary{background:var(--gradient-primary);color:#fff;border:none;box-shadow:var(--shadow-purple)}.btn-primary:hover{box-shadow:0 20px 50px #8b5cf666}.btn-secondary{background:var(--surface);color:var(--text);border:2px solid var(--border)}.btn-secondary:hover{border-color:var(--purple);color:var(--purple)}.featured-cocktail{position:relative;border-radius:var(--radius-xl);overflow:hidden;cursor:pointer;transition:box-shadow .2s ease;text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow-lg)}.featured-cocktail:hover{box-shadow:var(--shadow-purple)}.featured-cocktail .image-container{width:100%;height:500px}.featured-cocktail .image-container img{width:100%;height:100%;object-fit:cover}.featured-badge{position:absolute;top:1.5rem;left:1.5rem;display:flex;align-items:center;gap:.5rem;background:var(--gradient-orange);color:#fff;padding:.625rem 1.25rem;border-radius:var(--radius-full);font-family:var(--font-display);font-size:.875rem;font-weight:600;box-shadow:var(--shadow-orange)}.featured-info{position:absolute;bottom:0;left:0;right:0;padding:3rem 2rem 2rem;background:linear-gradient(transparent,#000000e6)}.featured-info h3{font-size:1.75rem;color:#fff;margin-bottom:.5rem}.featured-info p{color:#fffc}.featured-skeleton{pointer-events:none;height:500px;background:var(--background-alt)}.featured-skeleton .featured-info{background:linear-gradient(transparent,#00000080)}.featured-image-skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--background-alt) 0%,var(--surface) 100%);animation:skeleton-shimmer 1.5s ease-in-out infinite;background-size:200% 100%}.featured-skeleton .skeleton-text{height:24px;width:70%;background:#ffffff26;border-radius:8px;margin-bottom:.5rem}.featured-skeleton .skeleton-text.short{height:16px;width:40%;margin-bottom:0}.stats-bar{display:flex;justify-content:center;gap:5rem;padding:3rem 2rem;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.stat{text-align:center}.stat-number{display:block;font-family:var(--font-display);font-size:3.5rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.stat-label{color:var(--text-muted);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.category-widgets{padding:5rem 2rem;background:var(--background)}.category-widgets h2,.category-widgets .widgets-grid{max-width:1280px;margin-left:auto;margin-right:auto}.category-widgets h2{font-size:2.5rem;text-align:center;margin-bottom:3rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.widgets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}.category-widget{position:relative;min-height:220px;border-radius:var(--radius-lg);cursor:pointer;transition:box-shadow .2s ease;overflow:hidden}.category-widget:hover{box-shadow:var(--shadow-lg)}.widget-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000c,#0003);display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.5rem;color:#fff}.category-widget h3{font-size:1.125rem;font-weight:600;text-align:center}.ingredient-selector{max-width:1280px;margin:0 auto;padding:5rem 2rem;background:var(--background-alt);border-radius:var(--radius-xl);margin-left:2rem;margin-right:2rem}.selector-header{text-align:center;margin-bottom:2.5rem}.selector-header h2{display:inline-flex;align-items:center;gap:.75rem;font-size:2rem;margin-bottom:.5rem}.selector-header h2 svg{color:var(--orange)}.selector-header p{color:var(--text-muted);font-size:1.0625rem}.selector-controls{margin-bottom:2rem}.search-input{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:.875rem 1.25rem;margin-bottom:1rem;transition:border-color .2s ease}.search-input:focus-within{border-color:var(--purple)}.search-input input{flex:1;background:transparent;border:none;color:var(--text);font-size:1rem;outline:none}.category-tabs{display:flex;flex-wrap:wrap;gap:.5rem}.category-tab{padding:.625rem 1.25rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);color:var(--text-muted);font-weight:600;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.category-tab:hover{border-color:var(--purple);color:var(--purple)}.category-tab.active{background:var(--gradient-purple);border-color:transparent;color:#fff}.selected-ingredients{background:var(--surface);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.5rem}.selected-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.selected-header h4{font-family:var(--font-display);font-weight:600}.selected-header button{display:flex;align-items:center;gap:.25rem;background:transparent;border:none;color:var(--red);cursor:pointer;font-weight:600;font-size:.875rem}.selected-tags{display:flex;flex-wrap:wrap;gap:.5rem}.selected-tag{display:flex;align-items:center;gap:.375rem;background:var(--gradient-purple);color:#fff;padding:.375rem .875rem;border-radius:var(--radius-full);font-size:.875rem;font-weight:500;cursor:pointer;transition:opacity .2s ease}.selected-tag:hover{opacity:.85}.ingredients-grid{display:flex;flex-wrap:wrap;gap:.5rem;max-height:300px;overflow-y:auto;padding:.5rem}.ingredient-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);color:var(--text-secondary);font-weight:500;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.ingredient-btn:hover{border-color:var(--cyan);color:var(--cyan)}.ingredient-btn.selected{background:var(--gradient-cyan);border-color:transparent;color:#fff}.results-section{margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}.possible-cocktails,.almost-possible{background:var(--surface);border-radius:var(--radius);padding:1.5rem}.possible-cocktails h3,.almost-possible h3{font-family:var(--font-display);margin-bottom:1rem;font-size:1.125rem}.cocktail-chips{display:flex;flex-wrap:wrap;gap:.5rem}.cocktail-chip{padding:.5rem 1rem;background:var(--gradient-green);color:#fff;border-radius:var(--radius-full);font-weight:500}.no-results{color:var(--text-muted)}.almost-list{display:flex;flex-direction:column;gap:.75rem}.almost-item{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.75rem;background:var(--background-alt);border-radius:var(--radius-sm)}.cocktail-name{font-weight:600}.missing-label{color:var(--orange);font-size:.75rem;font-weight:600}.missing-ingredients{color:var(--text-muted);font-size:.875rem}.origin-map{max-width:1280px;margin:0 auto;padding:5rem 2rem}.origin-map h2{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:2rem;margin-bottom:2.5rem}.origin-map h2 svg{color:var(--cyan)}.origins-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.origin-card{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.origin-card:hover{border-color:var(--purple);box-shadow:var(--shadow)}.origin-flag{font-size:1.5rem}.origin-name{font-weight:600;color:var(--text)}.origin-count{background:var(--gradient-primary);color:#fff;padding:.25rem .625rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:700}.search-filter-bar{display:flex;gap:1rem;margin-bottom:1rem;align-items:stretch}.search-wrapper{flex:1;display:flex;align-items:center;gap:.75rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);padding:.875rem 1.5rem;transition:border-color .2s ease,box-shadow .2s ease}.search-wrapper:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px #8b5cf61a}.search-wrapper svg{color:var(--text-muted);flex-shrink:0}.search-wrapper input{flex:1;background:transparent;border:none;color:var(--text);font-size:1rem;outline:none;min-width:0}.search-wrapper input::placeholder{color:var(--text-muted)}.clear-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;display:flex;transition:color .2s ease}.clear-btn:hover{color:var(--red)}.filter-toggle{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.5rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);color:var(--text-secondary);font-weight:600;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease;white-space:nowrap}.filter-toggle:hover{border-color:var(--purple);color:var(--purple)}.filter-toggle.active{background:var(--purple);border-color:var(--purple);color:#fff}.filter-toggle.has-filters:not(.active){border-color:var(--purple);color:var(--purple)}.filter-badge{background:var(--gradient-primary);color:#fff;padding:.125rem .5rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;min-width:1.25rem;text-align:center}.filter-toggle.active .filter-badge{background:#fff;color:var(--purple)}.active-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;align-items:center}.active-filter-tag{display:flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:var(--purple);color:#fff;border:none;border-radius:var(--radius-full);font-size:.875rem;font-weight:500;cursor:pointer;transition:opacity .2s ease}.active-filter-tag:hover{opacity:.85}.clear-all-btn{background:transparent;border:none;color:var(--red);font-weight:600;cursor:pointer;padding:.5rem .75rem;font-size:.875rem}.clear-all-btn:hover{text-decoration:underline}.filter-panel{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:1.25rem}.filter-panel-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--border)}.filter-panel-header h3{font-size:1.125rem;font-weight:700}.clear-temp-btn{background:transparent;border:none;color:var(--red);font-weight:600;cursor:pointer;font-size:.875rem}.clear-temp-btn:hover{text-decoration:underline}.filter-panel .filter-group{display:flex;flex-direction:column;gap:.75rem}.filter-panel .filter-group label{font-size:.8125rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.filter-panel-actions{display:flex;gap:1rem;padding-top:1rem;border-top:1px solid var(--border)}.filter-close-btn{flex:1;padding:.875rem 1.5rem;background:var(--background-alt);border:2px solid var(--border);border-radius:var(--radius-full);color:var(--text-secondary);font-weight:600;cursor:pointer;transition:border-color .2s ease,color .2s ease}.filter-close-btn:hover{border-color:var(--text-secondary);color:var(--text)}.filter-apply-btn{flex:2;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;background:var(--gradient-primary);border:none;border-radius:var(--radius-full);color:#fff;font-weight:600;cursor:pointer;transition:opacity .2s ease}.filter-apply-btn:hover,.filter-apply-btn span{opacity:.9}.filter-options{display:flex;flex-wrap:wrap;gap:.5rem}.filter-options.scrollable{max-height:120px;overflow-y:auto;padding:.25rem}.filter-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:var(--background-alt);border:2px solid transparent;border-radius:var(--radius-full);color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}.filter-chip:hover{border-color:var(--purple);color:var(--purple)}.filter-chip.active{background:var(--purple);border-color:var(--purple);color:#fff}.chip-count{font-size:.75rem;opacity:.7}.filter-chip.active .chip-count{opacity:.9}.results-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:.75rem 0;border-bottom:1px solid var(--border)}.results-count{font-weight:600;color:var(--text-secondary)}.cocktails-section{max-width:1280px;margin:0 auto;padding:4rem 2rem}.section-header{margin-bottom:2.5rem;text-align:center}.section-header h2{font-size:2.5rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.cocktails-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;contain:paint}.cocktail-card{display:block;text-decoration:none;color:inherit;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:box-shadow .2s ease,border-color .2s ease;border:2px solid var(--border);contain:paint}.cocktail-card:hover{box-shadow:var(--shadow-purple);border-color:var(--purple)}.cocktail-card:nth-child(3n+2):hover{box-shadow:var(--shadow-pink);border-color:var(--pink)}.cocktail-card:nth-child(3n):hover{box-shadow:var(--shadow-orange);border-color:var(--orange)}.cocktail-image{position:relative;height:240px;overflow:hidden;border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;contain:strict}.cocktail-image img{width:100%;height:100%;object-fit:cover}.cocktail-badges{position:absolute;top:1rem;left:1rem;display:flex;gap:.5rem;z-index:2}.badge{padding:.375rem .875rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;color:#fff}.badge.non-alcoholic{background:var(--gradient-green)}.badge.difficulty{background:#0009}.cocktail-time-badge{position:absolute;bottom:1rem;left:1rem;display:flex;align-items:center;gap:.25rem;padding:.25rem .625rem;background:#000000d9;border-radius:var(--radius-full);font-size:.7rem;font-weight:600;color:#fff;z-index:2}.cocktail-time-badge svg{opacity:.8}.cocktail-info{padding:1.5rem}.cocktail-info h3{font-size:1.375rem;margin-bottom:.5rem}.cocktail-description{color:var(--text-muted);font-size:.9375rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:1.25rem}.cocktail-meta{display:flex;flex-wrap:wrap;gap:1rem;padding-top:1rem;border-top:2px dashed var(--border)}.cocktail-meta span{display:flex;align-items:center;gap:.25rem;font-size:.8125rem;color:var(--text-muted);font-weight:500}.cocktail-meta svg{color:var(--purple)}.cocktails-grid .no-results{grid-column:1 / -1;text-align:center;padding:4rem 2rem}.cocktails-grid .no-results svg{color:var(--purple)}.cocktails-grid .no-results h3{margin:1rem 0 .5rem;font-size:1.5rem}.cocktails-grid .no-results p{color:var(--text-muted)}.cocktails-grid .no-results button{margin-top:1.5rem;padding:.875rem 1.75rem;background:var(--gradient-primary);border:none;border-radius:var(--radius-full);color:#fff;font-family:var(--font-display);font-weight:600;cursor:pointer}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem;overflow-y:auto}.modal-content{background:var(--surface);border-radius:var(--radius-xl);max-width:900px;width:100%;max-height:90vh;overflow-y:auto;position:relative;border:2px solid var(--border)}.modal-close{position:absolute;top:1rem;right:1rem;background:var(--gradient-primary);border:none;color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:opacity .2s ease}.modal-close:hover{opacity:.85}.modal-header{display:grid;grid-template-columns:320px 1fr}.modal-header img{width:100%;height:320px;object-fit:cover}.modal-header-info{padding:2rem}.modal-header-info h2{font-size:2rem;margin-bottom:.75rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.modal-header-info>p{color:var(--text-muted);margin-bottom:1.25rem;line-height:1.7}.modal-meta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.modal-meta span{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;color:var(--text-secondary);font-weight:500}.modal-meta svg{color:var(--purple)}.modal-tags{display:flex;flex-wrap:wrap;gap:.5rem}.tag{padding:.375rem .875rem;background:var(--background-alt);border-radius:var(--radius-full);font-size:.75rem;color:var(--text-muted);font-weight:600}.modal-body{padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;border-top:2px dashed var(--border)}.ingredients-section h3,.steps-section h3{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1.25rem}.ingredients-section h3 svg{color:var(--pink)}.steps-section h3 svg{color:var(--orange)}.ingredients-list{list-style:none}.ingredients-list li{display:flex;align-items:center;gap:.75rem;padding:.875rem;background:var(--background-alt);border-radius:var(--radius-sm);margin-bottom:.5rem}.ingredients-list li.optional{opacity:.7}.ingredients-list .amount{font-weight:700;min-width:70px;color:var(--pink)}.ingredients-list .name{flex:1}.optional-badge{font-size:.625rem;font-weight:700;background:var(--gradient-orange);color:#fff;padding:.25rem .5rem;border-radius:var(--radius-sm);text-transform:uppercase}.steps-list{list-style:none}.steps-list li{display:flex;gap:1rem;padding:.875rem 0;border-bottom:1px solid var(--border)}.steps-list li:last-child{border-bottom:none}.step-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--gradient-orange);color:#fff;border-radius:50%;font-size:.875rem;font-weight:700;flex-shrink:0}.step-instruction{color:var(--text-secondary);font-size:.9375rem;line-height:1.6}.garnish-section{grid-column:1 / -1;padding-top:1.5rem;border-top:2px dashed var(--border)}.garnish-section h4{font-size:1.125rem;margin-bottom:.5rem}.garnish-section p{color:var(--text-muted)}.story-section{grid-column:1 / -1;padding:2rem;margin-top:1rem;background:var(--gradient-purple);border-radius:var(--radius-lg);position:relative;overflow:hidden}.story-section:before{content:"";position:absolute;top:-50%;right:-20%;width:300px;height:300px;background:#ffffff1a;border-radius:50%}.story-section:after{content:"";position:absolute;bottom:-30%;left:-10%;width:200px;height:200px;background:#ffffff0d;border-radius:50%}.story-section h3{display:flex;align-items:center;gap:.5rem;font-size:1.375rem;margin-bottom:1rem;color:#fff;position:relative;z-index:1}.story-section h3 svg{color:#ffffffe6}.story-section p{color:#ffffffe6;font-size:1rem;line-height:1.8;white-space:pre-line;position:relative;z-index:1}.footer{text-align:center;padding:4rem 2rem;background:var(--surface);border-top:2px solid var(--border)}.footer p:first-child{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-bottom:.5rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.footer p:last-child{color:var(--text-muted)}.quick-actions{padding:5rem 2rem;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.quick-actions h2,.quick-actions .actions-grid{max-width:1280px;margin-left:auto;margin-right:auto}.quick-actions h2{font-size:2.5rem;margin-bottom:3rem;text-align:center;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.action-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.5rem 2rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease;text-decoration:none;color:var(--text)}.action-card:hover{border-color:var(--purple);box-shadow:var(--shadow-purple)}.action-card:nth-child(2):hover{border-color:var(--pink);box-shadow:var(--shadow-pink)}.action-card:nth-child(3):hover{border-color:var(--orange);box-shadow:var(--shadow-orange)}.action-card svg{margin-bottom:1.25rem;width:48px;height:48px}.action-card:nth-child(1) svg{color:var(--purple)}.action-card:nth-child(2) svg{color:var(--pink)}.action-card:nth-child(3) svg{color:var(--orange)}.action-card h3{font-size:1.25rem;margin-bottom:.5rem}.action-card p{color:var(--text-muted);font-size:.9375rem}.page-header{max-width:1280px;margin:0 auto;padding:3rem 2rem 1rem;text-align:center}.page-header h1{font-size:3rem;margin-bottom:.5rem;display:inline-flex;align-items:center;gap:.75rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.page-header h1 svg{-webkit-text-fill-color:initial;color:var(--purple)}.page-header p{color:var(--text-muted);font-size:1.125rem}.cocktails-page,.ingredients-page{max-width:1280px;margin:0 auto;padding:0 2rem 4rem}.ingredients-layout{display:grid;grid-template-columns:1fr 380px;gap:2rem;margin-top:2rem}.ingredients-selector{background:var(--surface);border-radius:var(--radius-lg);padding:1.5rem;border:2px solid var(--border)}.selector-controls{margin-bottom:1.5rem}.search-box{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);padding:.875rem 1.25rem;transition:border-color .2s ease,box-shadow .2s ease}.search-box:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px #8b5cf61a}.search-box svg{color:var(--text-muted);flex-shrink:0}.search-box input{flex:1;background:transparent;border:none;color:var(--text);font-size:1rem;outline:none;min-width:0}.search-box input::placeholder{color:var(--text-muted)}.search-box .clear-search{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;display:flex;transition:color .2s ease}.search-box .clear-search:hover{color:var(--red)}.selector-controls .search-box{margin-bottom:1rem;max-width:none}.results-panel{background:var(--surface);border-radius:var(--radius-lg);padding:1.5rem;height:fit-content;position:sticky;top:100px;border:2px solid var(--border)}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.empty-state svg{color:var(--purple);margin-bottom:1rem}.empty-state h3{color:var(--text);margin-bottom:.5rem}.can-make,.almost-make{margin-bottom:2rem}.can-make h3,.almost-make h3{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1rem}.can-make h3 svg{color:var(--green)}.almost-make h3 svg{color:var(--orange)}.hint{color:var(--text-muted);font-size:.8125rem;margin-bottom:.75rem}.cocktail-list{display:flex;flex-direction:column;gap:.75rem}.cocktail-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:var(--background-alt);border-radius:var(--radius-sm);cursor:pointer;transition:background-color .2s ease;text-decoration:none;color:inherit}.cocktail-item:hover{background:var(--surface-hover)}.cocktail-item .image-container,.cocktail-item img{width:44px;height:44px;min-width:44px;border-radius:var(--radius-sm);object-fit:cover}.cocktail-item-info h4{font-size:.9375rem;margin-bottom:.125rem}.cocktail-item-info p{font-size:.75rem;color:var(--text-muted)}.cocktail-item-info .missing{color:var(--text-muted);font-size:.8rem}.cocktail-item-info .missing-count{color:var(--orange);font-weight:600}.cocktail-item.almost{opacity:.9}.no-results-text{color:var(--text-muted);font-size:.9375rem;text-align:center;padding:1rem}.cocktail-detail{max-width:1280px;margin:0 auto;padding:2rem}.back-button{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:2px solid var(--border);color:var(--text);padding:.75rem 1.25rem;border-radius:var(--radius-full);cursor:pointer;margin-bottom:2rem;font-weight:600;transition:border-color .2s ease,color .2s ease}.back-button:hover{border-color:var(--purple);color:var(--purple)}.detail-header{display:grid;grid-template-columns:400px 1fr;gap:2.5rem;margin-bottom:3rem}.detail-header img{width:100%;height:450px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.detail-header-info h1{font-size:2.75rem;margin-bottom:1rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.detail-header-info .description{color:var(--text-secondary);font-size:1.125rem;line-height:1.7;margin-bottom:1.5rem}.detail-meta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}.detail-meta span{display:flex;align-items:center;gap:.5rem;background:var(--background-alt);padding:.625rem 1rem;border-radius:var(--radius-full);font-size:.9375rem;font-weight:500}.detail-meta svg{color:var(--purple)}.detail-tags{display:flex;flex-wrap:wrap;gap:.5rem}.detail-body{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.cocktail-not-found{text-align:center;padding:5rem 2rem}.cocktail-not-found h2{font-size:2rem;margin-bottom:1rem}.cocktail-not-found p{color:var(--text-muted);margin-bottom:2rem}.cocktail-not-found a{color:var(--purple);text-decoration:underline}@media (max-width: 1024px){.hero-section{grid-template-columns:1fr;padding:3rem 2rem}.hero-content h1{font-size:3rem}.featured-cocktail{display:none}.modal-header{grid-template-columns:1fr}.modal-header img{height:220px}.modal-body,.results-section,.detail-header{grid-template-columns:1fr}.detail-header img{height:300px}.detail-header-info h1{font-size:2rem}}@media (max-width: 1024px){.header{padding:1rem}.header-container{flex-wrap:wrap}.nav{display:none}.nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--surface);padding:1rem;border-bottom:2px solid var(--border);z-index:100}.mobile-menu-btn{display:block}.desktop-actions{display:none}.mobile-menu-extras{display:flex;align-items:center;justify-content:center;gap:1rem;padding-top:1rem;margin-top:.5rem;border-top:1px solid var(--border)}}@media (max-width: 768px){.hero-content h1{font-size:2.25rem}.stats-bar{gap:2rem;flex-wrap:wrap}.stat-number{font-size:2.5rem}.search-filter-bar{flex-direction:column}.filter-toggle{justify-content:center}.filter-toggle span{display:inline}.filter-panel{padding:1rem}.filter-chip{padding:.375rem .75rem;font-size:.8125rem}.cocktails-grid,.ingredients-layout,.actions-grid,.detail-body{grid-template-columns:1fr}.page-header h1{font-size:2rem}}.image-container{position:relative;width:100%;height:100%;overflow:hidden;background:var(--background-alt);border-radius:inherit}.image-container img{width:100%;height:100%;object-fit:cover}.image-placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--background-alt) 0%,var(--surface) 100%);border-radius:inherit}.image-placeholder.error{background:linear-gradient(135deg,var(--background-alt) 0%,rgba(239,68,68,.1) 100%)}.image-placeholder.error .placeholder-icon{animation:none;opacity:.3}.placeholder-icon{display:flex;align-items:center;justify-content:center;color:var(--purple);animation:pulse-fade 1.5s ease-in-out infinite;width:25%;max-width:64px;min-width:32px}.placeholder-icon img,.placeholder-icon svg{width:100%;height:auto;filter:drop-shadow(0 4px 12px rgba(139,92,246,.3));opacity:.6}@keyframes pulse-fade{0%,to{opacity:.4}50%{opacity:1}}.image-placeholder:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);animation:shimmer 2s ease-in-out infinite;border-radius:inherit}[data-theme=dark] .image-placeholder:after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 50%,transparent 100%)}@keyframes shimmer{0%{left:-100%}to{left:100%}}.skeleton{background:linear-gradient(90deg,var(--background-alt) 0%,var(--surface) 50%,var(--background-alt) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-card{pointer-events:none}.skeleton-card .skeleton-image{width:100%;height:100%;border-radius:0}.skeleton-card .cocktail-info{display:flex;flex-direction:column;gap:.75rem}.skeleton-featured{min-height:500px}.skeleton-featured .skeleton-image{width:100%;height:100%;border-radius:var(--radius-xl)}.hero-section.skeleton-hero .hero-content{display:flex;flex-direction:column;gap:1rem}.cocktail-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:1rem;color:var(--text-muted)}.cocktail-loading .spinner{animation:spin 1s linear infinite;color:var(--purple)}.page-loading{display:flex;flex-direction:column;gap:2rem;padding:2rem;max-width:1280px;margin:0 auto}.load-more-trigger{padding:2rem;min-height:100px}.loading-more{display:flex;align-items:center;justify-content:center;gap:.75rem;color:var(--text-muted);font-weight:500}.loading-more .spinner{animation:spin 1s linear infinite;color:var(--purple)}.ingredients-page-v2{max-width:1280px;margin:0 auto;padding:0 2rem 4rem}.ing-stats-bar{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1.25rem 2rem;background:var(--surface);border-radius:var(--radius-lg);border:2px solid var(--border);margin-bottom:1.5rem;flex-wrap:wrap}.ing-stat{display:flex;align-items:center;gap:.5rem}.ing-stat-value{font-family:var(--font-display);font-size:1.75rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}.ing-stat-label{font-size:.875rem;color:var(--text-muted);font-weight:500}.ing-stat-divider{width:1px;height:32px;background:var(--border)}.ing-clear-btn{display:flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:transparent;border:2px solid var(--red);border-radius:var(--radius-full);color:var(--red);font-weight:600;font-size:.875rem;cursor:pointer;transition:background .2s ease,color .2s ease;margin-left:auto}.ing-clear-btn:hover{background:var(--red);color:#fff}.ing-search-wrapper{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);padding:.875rem 1.5rem;margin-bottom:1rem;transition:border-color .2s ease,box-shadow .2s ease}.ing-search-wrapper:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px #8b5cf61a}.ing-search-wrapper svg{color:var(--text-muted);flex-shrink:0}.ing-search-wrapper input{flex:1;background:transparent;border:none;color:var(--text);font-size:1rem;outline:none}.ing-search-wrapper input::placeholder{color:var(--text-muted)}.ing-clear-search{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;display:flex;transition:color .2s ease}.ing-clear-search:hover{color:var(--red)}.ing-selected-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.ing-selected-chip{display:flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:var(--gradient-purple);color:#fff;border:none;border-radius:var(--radius-full);font-size:.875rem;font-weight:500;cursor:pointer;transition:opacity .2s ease}.ing-selected-chip:hover{opacity:.85}.ing-main-layout-v2{display:grid;grid-template-columns:1fr 400px;gap:2rem;align-items:start}.ing-selector{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem}.ing-search-box{display:flex;align-items:center;gap:.625rem;background:var(--background-alt);border:2px solid var(--border);border-radius:var(--radius-full);padding:.625rem 1rem;margin-bottom:1rem;transition:border-color .2s ease}.ing-search-box:focus-within{border-color:var(--purple)}.ing-search-box svg{color:var(--text-muted);flex-shrink:0}.ing-search-box input{flex:1;background:transparent;border:none;color:var(--text);font-size:.9375rem;outline:none}.ing-search-box input::placeholder{color:var(--text-muted)}.ing-type-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}.ing-type-tab{display:flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:var(--background-alt);border:2px solid transparent;border-radius:var(--radius-full);color:var(--text-secondary);font-size:.8125rem;font-weight:600;cursor:pointer;transition:all .2s ease}.ing-type-tab:hover{border-color:var(--purple);color:var(--purple)}.ing-type-tab.active{background:var(--gradient-purple);border-color:transparent;color:#fff}.ing-tab-count{font-size:.75rem;opacity:.8}.ing-tab-selected{color:var(--cyan);font-weight:700}.ing-type-tab.active .ing-tab-selected{color:#ffffffe6}.ing-grid{display:flex;flex-wrap:wrap;gap:.5rem;max-height:400px;overflow-y:auto;padding:.25rem}.ing-chip{display:flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:var(--background-alt);border:2px solid transparent;border-radius:var(--radius-full);color:var(--text-secondary);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s ease}.ing-chip:hover{border-color:var(--cyan);color:var(--cyan)}.ing-chip.selected{background:var(--gradient-cyan);border-color:transparent;color:#fff}.ing-chip-check{display:flex;align-items:center;justify-content:center;width:14px;height:14px}.ing-chip-name{white-space:nowrap}.ing-chip-abv{font-size:.6875rem;opacity:.7;padding:.125rem .375rem;background:#0000001a;border-radius:var(--radius-sm)}.ing-chip.selected .ing-chip-abv{background:#fff3}.ing-no-items{width:100%;text-align:center;padding:2rem;color:var(--text-muted)}.ing-results{min-height:400px}.ing-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);min-height:400px}.ing-empty-state svg{color:var(--purple);margin-bottom:1.5rem;opacity:.6}.ing-empty-state h3{font-size:1.375rem;margin-bottom:.5rem;color:var(--text)}.ing-empty-state p{color:var(--text-muted);font-size:.9375rem;max-width:300px}.ing-result-section{margin-bottom:2rem}.ing-result-section h3{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--border)}.ing-result-section.can-make h3{color:var(--green)}.ing-result-section.can-make h3 svg{color:var(--green)}.ing-result-section.almost-make h3{color:var(--orange)}.ing-result-section.almost-make h3 svg{color:var(--orange)}.ing-cocktail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.ing-cocktail-card{display:block;text-decoration:none;color:inherit;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}.ing-cocktail-card:hover{border-color:var(--purple);box-shadow:var(--shadow)}.ing-cocktail-card.complete{border-color:var(--green)}.ing-cocktail-card.complete:hover{box-shadow:0 8px 24px #10b98133}.ing-cocktail-card.almost{opacity:.9}.ing-cocktail-img{position:relative;height:140px;overflow:hidden}.ing-cocktail-img .image-container,.ing-cocktail-img img{width:100%;height:100%;object-fit:cover}.ing-cocktail-badge{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--green);border-radius:50%;color:#fff}.ing-cocktail-percent{position:absolute;bottom:.5rem;right:.5rem;padding:.25rem .5rem;background:#000000bf;border-radius:var(--radius-sm);color:#fff;font-size:.75rem;font-weight:700}.ing-cocktail-info{padding:1rem}.ing-cocktail-info h4{font-size:.9375rem;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ing-cocktail-info p{font-size:.75rem;color:var(--text-muted)}.ing-missing{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}.ing-missing-count{color:var(--orange);font-weight:700;margin-right:.25rem}.ing-skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.ing-type-skeleton{display:flex;flex-direction:column;gap:.5rem}@media (max-width: 1024px){.ing-main-layout-v2{grid-template-columns:1fr}.ing-results{order:-1}.ing-grid{max-height:300px}}@media (max-width: 768px){.ing-stats-bar{gap:1rem;padding:1rem}.ing-stat-value{font-size:1.5rem}.ing-stat-divider{display:none}.ing-clear-btn{margin-left:0;width:100%;justify-content:center;margin-top:.5rem}.ing-type-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.75rem;margin-bottom:.75rem;-webkit-overflow-scrolling:touch}.ing-type-tab{flex-shrink:0;padding:.375rem .625rem;font-size:.75rem}.ing-cocktail-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.ing-cocktail-img{height:120px}}.qtags-cloud{display:flex;flex-wrap:wrap;gap:.5rem;padding:1.5rem 0;margin-top:1rem;border-top:1px solid var(--border-light)}.qtag-item{display:inline-block;padding:.25rem .625rem;font-size:.75rem;color:var(--text-muted);background:var(--background-alt);border-radius:var(--radius-full);text-decoration:none;transition:all .2s ease}.qtag-item:hover{color:var(--purple);background:#8b5cf61a}.qtag-page{max-width:1280px;margin:0 auto;padding:2rem}.qtag-page .back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-secondary);text-decoration:none;font-size:.875rem;margin-bottom:1.5rem;padding:.5rem 0;transition:color .2s;background:none;border:none;cursor:pointer;font-family:inherit}.qtag-page .back-link:hover{color:var(--purple)}.qtag-header{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:2rem}.qtag-header svg{color:var(--purple)}.qtag-header h1{font-size:1.75rem;font-weight:700;color:var(--text);margin:0}.qtag-count{font-size:.875rem;color:var(--text-muted);background:var(--background-alt);padding:.25rem .75rem;border-radius:var(--radius-full)}.qtag-loading,.qtag-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;color:var(--text-muted)}.qtag-loading .spinner{animation:spin 1s linear infinite}.qtag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.qtag-card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);overflow:hidden;text-decoration:none;border:1px solid var(--border-light);transition:all .2s ease}.qtag-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--purple)}.qtag-card-img{width:100%;height:180px;overflow:hidden}.qtag-card-img img{width:100%;height:100%;object-fit:cover}.qtag-card-info{padding:1rem}.qtag-card-info h3{font-size:1rem;font-weight:600;color:var(--text);margin:0 0 .5rem}.qtag-card-info p{font-size:.8125rem;color:var(--text-secondary);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media (max-width: 768px){.qtag-page{padding:1rem}.qtag-header h1{font-size:1.25rem}.qtag-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}.qtag-card-img{height:120px}}.detail-image-skeleton{width:100%;height:450px;border-radius:var(--radius-lg)}.detail-skeleton-section{margin-bottom:2rem}@media (max-width: 900px){.detail-image-skeleton{height:300px}}@media (max-width: 768px){.detail-image-skeleton{height:250px}}.detail-header .image-container{width:100%;height:450px;border-radius:var(--radius-lg)}@media (max-width: 900px){.detail-header .image-container{height:300px}}@media (max-width: 768px){.detail-header .image-container{height:250px}}.age-gate-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem}.age-gate-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;max-width:360px;width:100%;text-align:center;box-shadow:0 25px 50px #0000004d}.age-gate-logo{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.25rem}.age-gate-icon{width:32px;height:32px}.age-gate-brand{font-family:var(--font-display);font-size:1.25rem;color:var(--text)}.brand-main{font-weight:600}.brand-tld{font-weight:300;opacity:.7}.age-gate-header{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem}.age-gate-badge{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:50%;font-family:var(--font-display);font-size:.875rem;font-weight:800;color:#fff;flex-shrink:0}.age-gate-header h1{font-size:1.25rem;color:var(--text);margin:0}.age-gate-description{color:var(--text-secondary);font-size:.875rem;line-height:1.5;margin-bottom:1.25rem}.age-gate-buttons{display:flex;gap:.75rem;margin-bottom:1rem}.age-gate-btn{flex:1;padding:.75rem 1rem;border-radius:var(--radius-full);font-family:var(--font-display);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none}.age-gate-btn-yes{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.age-gate-btn-yes:hover{transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.age-gate-btn-no{background:var(--background-alt);color:var(--text-secondary);border:1px solid var(--border)}.age-gate-btn-no:hover{background:var(--border)}.age-gate-warning{color:var(--text-muted);font-size:.75rem;margin:0}@media (max-width: 400px){.age-gate-modal{padding:1.5rem}.age-gate-buttons{flex-direction:column}}.footer{margin-top:auto;background:var(--surface);border-top:1px solid var(--border);padding:1.5rem 2rem}.footer-container{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}.footer-left{display:flex;align-items:center;gap:1rem}.footer-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}.footer-logo:hover{opacity:.8}.footer-icon{width:24px;height:24px}.footer-brand{font-family:var(--font-display);font-size:1rem;color:var(--text)}.footer-brand .brand-main{font-weight:600}.footer-brand .brand-tld{font-weight:300;opacity:.7}.footer-age{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:50%;font-family:var(--font-display);font-size:.625rem;font-weight:800;color:#fff}.footer-links{display:flex;align-items:center;gap:1.5rem}.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:.8125rem;transition:color .2s}.footer-links a:hover{color:var(--purple)}.footer-copyright{color:var(--text-muted);font-size:.75rem;margin:0}.footer-warning{max-width:1280px;margin:1rem auto 0;padding-top:1rem;border-top:1px solid var(--border);color:var(--text-muted);font-size:.6875rem;text-align:center}@media (max-width: 768px){.footer-container{flex-direction:column;text-align:center;gap:1rem}.footer-links{gap:1rem;flex-wrap:wrap;justify-content:center}}.legal-page{max-width:800px;margin:0 auto;padding:2rem}.legal-page .back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-secondary);text-decoration:none;font-size:.875rem;margin-bottom:2rem;transition:color .2s}.legal-page .back-link:hover{color:var(--purple)}.legal-page h1{font-size:2.5rem;color:var(--text);margin-bottom:.5rem}.legal-updated{color:var(--text-muted);font-size:.875rem;margin-bottom:3rem}.legal-page section{margin-bottom:2.5rem}.legal-page h2{font-size:1.25rem;color:var(--text);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border)}.legal-page h3{font-size:1rem;color:var(--text);margin-top:1.5rem;margin-bottom:.75rem}.legal-page p{color:var(--text-secondary);line-height:1.8;margin-bottom:1rem}.legal-page ul{color:var(--text-secondary);line-height:1.8;margin-bottom:1rem;padding-left:1.5rem}.legal-page li{margin-bottom:.5rem}.legal-page a{color:var(--purple);text-decoration:underline}.legal-page a:hover{color:var(--pink)}.legal-page strong{color:var(--text)}.cookie-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.875rem}.cookie-table th,.cookie-table td{padding:.75rem 1rem;text-align:left;border:1px solid var(--border)}.cookie-table th{background:var(--background-alt);color:var(--text);font-weight:600}.cookie-table td{color:var(--text-secondary)}.disclaimer-warning{display:flex;gap:1rem;background:linear-gradient(135deg,#ef44441a,#dc26260d);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius);padding:1.25rem;margin-bottom:2rem}.disclaimer-warning svg{color:#ef4444;flex-shrink:0;margin-top:.125rem}.disclaimer-warning h3{font-size:1rem;color:#ef4444;margin:0 0 .5rem}.disclaimer-warning p{margin:0;font-size:.875rem}.warning-box,.guidelines-box{background:var(--background-alt);border-radius:var(--radius);padding:1.25rem;margin:1rem 0}.warning-box ul,.guidelines-box ul{margin:0}@media (max-width: 640px){.legal-page{padding:1.5rem}.legal-page h1{font-size:2rem}.cookie-table{font-size:.75rem}.cookie-table th,.cookie-table td{padding:.5rem}.disclaimer-warning{flex-direction:column;gap:.75rem}}.share-buttons{display:flex;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}.share-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem;border:none;border-radius:var(--radius-full);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease}.share-btn-general{background:var(--surface);color:var(--text);border:1px solid var(--border)}.share-btn-general:hover{background:var(--background-alt);border-color:var(--purple);color:var(--purple)}.share-btn-instagram{background:linear-gradient(135deg,#833ab4,#e1306c,#f77737);color:#fff;box-shadow:0 4px 15px #e1306c4d}.share-btn-instagram:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e1306c66}.share-btn-instagram:active{transform:translateY(0)}.story-preview-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000fa;display:flex;align-items:flex-start;justify-content:center;z-index:99999;padding:1rem;animation:fadeIn .2s ease;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.story-preview-modal{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px}.story-preview-layout{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}.story-template-selector{text-align:center}.story-template-selector h3{color:#fff;font-size:.9rem;font-weight:500;margin-bottom:.75rem}.story-template-list{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.story-template-btn{padding:.5rem 1rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-full);color:#ffffffb3;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s}.story-template-btn:hover{background:#ffffff26;color:#fff}.story-template-btn.active{background:var(--gradient-primary);border-color:transparent;color:#fff}.story-preview-actions{display:flex;gap:.75rem}.story-action-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border:none;border-radius:var(--radius-full);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.story-action-btn:disabled{opacity:.5;cursor:not-allowed}.story-action-download{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.story-action-download:hover:not(:disabled){background:#fff3}.story-action-share{background:linear-gradient(135deg,#833ab4,#e1306c,#f77737);color:#fff}.story-action-share:hover:not(:disabled){transform:translateY(-2px)}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.story-link-copied{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#22c55e33;border-radius:var(--radius-full);color:#22c55e;font-size:.8rem;font-weight:500}.story-preview-close{position:fixed;top:1rem;right:1rem;background:#ffffff26;border:none;color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:100000}.story-preview-close:hover{background:#ffffff40}@media (min-width: 640px){.story-preview-close{right:2rem}}.story-preview-container{border-radius:20px;overflow:hidden;box-shadow:0 20px 60px #00000080}.story-fullsize-container{position:fixed;left:-9999px;top:0;width:1080px;height:1920px;pointer-events:none;z-index:-1}.story-fullsize-container .instagram-story-card{width:1080px!important;height:1920px!important;font-size:50px!important}.story-loading-placeholder{width:216px;height:384px;background:linear-gradient(180deg,#1a1a2e,#16213e,#0f0f23);border-radius:20px;display:flex;align-items:center;justify-content:center;color:#ffffff80}@media (min-height: 700px){.story-loading-placeholder{width:243px;height:432px}}@media (min-height: 800px){.story-loading-placeholder{width:270px;height:480px}}@media (min-height: 950px){.story-loading-placeholder{width:304px;height:540px}}.story-preview-info{color:#fff9;font-size:.875rem;text-align:center}.instagram-story-card{position:relative;width:216px;height:384px;background:linear-gradient(180deg,#1a1a2e,#16213e,#0f0f23);overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;flex-shrink:0;font-size:10px}@media (min-height: 700px){.instagram-story-card{width:243px;height:432px;font-size:11.25px}}@media (min-height: 800px){.instagram-story-card{width:270px;height:480px;font-size:12.5px}}@media (min-height: 950px){.instagram-story-card{width:304px;height:540px;font-size:14px}}.story-bg-gradient{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(139,92,246,.3) 0%,rgba(236,72,153,.2) 30%,transparent 60%,rgba(0,0,0,.8) 100%);z-index:1}.story-image-container{position:absolute;top:0;left:0;right:0;bottom:0}.story-cocktail-image{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .3s}.story-image-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 30%,transparent 50%,rgba(0,0,0,.9) 100%)}.story-content{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:1.25em}.story-header{display:flex;justify-content:center}.story-logo{display:flex;align-items:center;gap:.4em;padding:.4em .8em;border-radius:100px}.story-logo-dark{background:#333}.story-logo-dark .story-logo-text,.story-logo-dark .story-logo-main{color:#fff}.story-logo-dark .story-logo-tld{color:#b3b3b3}.story-logo-light{background:#fff;border:1px solid #e0e0e0}.story-logo-light .story-logo-text,.story-logo-light .story-logo-main{color:#1a1a1a}.story-logo-light .story-logo-tld{color:#666}.story-logo-icon{width:2em;min-width:2em;max-width:2em;height:2em;min-height:2em;max-height:2em;flex-shrink:0;background-size:contain;background-position:center;background-repeat:no-repeat}.story-logo-text{font-family:"Inter",var(--font-body);font-size:1em;display:flex;align-items:baseline}.story-logo-main{font-weight:600}.story-logo-tld{font-weight:300}.story-info{display:flex;flex-direction:column;gap:.75em}.story-title{color:#fff;font-size:1.75em;font-weight:800;line-height:1.1;margin:0;text-shadow:0 .2em 1em rgba(0,0,0,.5)}.story-description{color:#ffffffd9;font-size:.8em;line-height:1.4;margin:0;text-shadow:0 .1em .3em rgba(0,0,0,.5)}.story-meta{display:flex;flex-wrap:wrap;gap:.5em}.story-meta-item{display:inline-flex;align-items:center;gap:.35em;background:#ffffff26;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;padding:.35em .6em;border-radius:var(--radius-full);font-size:.7em;font-weight:500}.story-meta-item svg{opacity:.8;width:1.4em;height:1.4em}.story-difficulty[data-difficulty=easy]{background:#22c55e66}.story-difficulty[data-difficulty=medium]{background:#eab30866}.story-difficulty[data-difficulty=hard]{background:#ef444466}.story-ingredients{display:flex;flex-wrap:wrap;gap:.35em}.story-ingredient{background:#ffffff1a;color:#ffffffe6;padding:.3em .6em;border-radius:var(--radius-sm);font-size:.65em;border:1px solid rgba(255,255,255,.15)}.story-ingredient-more{background:var(--gradient-purple);border:none;font-weight:600}.template-minimal{background:#fafafa}.story-minimal-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#fff,#f5f5f5)}.template-minimal .story-content{padding:1.5em}.story-minimal-image{position:relative;width:55%;aspect-ratio:1;margin:1em auto;border-radius:50%;overflow:hidden;box-shadow:0 2em 5em #00000026}.story-image-placeholder-minimal{border-radius:50%;background:#eee}.story-cocktail-image-round{width:100%;height:100%;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .3s}.story-info-minimal{text-align:center;padding:0 1em}.template-minimal .story-title{color:#1a1a1a;font-size:1.5em;margin-bottom:.5em;text-shadow:0 1px 2px rgba(255,255,255,.8)}.template-minimal .story-description{color:#666;font-size:.75em;margin-bottom:1em;text-shadow:0 1px 2px rgba(255,255,255,.8)}.template-minimal .story-meta{justify-content:center}.template-minimal .story-meta-item{background:#f0f0f0;color:#333}.template-vibrant{background:#1a1a2e}.story-vibrant-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb,#f5576c,#ffecd2);opacity:.9}.template-vibrant .story-content{padding:1.25em}.story-logo-vibrant{background:#4a4a6a}.story-vibrant-image{position:relative;width:75%;margin:0 auto;border-radius:2em;overflow:hidden;box-shadow:0 2.5em 5em #0000004d;aspect-ratio:1}.story-image-placeholder-vibrant{border-radius:2em;background:#0003}.story-cocktail-image-framed{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .3s}.story-info-vibrant{text-align:center;padding:0 .5em}.template-vibrant .story-title{font-size:1.5em;text-shadow:0 .2em 2em rgba(0,0,0,.3)}.template-vibrant .story-meta,.story-ingredients-vibrant{justify-content:center}.template-vibrant .story-ingredient{background:#fff3;border-color:#ffffff4d}.template-elegant{background:#0a0a0a}.story-elegant-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,rgba(139,92,246,.1) 0%,transparent 70%)}.story-image-overlay-elegant{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 20%,transparent 40%,rgba(0,0,0,.95) 100%)}.story-header-elegant{display:flex;align-items:center;gap:1em}.story-elegant-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}.story-info-elegant{text-align:center;padding:0 1em}.story-title-elegant{font-size:2em;font-weight:300;letter-spacing:.05em;margin-bottom:.75em;text-shadow:0 .2em 1em rgba(0,0,0,.5)}.story-elegant-divider{display:flex;justify-content:center;color:#fff6;margin-bottom:.75em}.story-elegant-divider svg{width:1.4em;height:1.4em}.story-ingredients-elegant{flex-direction:column;align-items:center;gap:.35em}.story-ingredients-elegant .story-ingredient{background:transparent;border:none;font-size:.7em;color:#ffffffb3;font-style:italic;text-shadow:0 .1em .3em rgba(0,0,0,.5)}.story-meta-elegant{display:flex;justify-content:center;gap:.75em;color:#ffffff80;font-size:.7em;margin-top:.75em;text-shadow:0 .1em .3em rgba(0,0,0,.5)}.template-bold{background:#000}.story-image-overlay-bold{background:linear-gradient(180deg,#0000004d,#00000080)}.story-content-bold{justify-content:space-between}.story-bold-center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 1em}.story-title-bold{font-size:2.25em;font-weight:900;text-transform:uppercase;letter-spacing:.1em;line-height:1;text-shadow:0 .2em 1.5em rgba(0,0,0,.5)}.story-bold-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5em;color:#fffc;font-size:.75em;margin-top:.75em;text-shadow:0 .1em .3em rgba(0,0,0,.5)}.story-bold-dot{width:.3em;height:.3em;background:#ffffff80;border-radius:50%}.story-info-bold{text-align:center}.story-image-placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1a1a2e,#16213e,#0f0f23)}.story-placeholder-icon{width:5em;height:5em;opacity:.3;object-fit:contain;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.05)}}