body.light{background-color:#fff;color:#000}body.dark{background-color:#1a202c;color:#fff}.navbar-container{max-width:1140px;margin:0 auto;padding:1rem}.navbar{display:flex;flex-direction:column;align-items:center;justify-content:space-between}@media (min-width: 640px){.navbar{flex-direction:row}}.navbar-title a{font-size:1.5rem;font-weight:700;text-decoration:none;color:inherit}.navbar-buttons{display:flex;gap:1rem;margin-top:.5rem}@media (min-width: 640px){.navbar-buttons{margin-top:0}}.create-btn,.theme-toggle-btn{padding:.5rem 1rem;border:none;border-radius:6px;cursor:pointer;font-size:1rem;transition:background .3s ease}.create-btn{background-color:#4caf50;color:#fff}.create-btn:hover{background-color:#45a049}.theme-toggle-btn{background-color:#3182ce;color:#fff}.theme-toggle-btn:hover{background-color:#2b6cb0}.create-title{text-align:center;margin-top:2rem;font-size:2.5rem;color:var(--text-color)}.product-list{padding:2rem;text-align:center}.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));justify-content:center;gap:2rem;margin-top:1rem;max-width:1200px;margin-left:auto;margin-right:auto;padding:1rem}@media (max-width: 1024px){.product-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.product-grid{grid-template-columns:1fr}}.product-card{background-color:var(--form-bg);border-radius:10px;padding:1rem;box-shadow:0 4px 10px #0000001a;transition:transform .3s ease}.product-card:hover{transform:scale(1.03)}.product-img{width:50%;height:250px;object-fit:cover;border-radius:8px}.form-container{max-width:600px;margin:2rem auto;padding:2rem;background-color:var(--form-bg);border-radius:12px;box-shadow:0 6px 16px #0000001a}.product-form{display:flex;flex-direction:column;gap:1.5rem}.form-label{display:flex;flex-direction:column;font-weight:600;color:var(--text-color)}.form-input{padding:.6rem;font-size:1rem;border-radius:6px;border:1px solid #ccc;margin-top:.4rem;transition:border-color .3s ease}.form-input:focus{border-color:#3182ce;outline:none}.submit-btn{background-color:#3182ce;color:#fff;font-size:1rem;padding:.8rem 1.2rem;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease}.submit-btn:hover{background-color:#2b6cb0}body.light{--form-bg: #ffffff;--text-color: #000000}body.dark{--form-bg: #2d3748;--text-color: #ffffff}.product-card{background-color:var(--form-bg);border-radius:10px;padding:1rem;box-shadow:0 4px 10px #0000001a;transition:transform .3s ease;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:320px}.product-img{width:auto;max-width:100%;height:200px;object-fit:cover;border-radius:8px;margin-bottom:1rem}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:999}.modal{background:#fff;padding:2rem;border-radius:10px;width:300px;animation:popup .3s ease-in-out}@keyframes popup{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.modal{background:var(--form-bg);padding:2rem;border-radius:12px;width:100%;max-width:500px;box-shadow:0 6px 20px #00000040;animation:popup .3s ease-in-out;color:var(--text-color)}.modal form{display:flex;flex-direction:column;gap:1rem}.modal input{padding:.6rem;font-size:1rem;border-radius:6px;border:1px solid #ccc;background-color:transparent;color:var(--text-color);transition:border-color .3s ease}.modal input:focus{border-color:#3182ce;outline:none}.modal button[type=submit],.modal button[type=button]{font-size:1rem;padding:.7rem 1rem;border:none;border-radius:6px;cursor:pointer;transition:background-color .3s ease}.modal button[type=submit]{background-color:#4caf50;color:#fff}.modal button[type=submit]:hover{background-color:#45a049}.modal button[type=button]{background-color:#f44336;color:#fff}.modal button[type=button]:hover{background-color:#d32f2f}.buttons{display:flex;justify-content:space-between;margin-top:1rem;gap:50px}