.navbar{background:linear-gradient(90deg,#4a6cf7,#6d8efb);color:#fff;padding:12px 30px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 15px #00000026;position:sticky;top:0;z-index:1000}.nav-logo{font-size:1.5rem;font-weight:600;cursor:pointer;letter-spacing:.5px;transition:.3s ease}.nav-logo span{color:#ffe97f}.nav-logo:hover{transform:scale(1.05)}.nav-links{display:flex;align-items:center;gap:20px}.nav-links a{color:#fff;text-decoration:none;font-weight:500;transition:.3s ease;position:relative}.nav-links a:after{content:"";position:absolute;bottom:-4px;left:0;width:0%;height:2px;background:#fff;transition:width .3s ease}.nav-links a:hover:after{width:100%}.btn-register{background:#fff;color:#4a6cf7!important;padding:6px 12px;border-radius:6px;font-weight:600;transition:.3s ease}.btn-register:hover{background:#ffe97f;color:#333!important}.btn-logout{background:#ff4e4e;border:none;color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;font-weight:600;transition:.3s ease}.btn-logout:hover{background:#d73b3b}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{background:linear-gradient(135deg,#f0f4ff,#fdfdff);color:#222;min-height:100vh;display:flex;flex-direction:column}nav{background:linear-gradient(90deg,#4a6cf7,#6d8efb);color:#fff;padding:15px 30px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 12px #00000026;position:sticky;top:0;z-index:100}nav a,nav button{color:#fff;text-decoration:none;margin:0 12px;font-weight:500;transition:.3s ease;border:none;background:transparent;cursor:pointer}nav a:hover,nav button:hover{transform:translateY(-1px);opacity:.9}.container{max-width:900px;background:#fff;margin:40px auto;padding:30px;border-radius:16px;box-shadow:0 5px 25px #0000001a;transition:.3s ease}.container:hover{transform:translateY(-3px)}h2{text-align:center;margin-bottom:20px;color:#4a6cf7}form{display:flex;flex-direction:column;gap:15px;align-items:center}input{width:80%;padding:12px;border:1px solid #ccc;border-radius:10px;font-size:15px;transition:all .3s}input:focus{border-color:#4a6cf7;outline:none;box-shadow:0 0 8px #4a6cf74d}button{background:linear-gradient(90deg,#4a6cf7,#6d8efb);color:#fff;border:none;padding:12px 20px;border-radius:10px;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:linear-gradient(90deg,#3c5af0,#5f82fa);transform:translateY(-2px)}.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin-top:25px}.product-card{background:#fff;border-radius:16px;box-shadow:0 4px 10px #00000014;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;text-align:center}.product-card:hover{transform:translateY(-6px);box-shadow:0 8px 20px #00000026}.product-card img{width:100%;height:200px;object-fit:cover}.product-card h4{margin:10px 0 5px;color:#333}.product-card p{color:#555;margin-bottom:10px}.cart-item{background:#f8f9ff;padding:15px;margin-bottom:12px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 4px #00000014}.checkout-container{text-align:center;padding:40px 0}p{text-align:center;color:#666}button:disabled{background:#ccc;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.container,.product-card{animation:fadeIn .5s ease}.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:20px}.skeleton-card{background:#f2f2f2;border-radius:8px;padding:15px;box-shadow:0 2px 6px #0000001a}.skeleton-img{height:150px;width:100%;border-radius:6px;margin-bottom:10px}.skeleton-line{height:14px;width:80%;border-radius:4px;margin-bottom:8px;background:#ddd}.skeleton-line.short{width:50%}.skeleton-btn{height:35px;width:100%;border-radius:6px;background:#ddd;margin-top:10px}@keyframes shimmer{0%{background-position:-450px 0}to{background-position:450px 0}}.shimmer{background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);background-size:800px 104px;animation:shimmer 1.6s infinite linear}.error-text{color:red;text-align:center;margin-top:40px;font-weight:700}
