body{font-family:Arial,Helvetica,sans-serif;box-sizing:border-box}.custom-card{background:#fff;border-radius:6px;box-shadow:0 3px 10px #00000013;padding:1rem;border:1px solid #6c757d}.custom-card-body{display:flex;flex-direction:column}.custom-card-title{font-size:1.25rem;margin-bottom:1rem;margin-top:.5rem;font-weight:500}.form-grid{display:flex;flex-wrap:wrap;gap:1rem}.form-group{display:flex;flex-direction:column;flex:1 1 100%}.form-group>textarea{resize:vertical}.form-label{font-weight:500;margin-bottom:.5rem}.form-input{padding:.5rem .75rem;border:1px solid #ced4da;border-radius:4px;font-size:.95rem}.form-input:focus{outline:none;border-color:#86b7fe;box-shadow:0 0 0 .2rem #0d6efd40}.btn{padding:.5rem 1rem;border-radius:4px;font-size:.95rem;cursor:pointer;border:none}.btn-primary{background-color:#0d6efd;color:#fff}.btn-primary:hover{background-color:#0b5ed7}.btn-secondary{background-color:transparent;border:1px solid #6c757d;color:#6c757d}.btn-secondary:hover{background-color:#6c757d;color:#fff}.form-actions{display:flex;gap:.5rem}.product-card{background:#fff;border:1px solid #ddd;border-radius:6px;padding:10px;box-shadow:0 2px 5px #0000001a;max-width:720px;margin:auto}.product-card-body{padding:10px}.product-title{margin-bottom:15px;font-size:25px;font-weight:500;margin-top:.5rem}.table-container{overflow-x:auto}.product-table{width:100%;border-collapse:collapse}tbody tr:hover{background-color:#e9f5ff}.product-table th,.product-table td{padding:8px 12px;border:1px solid #ddd;text-align:left}.product-table th{background-color:#f8f9fa}.col-id{width:60px}.col-price{width:120px}.col-stock{width:110px}.col-actions{width:150px;text-align:right}.loading-text{text-align:center;color:gray}.empty-text{text-align:center;color:#777}.product-name{font-weight:600}.product-description{color:#555}.action-buttons{min-width:120px}.action-buttons>button{margin-left:.2rem}.edit-button,.delete-button{padding:5px 10px;font-size:14px;border:1px solid transparent;border-radius:4px;cursor:pointer}.edit-button{background-color:#fff;color:#007bff;border-color:#007bff}.edit-button:hover{background-color:#007bff;color:#fff}.delete-button{background-color:#fff;color:#dc3545;border-color:#dc3545}.delete-button:hover{background-color:#dc3545;color:#fff}.search-sort-bar{display:flex;gap:1rem;align-items:flex-end;max-width:670px;width:calc(100% - 4rem);box-shadow:0 0 5px #00000050;padding:2rem;margin:auto;background-color:#f8f9fa}.form-group label{font-weight:500;margin-bottom:.4rem}.input-field,.select-field{padding:.5rem;font-size:1rem;border:1px solid #bbb;border-radius:4px;background-color:transparent}.input-field:focus,.select-field:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 .2rem #0d6efd40}.content-wrapper{flex:1;display:flex;justify-content:center;padding:2rem 1rem}.card{background:#fff;border-radius:10px;box-shadow:0 5px 20px #0000001a;padding:2rem;max-width:750px;width:calc(100% - 4rem)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.header h1{font-size:2rem;color:#2563eb}.primary-btn{background:#127c49;color:#fff;border:none;padding:.6rem 1.2rem;font-weight:700;border-radius:25px;cursor:pointer;transition:background .2s ease-in-out}.primary-btn:hover{background:#157347}.error{background:#fee2e2;color:#b91c1c;text-align:center;padding:.6rem;border-radius:5px;margin-bottom:1rem}.search-bar{margin-bottom:1.5rem}.product-list{margin-bottom:1rem}dialog{border:none;padding:2px;border-radius:8px}dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#00000090}.modal{background:#fff;padding:2rem;border-radius:8px;max-width:450px;width:calc(100% - 4rem)}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-header>h2{margin-top:0}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer}@media screen and (max-width: 650px){.search-sort-bar{flex-direction:column;align-items:stretch}.header h1{font-size:1.5rem}}@media screen and (max-width: 550px){.card{padding:1rem;width:calc(100% - 1rem)}.search-sort-bar{padding:1rem;width:calc(100% - 2rem)}}@media screen and (max-width: 450px){.modal{padding:1rem;width:calc(100% - 2rem)}}