@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";html{font-size:19px}:root{--font-primary:"Outfit", sans-serif;--bg-app:#090d16;--bg-gradient:radial-gradient(circle at 50% 0%, #151d30 0%, #090d16 100%);--bg-card:#161e3199;--bg-card-hover:#1e2943cc;--border-color:#ffffff14;--border-focus:#6366f180;--color-text-primary:#f8fafc;--color-text-secondary:#94a3b8;--color-text-muted:#64748b;--accent-primary:#6366f1;--accent-primary-hover:#4f46e5;--accent-success:#10b981;--accent-danger:#ef4444;--accent-warning:#f59e0b;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000004d, 0 4px 6px -2px #0000001a;--shadow-glow:0 0 20px #6366f133;--radius-sm:8px;--radius-md:16px;--radius-lg:24px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-primary);background:var(--bg-gradient);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;min-height:100vh;display:flex;overflow-x:hidden}body:before{content:"";opacity:.12;pointer-events:none;z-index:-1;background-image:url(https://poolbrothers.de/media/logo.png);background-position:50%;background-repeat:no-repeat;background-size:contain;width:80vw;max-width:700px;height:80vh;max-height:700px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#app{flex-direction:column;width:100%;min-height:100vh;display:flex}.container{flex-direction:column;flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1.5rem;display:flex}header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:3rem;padding-bottom:1rem;display:flex}.brand{align-items:center;gap:.75rem;display:flex}.brand-logo{font-size:2rem}.brand-name{letter-spacing:-.025em;background:linear-gradient(135deg,#fff 0%,#a5b4fc 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:700}.btn{font-family:var(--font-primary);border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background-color:var(--accent-primary);color:#fff;box-shadow:var(--shadow-glow)}.btn-primary:hover{background-color:var(--accent-primary-hover);transform:translateY(-1px)}.btn-secondary{color:var(--color-text-primary);border-color:var(--border-color);background-color:#ffffff0d}.btn-secondary:hover{background-color:#ffffff1a;border-color:#fff3}.btn-danger{color:var(--accent-danger);background-color:#ef444426;border-color:#ef44444d}.btn-danger:hover{background-color:#ef444440}.grid{grid-template-columns:repeat(8,1fr);gap:.75rem;margin-top:1rem;display:grid}@media (width<=1200px){.grid{grid-template-columns:repeat(6,1fr)}}@media (width<=900px){.grid{grid-template-columns:repeat(4,1fr)}}@media (width<=600px){.grid{grid-template-columns:repeat(2,1fr)}}.card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-md);text-align:center;cursor:pointer;flex-direction:column;align-items:center;padding:.85rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.card:before{content:"";opacity:0;pointer-events:none;background:linear-gradient(#6366f114 0%,#0000 100%);width:100%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}.card:hover{background:var(--bg-card-hover);border-color:var(--border-focus);box-shadow:var(--shadow-lg), var(--shadow-glow);transform:translateY(-4px)}.card:hover:before{opacity:1}.avatar{background:linear-gradient(135deg, var(--accent-primary) 0%, #818cf8 100%);color:#fff;width:70px;height:70px;box-shadow:var(--shadow-md);border-radius:50%;justify-content:center;align-items:center;margin-bottom:1.25rem;font-size:1.75rem;font-weight:700;display:flex}.card-title{color:var(--color-text-primary);word-break:break-word;text-align:center;width:100%;margin-bottom:.5rem;font-size:.9rem;font-weight:600;line-height:1.2}.card-subtitle{color:var(--color-text-secondary);font-size:.9rem}.balance-tag{color:var(--accent-success);margin-top:.5rem;font-size:1.1rem;font-weight:600}.drink-icon{margin-bottom:1rem;font-size:3.5rem;transition:transform .3s}.card:hover .drink-icon{transform:scale(1.15)rotate(5deg)}.price-badge{color:#34d399;background:#10b98126;border:1px solid #10b9814d;border-radius:50px;margin-top:.75rem;padding:.35rem .85rem;font-size:1.1rem;font-weight:700}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animated{animation:.4s cubic-bezier(.16,1,.3,1) both fadeInUp}.form-group{flex-direction:column;gap:.5rem;width:100%;margin-bottom:1.5rem;display:flex}.form-label{color:var(--color-text-secondary);text-align:left;font-size:.9rem;font-weight:600}.form-input{font-family:var(--font-primary);border:1px solid var(--border-color);color:#fff;border-radius:var(--radius-sm);background:#0f172a99;padding:.75rem 1rem;font-size:1rem;transition:all .2s}.form-input:focus{border-color:var(--accent-primary);outline:none;box-shadow:0 0 0 3px #6366f133}.table-container{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-top:1.5rem;overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%}th{color:var(--color-text-secondary);border-bottom:1px solid var(--border-color);text-transform:uppercase;letter-spacing:.05em;background:#0f172a66;padding:1rem 1.5rem;font-size:.9rem;font-weight:600}td{border-bottom:1px solid var(--border-color);color:var(--color-text-primary);padding:1rem 1.5rem;font-size:.95rem}tr:last-child td{border-bottom:none}tr:hover td{background:#ffffff05}.status-badge{border-radius:4px;padding:.25rem .5rem;font-size:.8rem;font-weight:600}.status-reverted{color:var(--accent-danger);background:#ef444426}.success-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#090d16e6;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s forwards fadeIn;display:flex;position:fixed;top:0;left:0}.success-icon{font-size:6rem;animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards popScale}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popScale{0%{transform:scale(0)}70%{transform:scale(1.15)}to{transform:scale(1)}}.tabs{border-bottom:1px solid var(--border-color);gap:.5rem;margin-bottom:1.5rem;padding-bottom:.5rem;display:flex}.tab{color:var(--color-text-secondary);font-family:var(--font-primary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:.5rem 1rem;font-weight:600;transition:all .2s}.tab:hover{color:#fff;background:#ffffff0d}.tab.active{color:var(--accent-primary);background:#6366f11a}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:900;background:#090d16bf;justify-content:center;align-items:center;width:100%;height:100%;animation:.25s forwards fadeIn;display:flex;position:fixed;top:0;left:0}.modal-content{border:1px solid var(--border-color);border-radius:var(--radius-md);text-align:center;width:calc(100% - 2rem);max-width:420px;box-shadow:var(--shadow-lg), var(--shadow-glow);background:#161e31f2;padding:2.25rem;animation:.3s cubic-bezier(.175,.885,.32,1.1) forwards popScale}.qty-controls{z-index:10;align-items:center;gap:1rem;margin-top:1.25rem;display:flex}.qty-btn{border:1px solid var(--border-color);color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.2rem;font-weight:700;transition:all .2s;display:flex}.qty-btn:hover{background:var(--accent-primary);border-color:var(--accent-primary);transform:scale(1.1)}.qty-btn:active{transform:scale(.95)}.qty-number{color:#fff;min-width:24px;font-size:1.25rem;font-weight:700}.qty-badge{background:var(--accent-primary);color:#fff;width:28px;height:28px;box-shadow:var(--shadow-glow);border-radius:50%;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;animation:.2s cubic-bezier(.175,.885,.32,1.275) forwards popScale;display:flex;position:absolute;top:1rem;right:1rem}.checkout-actions{gap:.75rem;display:flex}.checkout-bar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-focus);border-radius:var(--radius-md);z-index:800;width:calc(100% - 3rem);max-width:650px;box-shadow:0 20px 25px -5px #00000080, var(--shadow-glow);background:#0f172ae6;justify-content:space-between;align-items:center;gap:2rem;padding:1.25rem 2.25rem;animation:.4s cubic-bezier(.16,1,.3,1) both fadeInUp;display:flex;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)}.favorite-btn{cursor:pointer;z-index:10;filter:grayscale()opacity(.25);background:0 0;border:none;font-size:1.2rem;transition:transform .2s,filter .2s;position:absolute;top:1rem;left:1rem}.favorite-btn:hover{filter:grayscale(0%)opacity();transform:scale(1.25)}.favorite-btn.is-favorite{filter:none}.letter-filter-btn:not(:disabled):hover{color:#fff!important;background:#ffffff0d!important}.letter-filter-btn:disabled{opacity:.15!important;cursor:default!important}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=768px){html{font-size:17px}.container{padding:1rem}header{text-align:center;flex-direction:column;align-items:center;gap:1.25rem;margin-bottom:2rem}.tabs{white-space:nowrap;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:.75rem;overflow-x:auto}.tab{flex:none}.alphabet-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:none;width:100%;margin-bottom:.5rem;padding-bottom:.5rem;overflow-x:auto;flex-wrap:nowrap!important}.alphabet-scroll::-webkit-scrollbar{display:none}.checkout-bar{flex-direction:column;align-items:stretch;gap:1rem;width:calc(100% - 2rem);padding:1.25rem 1.5rem;bottom:1rem}.checkout-actions{gap:.5rem;width:100%;display:flex}.checkout-bar .btn{flex:1;padding:.65rem 1rem;font-size:.9rem}}@media (width<=480px){html{font-size:15px}.checkout-actions{flex-direction:column;gap:.5rem}.grid{gap:.5rem;grid-template-columns:repeat(2,1fr)!important}.card{padding:.65rem}.avatar{width:55px;height:55px;margin-bottom:.85rem;font-size:1.4rem}}.card-warning-red{background:#ef44441f!important;border-color:#ef444459!important;box-shadow:0 0 15px #ef444426!important}.card-warning-red:hover{background:#ef44442e!important;border-color:#ef444480!important;box-shadow:0 0 20px #ef444440!important}
