:root{--clr-bg:#0f0e17;--clr-surface:#1a1828;--clr-surface-2:#221f33;--clr-surface-3:#2d2942;--clr-border:#ffffff14;--clr-border-hover:#ffffff2e;--clr-primary:#c084fc;--clr-primary-glow:#c084fc59;--clr-accent:#f59e0b;--clr-accent-glow:#f59e0b66;--clr-success:#22c55e;--clr-success-glow:#22c55e73;--clr-danger:#ef4444;--clr-danger-glow:#ef444466;--clr-text:#e2e0f0;--clr-text-muted:#8b8aa0;--clr-text-heading:#f4f3ff;--font-sans:"Outfit", system-ui, sans-serif;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:999px;--shadow-card:0 4px 24px #0006;--shadow-glow-primary:0 0 20px var(--clr-primary-glow);--shadow-glow-success:0 0 28px var(--clr-success-glow), 0 0 60px #22c55e33;--ease:cubic-bezier(.4, 0, .2, 1);--duration:.2s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-sans);background:var(--clr-bg);color:var(--clr-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-image:radial-gradient(80% 60% at 50% -10%,#c084fc1f 0%,#0000 60%),radial-gradient(60% 50% at 90% 100%,#f59e0b0f 0%,#0000 55%);min-height:100vh}img{max-width:100%;display:block}button{cursor:pointer;background:0 0;border:none;font-family:inherit}#app,.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{align-items:center;gap:var(--space-xl);padding:var(--space-md) var(--space-xl);background:var(--clr-surface);border-bottom:1px solid var(--clr-border);z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-wrap:wrap;display:flex;position:sticky;top:0}.app-header__brand{align-items:center;gap:var(--space-sm);flex-shrink:0;display:flex}.brand-icon{filter:drop-shadow(0 0 8px var(--clr-accent-glow));font-size:2rem;line-height:1}.brand-title{color:var(--clr-text-heading);letter-spacing:-.5px;font-size:1.4rem;font-weight:700}.brand-sub{color:var(--clr-text-muted);font-size:.75rem;display:none}@media (width>=900px){.brand-sub{display:block}}.dose-tabs{gap:var(--space-sm);flex-wrap:wrap;flex:1;justify-content:flex-end;display:flex}.dose-selector{margin-bottom:var(--space-xl);text-align:center}.dose-selector__title{text-transform:uppercase;letter-spacing:.1em;color:var(--clr-text-muted);margin-bottom:var(--space-md);font-size:.85rem}.dose-selector__options{gap:var(--space-md);flex-wrap:wrap;justify-content:center;display:flex}.dose-option{align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);border:1.5px solid var(--clr-border);-webkit-backdrop-filter:blur(8px);color:var(--clr-text-muted);background:#ffffff08;min-width:160px;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 4px 12px #0000001a}.dose-option__icon{filter:drop-shadow(0 2px 4px #0000004d);font-size:1.5rem;line-height:1;transition:transform .4s}.dose-option__info{flex-direction:column;align-items:flex-start;display:flex}.dose-option__label{color:var(--clr-text);font-size:.95rem;font-weight:700}.dose-option__price{color:var(--clr-text-muted);font-size:.75rem}.dose-option:hover:not(.is-active){border-color:var(--clr-border-hover);background:#ffffff0f;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.dose-option:hover:not(.is-active) .dose-option__icon{transform:scale(1.1)}.dose-option.is-active{border-color:var(--clr-primary);color:var(--clr-primary);box-shadow:0 0 24px var(--clr-primary-glow), inset 0 2px 10px #ffffff0d;background:#c084fc26;transform:translateY(-2px)}.dose-option.is-active .dose-option__price{color:var(--clr-primary);opacity:.8}.dose-option.is-active .dose-option__icon{transform:scale(1.1)rotate(-5deg)}.app-body{flex:1;grid-template-columns:280px 1fr;display:grid;overflow:hidden}@media (width<=860px){.app-body{grid-template-columns:1fr}}.sidebar{background:var(--clr-surface);border-right:1px solid var(--clr-border);padding:var(--space-lg);gap:var(--space-md);scrollbar-width:thin;scrollbar-color:var(--clr-surface-3) transparent;flex-direction:column;display:flex;overflow-y:auto}.sidebar__heading{letter-spacing:.1em;text-transform:uppercase;color:var(--clr-text-muted);font-size:.7rem;font-weight:700}.sidebar__empty{color:var(--clr-text-muted);text-align:center;padding:var(--space-lg) 0;font-size:.85rem}.cat-filters{gap:var(--space-xs);flex-wrap:wrap;display:flex}.cat-btn{border-radius:var(--radius-full);border:1.5px solid var(--clr-border);color:var(--clr-text-muted);transition:all var(--duration) var(--ease);background:0 0;padding:4px 12px;font-size:.78rem;font-weight:500}.cat-btn:hover:not(.is-active):not(.active){border-color:var(--clr-border-hover);color:var(--clr-text);background:var(--clr-surface-2)}.cat-btn.is-active,.cat-btn.active{background:var(--clr-primary);border-color:var(--clr-primary);color:#fff;font-weight:600}.product-grid{gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}.product-card{background:var(--clr-surface-2);border:1.5px solid var(--clr-border);border-radius:var(--radius-md);text-align:left;transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);flex-direction:column;display:flex;position:relative;overflow:hidden}.product-card__img-wrap{aspect-ratio:1;background:var(--clr-surface-3);position:relative;overflow:hidden}.product-card__img{object-fit:cover;width:100%;height:100%;transition:transform .3s var(--ease)}.product-card__add-overlay{color:#fff;opacity:0;transition:opacity var(--duration) var(--ease), transform var(--duration) var(--ease);background:#c084fcd9;justify-content:center;align-items:center;font-size:2rem;font-weight:700;display:flex;position:absolute;inset:0;transform:scale(.8)}.product-card__info{flex-direction:column;gap:2px;padding:8px;display:flex}.product-card__title{color:var(--clr-text-heading);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:600;overflow:hidden}.product-card__cat{color:var(--clr-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.65rem}.product-card__price{color:var(--clr-accent);font-size:.78rem;font-weight:700}.product-card:hover:not(.is-disabled){border-color:var(--clr-primary);box-shadow:var(--shadow-glow-primary);transform:translateY(-2px)}.product-card:hover:not(.is-disabled) .product-card__img{transform:scale(1.06)}.product-card:hover:not(.is-disabled) .product-card__add-overlay{opacity:1;transform:scale(1)}.product-card.is-disabled{opacity:.4;cursor:not-allowed}.main-area{padding:var(--space-xl);gap:var(--space-xl);flex-direction:column;display:flex;overflow-y:auto}@media (width<=600px){.main-area{padding:var(--space-md)}}.dose-area{gap:var(--space-lg);flex-direction:column;display:flex}.dose-area__header{justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.dose-area__title{color:var(--clr-text-heading);font-size:1.3rem;font-weight:600}.dose-area__title strong{color:var(--clr-primary)}.dose-progress{align-items:center;gap:var(--space-md);display:flex}.dose-progress__bar{background:var(--clr-surface-3);border-radius:var(--radius-full);flex-shrink:0;width:180px;height:8px;overflow:hidden}.dose-progress__fill{background:linear-gradient(90deg, var(--clr-primary), var(--clr-success));border-radius:var(--radius-full);height:100%;transition:width .4s var(--ease)}.dose-progress__label{color:var(--clr-text-muted);white-space:nowrap;font-size:.8rem;font-weight:500}.dose-container{-webkit-backdrop-filter:blur(12px);background:#ffffff08;border:2px solid #ffffff1a;border-top:none;border-radius:0 0 20px 20px;max-width:400px;margin:30px auto 0;padding:1.25rem;transition:box-shadow .4s;position:relative;box-shadow:inset 0 -10px 30px #00000080,inset 2px 0 12px #ffffff05,0 12px 40px #0009}.dose-container:hover{box-shadow:inset 0 -10px 30px #0009,inset 2px 0 12px #ffffff0d,0 16px 50px #000c,0 0 20px #c084fc26}.dose-container .dose-lid{z-index:10;opacity:0;pointer-events:none;background:linear-gradient(#5a4a3f 0%,#3e2f28 100%);border-radius:10px 10px 0 0;width:110%;height:20px;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .3s;position:absolute;top:-20px;left:-5%;transform:translateY(-150px)rotate(15deg);box-shadow:0 -3px 8px #00000080,inset 0 2px 4px #ffffff14}.dose-container.is-full .dose-lid{opacity:1;pointer-events:auto;transform:translateY(0)rotate(0)}.dose-container:after{content:"";pointer-events:none;z-index:3;background:linear-gradient(#ffffff0f 0%,#0000 100%);border-radius:0 0 4px 4px;width:6px;height:100%;position:absolute;top:0;left:10%}.dose-container .dose-tin{z-index:2;position:relative}.dose-tin{background:0 0;gap:.75rem;position:relative}.dose-grid-4,.dose-grid-6,.dose-grid-10{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}.slot{aspect-ratio:1;border-radius:var(--radius-md);width:100%;transition:transform var(--duration) var(--ease);background:var(--clr-surface-2);border:1.5px solid var(--clr-border);box-shadow:var(--shadow-card);display:block;position:relative;overflow:hidden}.slot.drop-in{animation:.6s cubic-bezier(.34,1.56,.64,1) both drop-in-bounce}.slot:not(.drop-in){animation:slot-pop .3s var(--ease) both}.slot:not(.empty-slot):hover{border-color:var(--clr-border-hover);transform:scale(1.03)}.slot:not(.empty-slot):hover .remove-btn,.slot:not(.empty-slot):hover .slot__remove{opacity:1;transform:scale(1)}.slot:not(.empty-slot):hover .slot__overlay{opacity:1}.slot.empty-slot,.slot--empty{aspect-ratio:1;width:100%;box-shadow:none;color:var(--clr-text-muted);background:0 0;border:2px dashed #ffffff1f;flex-direction:column;justify-content:center;align-items:center;animation:2.5s ease-in-out infinite pulse-border;display:flex}.slot.empty-slot:hover,.slot--empty:hover{color:var(--clr-primary);border-color:#c084fc66}.slot--filled{animation:slot-pop .3s var(--ease) both}.slot--filled:hover{border-color:var(--clr-border-hover);transform:scale(1.03)}.slot--filled:hover .slot__remove{opacity:1;transform:scale(1)}.slot--filled:hover .slot__overlay{opacity:1}.slot__img{object-fit:cover;width:100%;height:100%}.slot__remove{background:var(--clr-danger);color:#fff;opacity:0;width:26px;height:26px;transition:opacity var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;display:flex;position:absolute;top:6px;right:6px;transform:scale(.6)}.slot__remove:hover{box-shadow:0 0 12px var(--clr-danger-glow);transform:scale(1.1)!important}.slot__empty-icon{opacity:.4;font-size:2rem;line-height:1}.slot__empty-label{opacity:.4;text-transform:uppercase;letter-spacing:.08em;margin-top:4px;font-size:.7rem}.slot__img{object-fit:cover;border-radius:8px;width:100%;height:100%}.slot__overlay{opacity:0;transition:opacity var(--duration) var(--ease);background:linear-gradient(#0000,#000c);flex-direction:column;gap:2px;padding:6px 8px 8px;display:flex;position:absolute;bottom:0;left:0;right:0}.slot__name{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;font-weight:600;overflow:hidden}.slot__price{color:var(--clr-accent);font-size:.65rem;font-weight:700}.remove-btn{background:var(--clr-danger);color:#fff;cursor:pointer;opacity:0;width:24px;height:24px;transition:opacity var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:.68rem;font-weight:700;display:flex;position:absolute;top:6px;right:6px;transform:scale(.6)}.remove-btn:hover{box-shadow:0 0 12px var(--clr-danger-glow);transform:scale(1.15)!important}.summary-bar{justify-content:space-between;align-items:center;gap:var(--space-lg);padding:var(--space-md) var(--space-xl);background:var(--clr-surface);border-top:1px solid var(--clr-border);z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-wrap:wrap;display:flex;position:sticky;bottom:0}.summary-bar__info{gap:var(--space-lg);flex-wrap:wrap;align-items:center;display:flex}.summary-bar__count{color:var(--clr-text-muted);font-size:.9rem}.summary-bar__count strong{color:var(--clr-text-heading);font-weight:700}.summary-bar__price{color:var(--clr-text-muted);font-size:.9rem}.summary-bar__price strong{color:var(--clr-accent);font-size:1.05rem;font-weight:700}.summary-bar__actions{gap:var(--space-sm);flex-wrap:wrap;display:flex}.btn{align-items:center;gap:var(--space-xs);border-radius:var(--radius-full);transition:all var(--duration) var(--ease);white-space:nowrap;padding:10px 18px;font-size:.85rem;font-weight:600;display:inline-flex}.btn--secondary{background:var(--clr-surface-2);border:1.5px solid var(--clr-border);color:var(--clr-text)}.btn--secondary:hover:not(:disabled){border-color:var(--clr-primary);color:var(--clr-primary);box-shadow:var(--shadow-glow-primary)}.btn--secondary:disabled{opacity:.35;cursor:not-allowed}.btn--share{background:var(--clr-surface-2);border:1.5px solid var(--clr-border);color:var(--clr-text)}.btn--share:hover{border-color:var(--clr-accent);color:var(--clr-accent);box-shadow:0 0 14px var(--clr-accent-glow)}.btn--checkout{background:var(--clr-surface-3);border:1.5px solid var(--clr-border);color:var(--clr-text-muted);cursor:not-allowed;opacity:.5;transition:all .4s var(--ease)}.btn--checkout-ready{background:var(--clr-success);border-color:var(--clr-success);color:#fff;cursor:pointer;opacity:1;box-shadow:var(--shadow-glow-success);animation:2s ease-in-out infinite checkout-pulse}.btn--checkout-ready:hover{box-shadow:0 0 40px var(--clr-success-glow);background:#16a34a;transform:scale(1.04)}@keyframes pulse-border{0%,to{border-color:var(--clr-border)}50%{border-color:#c084fc4d}}@keyframes slot-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes drop-in-bounce{0%{opacity:0;transform:translateY(-80px)scale(.8)rotate(-5deg)}50%{opacity:1;transform:translateY(10px)scale(1.05)rotate(2deg)}70%{transform:translateY(-5px)scale(.98)rotate(-1deg)}to{transform:translateY(0)scale(1)rotate(0)}}@keyframes checkout-pulse{0%,to{box-shadow:var(--shadow-glow-success)}50%{box-shadow:0 0 48px var(--clr-success-glow), 0 0 90px #22c55e40}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--clr-surface-3);border-radius:99px}@media (width<=860px){.app-body{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--clr-border)}.dose-tin{padding:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}@media (width<=600px){.app-header{padding:var(--space-md)}.dose-tabs{justify-content:flex-start}.summary-bar{padding:var(--space-md);flex-direction:column;align-items:flex-start}.summary-bar__actions{width:100%}.summary-bar__actions .btn{flex:1;justify-content:center}.dose-progress__bar{width:120px}}.modal-overlay{z-index:9999;-webkit-backdrop-filter:blur(12px);background:#0f0c19bf;justify-content:center;align-items:center;animation:.3s forwards fade-in;display:flex;position:fixed;inset:0}.modal-content{background:var(--clr-surface-2);border:1px solid var(--clr-border);padding:var(--space-xl);text-align:center;border-radius:20px;width:90%;max-width:450px;animation:.4s cubic-bezier(.34,1.56,.64,1) forwards pop-in;transform:scale(.95);box-shadow:0 20px 40px #00000080,inset 0 2px 10px #ffffff0d}.modal-content h2{color:var(--clr-text);margin-bottom:var(--space-sm);font-size:1.5rem}.modal-content p{color:var(--clr-text-muted);margin-bottom:var(--space-xl)}.modal-content .modal-actions{gap:var(--space-md);flex-direction:column;display:flex}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.95)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}