body {font-family:'Segoe UI',sans-serif;background-color:#f8f8f5;margin:0;color:#333;}
header {background-color:#0078D7;color:white;padding:15px;text-align:center;}
.filters {display:flex;justify-content:center;gap:10px;margin-top:10px;}
input,select {padding:6px;border:1px solid #ccc;border-radius:4px;}
main {margin:20px;}
#productTable {width:100%;border-collapse:collapse;}
#productTable th,#productTable td {border:1px solid #e1e1e1;padding:8px;text-align:center;}
#productTable th {background-color:#f0f0f0;cursor:pointer;}
#productTable tr:hover {background-color:#e9f3ff;}
#productTable td:nth-child(7) {max-width:400px;white-space:normal;word-break:break-word;line-height:1.4;text-align:left;vertical-align:top;}
.pagination {display:flex;justify-content:center;align-items:center;gap:10px;margin-top:15px;}
button {background:white;border:1px solid #0078D7;color:#0078D7;padding:5px 10px;border-radius:5px;cursor:pointer;}
button:hover {background-color:#0078D7;color:white;}
.modal {display:none;position:fixed;z-index:999;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);justify-content:center;align-items:center;}
.modal img {max-width:80%;max-height:80%;border-radius:10px;}
.close {position:absolute;top:20px;right:40px;font-size:30px;color:white;cursor:pointer;}
.nav-arrows {position:absolute;bottom:40px;width:100%;display:flex;justify-content:space-between;padding:0 100px;}
.nav-arrows button {font-size:24px;background:none;border:none;color:white;cursor:pointer;}
th[data-sort] {cursor: pointer;user-select: none;position: relative;}
th[data-sort]:hover {color: #005ea8;}