:root{--bg-color:#0f172a;--surface-color:#1e293b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-color:#10b981;--accent-hover:#059669;--danger:#ef4444;--success:#34d399}*{box-sizing:border-box;margin:0;padding:0}html{background:#0f172a}body{color:var(--text-primary);background:#0f172a;justify-content:center;min-height:100vh;font-family:Montserrat,sans-serif;display:flex}#app{z-index:10;flex-direction:column;gap:3rem;width:100%;max-width:1200px;padding:2rem;display:flex;position:relative}.hero{text-align:center;animation:.8s ease-out fadeIn}.logo{color:#000;letter-spacing:-.05em;justify-content:center;align-items:center;margin-bottom:1rem;font-size:1.5rem;font-weight:800;display:flex}h1{color:#000;letter-spacing:-.02em;margin-bottom:.5rem;font-size:2.5rem;font-weight:800}.hero p{color:var(--text-secondary);margin-bottom:2rem;font-size:1.1rem}.search-box-row{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:linear-gradient(135deg,#1e293bf2,#0f172af2);border:1px solid #10b98166;border-radius:16px;align-items:center;gap:.75rem;width:100%;max-width:780px;margin:0 auto;padding:8px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 15px 35px -5px #10b98140}.search-box-row:focus-within{border-color:#10b981;transform:translateY(-2px);box-shadow:0 0 40px #10b98180}#searchInput{border-radius:12px;outline:none;flex:1;padding:1rem 1.4rem;font-family:inherit;font-size:1.1rem;font-weight:700;transition:all .3s;box-shadow:inset 0 2px 4px #0000001a;color:#000!important;background-color:#fffffff2!important;border:1px solid #fff6!important}#searchInput::placeholder{font-weight:500;color:#64748b!important}#districtFilter{color:#10b981;cursor:pointer;background:#0f172a;border:1px solid #10b9814d;border-radius:10px;outline:none;padding:.9rem 1.2rem;font-family:inherit;font-size:.95rem;font-weight:700;transition:all .2s}#districtFilter:hover{border-color:#10b981;box-shadow:0 0 10px #10b98133}#searchBtn{color:#fff;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:12px;justify-content:center;align-items:center;padding:.95rem 2rem;font-family:inherit;font-size:1.05rem;font-weight:800;transition:all .3s;display:flex;box-shadow:0 4px 15px #10b98166}#searchBtn:hover{background:linear-gradient(135deg,#34d399,#10b981);transform:scale(1.03);box-shadow:0 6px 20px #10b98199}.hidden{display:none!important}#loading{text-align:center;color:var(--text-secondary)}.spinner{border:3px solid #ffffff1a;border-top-color:var(--accent-color);border-radius:50%;width:30px;height:30px;margin:0 auto 1rem;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.results-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;display:grid}.card{background-color:var(--surface-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff14;border-radius:16px;flex-direction:column;gap:.75rem;padding:1.5rem;transition:transform .2s,box-shadow .2s;animation:.4s ease-out backwards slideUp;display:flex;box-shadow:0 10px 20px #0000004d}.card:hover{border-color:#10b98180;transform:translateY(-4px);box-shadow:0 15px 30px #00000080}.card-title{color:var(--text-primary);font-size:1.1rem;font-weight:600;line-height:1.4}.card-stockist{color:var(--accent-color);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;font-weight:600}.card-prices{border-top:1px solid #0000000d;gap:1rem;margin-top:auto;padding-top:1rem;display:flex}.price-item{flex-direction:column;display:flex}.price-label{color:var(--text-secondary);text-transform:uppercase;font-size:.75rem}.price-value{font-size:1.1rem;font-weight:600}.status-badge{border-radius:999px;width:fit-content;margin-top:.5rem;padding:.25rem .75rem;font-size:.75rem;font-weight:600;display:inline-block}.status-in-stock{color:var(--success);background-color:#22c55e33;border:1px solid #22c55e4d}.status-out{color:var(--danger);background-color:#ef444433;border:1px solid #ef44444d}footer{text-align:center;color:var(--text-secondary);margin-top:auto;padding-top:2rem;font-size:.875rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.upload-btn{background:linear-gradient(135deg, var(--accent-color), var(--accent-hover));color:#fff;cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 4px 6px #0000004d}.upload-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0006}.scan-btn{background-color:var(--surface-color);color:var(--accent-color);cursor:pointer;border:1px solid #0000001a;border-radius:999px;justify-content:center;align-items:center;padding:0 1rem;transition:all .3s;display:flex}.scan-btn:hover{background-color:var(--accent-color);color:#fff}.scanner-overlay{z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.scanner-box{border:2px solid var(--accent-color);border-radius:12px;justify-content:center;align-items:flex-end;width:300px;height:400px;padding-bottom:20px;display:flex;position:relative;overflow:hidden}.scanner-box p{color:#fff;z-index:10;font-weight:700}.scanner-line{background:var(--accent-color);height:4px;box-shadow:0 0 20px var(--accent-color);animation:2s linear infinite scan;position:absolute;top:0;left:0;right:0}@keyframes scan{0%{top:0}50%{top:100%}to{top:0}}.order-actions{flex-direction:column;gap:.5rem;margin-top:1rem;display:flex}.btn-whatsapp{color:#fff;cursor:pointer;background-color:#25d366;border:none;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.5rem;font-size:.9rem;font-weight:600;text-decoration:none;display:flex}.btn-whatsapp:hover{color:#fff;background-color:#128c7e}.btn-email{color:#334155;cursor:pointer;background-color:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.5rem;font-size:.9rem;font-weight:600;text-decoration:none;display:flex}.btn-email:hover{background-color:#e2e8f0}.btn-delivery{color:#854d0e;cursor:pointer;background-color:#fef08a;border:1px solid #fde047;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.5rem;font-size:.9rem;font-weight:600;text-decoration:none;display:flex}.btn-delivery:hover{background-color:#fde047}.main-layout{margin-top:2rem;display:block}.register-card,.spotify-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;background:linear-gradient(135deg,#16a34a,#14532d);border:1px solid #fff3;border-radius:12px;padding:1rem;box-shadow:0 10px 25px -5px #16a34a66}.register-card h3,.spotify-card h3{color:#fff;margin-bottom:.5rem}.register-card p,.spotify-card p{color:#dcfce7!important}.reg-input{border:1px solid #0000001a;border-radius:8px;outline:none;width:100%;margin-bottom:.8rem;padding:.8rem;font-family:inherit}.reg-input:focus{border-color:var(--accent-color)}.reg-btn{background-color:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;padding:.8rem;font-weight:700;transition:background .2s}.reg-btn:hover{background-color:var(--accent-hover)}body{color:var(--text-primary);background:linear-gradient(135deg,#0f172a 0%,#064e3b 100%);flex-direction:column;min-height:100vh;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;overflow-x:hidden}#webgl-canvas{z-index:0;pointer-events:none;background:0 0;width:100vw;height:100vh;display:none;position:fixed;top:0;left:0}.forest-bg{z-index:-1;pointer-events:none;background:0 0;width:100%;height:100%;position:fixed;top:0;left:0}.floating-satire{opacity:.15;z-index:1;pointer-events:none;width:50vw;max-width:400px;box-shadow:none;mix-blend-mode:overlay;border:none;animation:8s ease-in-out infinite float-satire;position:fixed;top:50%;left:50%}@keyframes float-satire{0%{transform:translate(-50%,-50%)rotate(-2deg)}50%{transform:translate(-50%,-55%)rotate(3deg)}to{transform:translate(-50%,-50%)rotate(-2deg)}}.text-3d{color:#000;text-shadow:0 1px #ccc,0 2px #c9c9c9,0 3px #bbb,0 4px #b9b9b9,0 5px #aaa,0 6px 1px #0000001a,0 0 5px #0000001a,0 1px 3px #0000004d,0 3px 5px #0003,0 5px 10px #00000040,0 10px 10px #0003,0 20px 20px #00000026;font-weight:800}.marquee-text{animation:12s linear infinite scrollText}@keyframes scrollText{0%{transform:translate(100%)}to{transform:translate(-100%)}}.cart-floating-btn{background:var(--accent-color);color:#fff;cursor:pointer;z-index:999;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;transition:transform .2s;display:flex;position:fixed;bottom:2rem;right:2rem;box-shadow:0 10px 25px #0000004d}.cart-floating-btn:hover{transform:scale(1.1)}.cart-count{background:var(--danger);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.8rem;font-weight:700;display:flex;position:absolute;top:-5px;right:-5px;box-shadow:0 2px 5px #0003}.cart-sidebar{background:var(--surface-color);z-index:1000;width:400px;height:100vh;color:var(--text-primary);flex-direction:column;transition:transform .3s;display:flex;position:fixed;top:0;right:0;box-shadow:-10px 0 30px #0003}.cart-sidebar.hidden{transform:translate(100%);display:flex!important}.cart-header{background:#0f172a;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.close-cart{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:2rem;line-height:1}.cart-items{flex-direction:column;flex:1;gap:1rem;padding:1.5rem;display:flex;overflow-y:auto}.cart-item{background:#0f172a;border:1px solid #ffffff1a;border-radius:8px;justify-content:space-between;align-items:center;padding:1rem;display:flex}.cart-footer{background:#0f172a;border-top:1px solid #ffffff1a;padding:1.5rem}.delivery-section{flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.cart-total{color:var(--text-primary);justify-content:space-between;font-weight:700;display:flex}.spotify-floating-container{z-index:9999;flex-direction:column;align-items:flex-start;display:flex;position:fixed;bottom:2rem;left:2rem}.spotify-bubble{color:#fff;cursor:pointer;background:#1db954;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:1.8rem;transition:transform .3s,background .3s;display:flex;box-shadow:0 4px 15px #0000004d}.spotify-bubble:hover{background:#1ed760;transform:scale(1.1)}.spotify-player-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1;visibility:visible;background:#141414f2;border:1px solid #ffffff1a;border-radius:12px;width:300px;padding:1rem;transition:opacity .3s,transform .3s,visibility .3s;position:absolute;bottom:75px;left:0;transform:translateY(0)scale(1);box-shadow:0 10px 30px #00000080}.spotify-player-card.hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(20px)scale(.95)}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.delivery-marquee-container{z-index:1000;pointer-events:none;width:100%;position:fixed;bottom:20px;left:0;overflow:hidden}.delivery-marquee{white-space:nowrap;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172acc;border:1px solid #4ade8080;border-radius:30px;padding:8px 20px;font-size:1.1rem;font-weight:700;animation:12s linear infinite drive;display:inline-block;box-shadow:0 4px 15px #0000004d}@keyframes drive{0%{transform:translate(100vw)}to{transform:translate(-100%)}}@media (width<=600px){.cart-sidebar{width:100vw}.close-cart{padding:10px;font-size:2.5rem}}.floating-3d-left{pointer-events:none;filter:drop-shadow(0 10px 20px #0006);opacity:.3;width:90px;height:auto;animation:6s ease-in-out infinite floatUpAndDown;display:none;position:fixed;top:25%;left:2%;z-index:-5!important}.floating-3d-right{pointer-events:none;width:80px;height:auto;filter:drop-shadow(0 10px 20px #0006) rotate(45deg);opacity:.3;animation:8s ease-in-out infinite alternate floatUpAndDown;display:none;position:fixed;top:45%;right:2%;z-index:-5!important}@keyframes floatUpAndDown{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-20px)rotate(10deg)}to{transform:translateY(0)rotate(0)}}@media (width<=1024px){.floating-3d-left,.floating-3d-right{display:none}}.marquee-container-global{z-index:9998;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#06623be0;border-bottom:1px solid #4ade8066;width:100%;padding:6px 0;position:fixed;top:0;left:0;overflow:hidden}.marquee-text-global{white-space:nowrap;padding-left:100%;animation:30s linear infinite globalMarqueeScroll;display:inline-block}@keyframes globalMarqueeScroll{0%{transform:translate(0)}to{transform:translate(-100%)}}#loginOverlay{z-index:999999!important;background:#0f172a!important;height:calc(100vh - 34px)!important;top:34px!important}@keyframes comic-spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}@keyframes speed-rush{0%{transform:translateY(0)}to{transform:translateY(-40px)}}@keyframes comic-pop{0%{opacity:0;transform:scale(0)}80%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.comic-burst{top:50%;left:50%}@keyframes cyber-grid-pan{0%{transform:perspective(500px)rotateX(60deg)translateY(0)}to{transform:perspective(500px)rotateX(60deg)translateY(40px)}}@keyframes radar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes radar-spin-reverse{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes eye-pulse{0%{opacity:.8;transform:scale(1);box-shadow:inset 0 0 20px #000,0 0 30px #34d399}to{opacity:1;transform:scale(1.1);box-shadow:inset 0 0 10px #000,0 0 70px #10b981}}@keyframes scan-bar{0%{transform:translate(0)}to{transform:translate(400%)}}@keyframes blink-cursor{50%{border-color:#0000}}@media (width<=768px){#app{gap:1.5rem;padding:1rem}.search-box-row{background:linear-gradient(135deg,#1e293bf2,#0f172af2);border:1px solid #10b98166;border-radius:16px;flex-direction:column;align-items:stretch;gap:.65rem;padding:10px;box-shadow:0 10px 25px #10b98133}#searchInput,#districtFilter,#searchBtn,#thirdEyeBtn{border-radius:10px;width:100%;margin:0}#searchInput{color:#000!important;background:#fffffff2!important;border:1px solid #10b98166!important}h1{font-size:1.8rem}.logo{font-size:1.2rem}}