*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--primary:#2563eb;--primary-dark:#1d4ed8;--primary-light:#eff6ff;--secondary:#0f172a;--accent:#f59e0b;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--white:#fff;--radius:12px;--radius-sm:8px;--shadow:0 1px 3px #0000001a, 0 1px 2px #0000000f;--shadow-md:0 4px 6px #00000012, 0 2px 4px #0000000f;--shadow-lg:0 10px 15px #0000001a, 0 4px 6px #0000000d}body{background:var(--gray-50);color:var(--gray-800);font-family:Inter,sans-serif;line-height:1.6}.navbar{background:var(--white);border-bottom:1px solid var(--gray-200);z-index:100;height:64px;box-shadow:var(--shadow);justify-content:space-between;align-items:center;padding:0 2rem;display:flex;position:sticky;top:0}.nav-logo{color:var(--secondary);font-size:1.4rem;font-weight:700;text-decoration:none}.nav-logo span{color:var(--primary)}.nav-links{gap:.25rem;display:flex}.nav-link{border-radius:var(--radius-sm);color:var(--gray-600);cursor:pointer;background:0 0;border:none;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .15s}.nav-link:hover,.nav-link.active{background:var(--primary-light);color:var(--primary)}.nav-right{align-items:center;gap:.75rem;display:flex}.nav-icon-btn{cursor:pointer;border-radius:var(--radius-sm);color:var(--gray-500);background:0 0;border:none;padding:.5rem;font-size:1.1rem;transition:all .15s;position:relative}.nav-icon-btn:hover{background:var(--gray-100);color:var(--gray-800)}.badge{background:var(--primary);color:var(--white);border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:.65rem;font-weight:700;display:flex;position:absolute;top:2px;right:2px}.btn-nav-login{background:var(--primary);color:var(--white);border-radius:var(--radius-sm);cursor:pointer;border:none;padding:.5rem 1.25rem;font-size:.875rem;font-weight:500;transition:background .15s}.btn-nav-login:hover{background:var(--primary-dark)}.hero{background:linear-gradient(135deg, var(--secondary) 0%, #1e3a5f 100%);color:var(--white);justify-content:space-between;align-items:center;gap:2rem;min-height:360px;padding:4rem 2rem;display:flex}.hero-content h1{margin-bottom:1rem;font-size:2.5rem;font-weight:700;line-height:1.2}.hero-content h1 span{color:#60a5fa}.hero-content p{color:#94a3b8;max-width:480px;margin-bottom:2rem;font-size:1.05rem}.hero-btns{flex-wrap:wrap;gap:1rem;display:flex}.btn-hero-primary{background:var(--primary);color:var(--white);border-radius:var(--radius);cursor:pointer;border:none;padding:.875rem 2rem;font-size:1rem;font-weight:600;transition:all .2s}.btn-hero-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-hero-outline{color:var(--white);border-radius:var(--radius);cursor:pointer;background:0 0;border:2px solid #ffffff4d;padding:.875rem 2rem;font-size:1rem;font-weight:600;transition:all .2s}.btn-hero-outline:hover{border-color:var(--white);background:#ffffff1a}.hero-visual{opacity:.15;flex-shrink:0;font-size:8rem}.cats-bar{background:var(--white);border-bottom:1px solid var(--gray-200);gap:.5rem;padding:1rem 2rem;display:flex;overflow-x:auto}.cat-chip{cursor:pointer;white-space:nowrap;border:1.5px solid var(--gray-200);background:var(--white);color:var(--gray-600);border-radius:999px;padding:.5rem 1.25rem;font-size:.85rem;font-weight:500;transition:all .15s}.cat-chip:hover{border-color:var(--primary);color:var(--primary)}.cat-chip.active{background:var(--primary);color:var(--white);border-color:var(--primary)}.section{padding:2rem}.section-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.section-title{color:var(--gray-900);font-size:1.25rem;font-weight:700}.products-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem;display:grid}.product-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--gray-200);cursor:pointer;flex-direction:column;transition:all .2s;display:flex;overflow:hidden}.product-card:hover{box-shadow:var(--shadow-lg);border-color:var(--gray-300);transform:translateY(-2px)}.product-img{background:var(--gray-50);border-bottom:1px solid var(--gray-100);justify-content:center;align-items:center;height:160px;font-size:3.5rem;display:flex;position:relative}.product-badge{text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:3px 10px;font-size:.7rem;font-weight:700;position:absolute;top:10px;left:10px}.badge-new{color:#1d4ed8;background:#dbeafe}.badge-sale{color:#dc2626;background:#fee2e2}.badge-hot{color:#d97706;background:#fef3c7}.product-body{flex-direction:column;flex:1;padding:1rem;display:flex}.product-cat{color:var(--primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem;font-size:.75rem;font-weight:600}.product-name{color:var(--gray-900);margin-bottom:.25rem;font-size:.95rem;font-weight:600;line-height:1.4}.product-brand{color:var(--gray-400);margin-bottom:.75rem;font-size:.8rem}.product-footer{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.product-price{color:var(--gray-900);font-size:1.1rem;font-weight:700}.product-price-old{color:var(--gray-400);margin-left:.35rem;font-size:.8rem;text-decoration:line-through}.btn-add{background:var(--primary);width:34px;height:34px;color:var(--white);border-radius:var(--radius-sm);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;transition:background .15s;display:flex}.btn-add:hover{background:var(--primary-dark)}.features-bar{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;padding:0 2rem 2rem;display:grid}.feature-item{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);align-items:center;gap:1rem;padding:1.25rem;display:flex}.feature-icon{color:var(--primary);flex-shrink:0;font-size:1.5rem}.feature-text strong{color:var(--gray-800);font-size:.9rem;font-weight:600;display:block}.feature-text span{color:var(--gray-500);font-size:.8rem}.overlay{z-index:200;background:#00000080;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal{background:var(--white);border-radius:var(--radius);width:100%;max-width:480px;max-height:90vh;box-shadow:var(--shadow-lg);overflow-y:auto}.modal-header{border-bottom:1px solid var(--gray-200);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-title{font-size:1.1rem;font-weight:700}.modal-close{cursor:pointer;color:var(--gray-400);border-radius:var(--radius-sm);background:0 0;border:none;padding:.25rem;font-size:1.25rem}.modal-close:hover{color:var(--gray-700);background:var(--gray-100)}.modal-body{padding:1.5rem}.form-group{margin-bottom:1rem}.form-label{color:var(--gray-700);margin-bottom:.4rem;font-size:.85rem;font-weight:500;display:block}.form-input{border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);width:100%;color:var(--gray-800);outline:none;padding:.625rem .875rem;font-family:inherit;font-size:.9rem;transition:border-color .15s}.form-input:focus{border-color:var(--primary)}.btn-primary{background:var(--primary);width:100%;color:var(--white);border-radius:var(--radius-sm);cursor:pointer;border:none;padding:.75rem;font-family:inherit;font-size:.95rem;font-weight:600;transition:background .15s}.btn-primary:hover{background:var(--primary-dark)}.form-switch{text-align:center;color:var(--gray-500);margin-top:1rem;font-size:.875rem}.form-switch a{color:var(--primary);cursor:pointer;font-weight:500}.cart-panel{background:var(--white);z-index:300;flex-direction:column;width:400px;height:100vh;transition:transform .3s;display:flex;position:fixed;top:0;right:0;transform:translate(100%);box-shadow:-4px 0 20px #00000026}.cart-panel.open{transform:translate(0)}.cart-panel-header{border-bottom:1px solid var(--gray-200);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.cart-items{flex:1;padding:1rem 1.5rem;overflow-y:auto}.cart-item{border-bottom:1px solid var(--gray-100);align-items:center;gap:1rem;padding:.875rem 0;display:flex}.cart-item-icon{flex-shrink:0;font-size:2rem}.cart-item-info{flex:1}.cart-item-name{font-size:.9rem;font-weight:600}.cart-item-price{color:var(--gray-500);font-size:.85rem}.cart-item-remove{cursor:pointer;color:var(--gray-400);background:0 0;border:none;padding:.25rem;font-size:1rem}.cart-item-remove:hover{color:var(--danger)}.cart-footer{border-top:1px solid var(--gray-200);padding:1.25rem 1.5rem}.cart-total{justify-content:space-between;margin-bottom:1rem;font-size:1.1rem;font-weight:700;display:flex}.btn-checkout{background:var(--success);width:100%;color:var(--white);border-radius:var(--radius-sm);cursor:pointer;border:none;padding:.875rem;font-family:inherit;font-size:1rem;font-weight:600;transition:background .15s}.btn-checkout:hover{background:#059669}.toast{background:var(--gray-900);color:var(--white);border-radius:var(--radius);z-index:500;opacity:0;box-shadow:var(--shadow-lg);align-items:center;gap:.5rem;padding:.875rem 1.5rem;font-size:.9rem;font-weight:500;transition:all .3s;display:flex;position:fixed;bottom:2rem;right:2rem;transform:translateY(100px)}.toast.show{opacity:1;transform:translateY(0)}.toast.success{background:var(--success)}.toast.error{background:var(--danger)}.empty-state{text-align:center;color:var(--gray-400);padding:4rem 2rem}.empty-state i{margin-bottom:1rem;font-size:3rem;display:block}.empty-state p{font-size:1rem}.loading{text-align:center;color:var(--gray-400);padding:3rem;font-size:.95rem}.footer{background:var(--secondary);color:var(--gray-400);text-align:center;margin-top:2rem;padding:2rem;font-size:.875rem}.footer strong{color:var(--white)}.dashboard{padding:2rem}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem;display:grid}.stat-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:1.5rem}.stat-card .stat-label{color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.8rem;font-weight:600}.stat-card .stat-value{color:var(--gray-900);font-size:2rem;font-weight:700}.stat-card .stat-icon{color:var(--primary);margin-bottom:.75rem;font-size:1.5rem}@media (width<=768px){.nav-links{display:none}.hero{text-align:center;flex-direction:column;padding:2.5rem 1rem}.hero-visual{display:none}.hero-content h1{font-size:1.75rem}.cart-panel{width:100%}.section{padding:1rem}.cats-bar{padding:.75rem 1rem}}