:root{--primary-color:#2d4263;--secondary-color:#c19a6b;--background-light:#f5f5f5;--accent-light:#e0e0e0;--text-dark:#2d2d2d;--text-light:#ffffff}*{margin:0;padding:0;box-sizing:border-box;transition:all .3s ease;scroll-behavior:smooth}body{font-family:Segoe UI,Arial,sans-serif;line-height:1.6;background:var(--background-light);color:var(--text-dark);display:flex;flex-direction:column;min-height:100vh}.header{padding:0 clamp(1rem,5vw,3rem);background:var(--primary-color);height:clamp(56px,8vh,64px);width:100%;box-shadow:0 2px 10px rgba(0,0,0,.1);position:-webkit-sticky;position:sticky;top:0;z-index:1000}.header,.logo{display:flex;align-items:center}.logo{height:100%;color:var(--text-light);gap:1rem}.logo img{height:clamp(40px,75%,60px);object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.mainContainer{display:flex;flex-direction:column;flex-grow:1;padding:clamp(1rem,3vw,2.5rem);align-items:center;margin:1rem auto;width:min(90%,1200px);gap:1.5rem}.search-bar{width:100%;display:flex;gap:1rem}.add-btn{background-color:var(--primary-color);color:var(--text-light)}.add-btn:hover{background-color:#354b6d;color:#354b6d}.product-details{justify-content:center;width:100%}.action-buttons{display:flex;gap:8px}.custom-select{width:100%;padding:.5rem 1rem;border:1px solid var(--accent-light);border-radius:8px;background-color:#ffffff;color:rgb(0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%207L10%2012L15%207%22%20stroke%3D%22%232D4263%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1rem;cursor:pointer;transition:border-color .3s ease}.custom-select:invalid{color:rgba(0,0,0,.25)}.custom-select option{color:rgb(0,0,0)}.custom-select:focus,.custom-select:hover{border-color:dodgerblue;outline:none}.footer{background:var(--primary-color);color:rgba(255,255,255,.9);border-top:1px solid rgba(255,255,255,.15);padding:1.5rem;margin-top:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;position:relative}.copy-right{text-align:center;border-top:1px solid rgba(255,255,255,.1);font-size:1rem;color:rgba(255,255,255,.7)}.web-link{display:flex;gap:.5rem;align-items:center}.web-link a{color:var(--secondary-color);font-size:1rem;text-decoration:none}.web-link a:hover{color:#d4b483;font-size:1rem;text-decoration:underline}@media screen and (max-width:320px){body{font-size:14px}.header{height:50px;padding:0 .5rem;justify-content:center}.logo{gap:.4rem}.logo img{height:30px}.mainContainer{padding:.5rem;width:100%;gap:1rem}.search-bar{flex-direction:column;gap:.5rem}.product-details{font-size:.85em}.ant-table{width:100%;overflow-x:auto}.ant-table-cell{font-size:10px;white-space:nowrap}.ant-btn{width:100%;font-size:12px}.footer{padding:.75rem;justify-content:center}.copy-right,.web-link a{font-size:.85rem}}@media screen and (max-width:480px){body{font-size:15px}.header{height:52px;padding:0 .75rem;justify-content:center}.logo{gap:.5rem}.logo img{height:50%}.mainContainer{padding:.75rem;width:100%}.product-details{font-size:.9em}.ant-table{width:100%;overflow-x:auto}.ant-table-cell{font-size:10px;white-space:nowrap}.ant-btn{width:100%;font-size:12px}.web-link a{font-size:.9rem}}@media screen and (max-width:768px){.header{padding:0 1rem;height:56px}.logo{gap:.75rem}.logo img{height:40px}.mainContainer{padding:1rem;width:95%;margin:.5rem auto}.search-bar{flex-direction:column;gap:.75rem;width:100%}.add-btn{width:100%}.product-details{line-height:1.6}.footer{padding:1rem;text-align:center}.web-link{flex-direction:column;align-items:center;gap:.75rem}.copy-right{font-size:.9rem}}@media screen and (min-width:769px) and (max-width:1024px){.mainContainer{width:90%;padding:1.5rem}.product-details{font-size:.95em}}@media screen and (min-width:1200px){body{font-size:18px}.mainContainer{width:85%}}@media screen and (orientation:landscape) and (max-height:500px){.header{height:48px}.logo img{height:35px}.mainContainer{padding:.5rem}}