/* Reset & Layout */
*{margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif;}
body{display:flex; min-height:100vh; background:linear-gradient(135deg,#4f46e5,#9333ea); padding:20px; animation:bgmove 10s infinite alternate;}
@keyframes bgmove{0%{background-position:0%;}100%{background-position:100%;}}

.sidebar{
    width:220px; background:rgba(0,0,0,.25); backdrop-filter:blur(12px); padding:20px; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.sidebar h2{text-align:center; margin-bottom:20px; color:#fff;}
.sidebar a{display:block; padding:12px; margin-bottom:10px; border-radius:20px; color:#fff; transition:.3s;}
.sidebar a.active, .sidebar a:hover{background:linear-gradient(135deg,#22c55e,#4ade80); transform:scale(1.05);}

.main{flex:1; padding:25px; color:#fff;}
h2{margin-bottom:20px;}
.form-container{background:rgba(255,255,255,.15); backdrop-filter:blur(12px); padding:20px; border-radius:20px; margin-bottom:25px; box-shadow:0 10px 25px rgba(0,0,0,.2);}
form input, form button{width:100%; padding:12px; border:none; border-radius:15px; margin-bottom:12px;}
form input{background:rgba(255,255,255,.3); color:#fff;}
form input::placeholder{color:#eee;}
form button{background:linear-gradient(135deg,#22c55e,#4ade80); color:#fff; font-weight:bold; cursor:pointer; transition:.3s;}
form button:hover{transform:scale(1.05); box-shadow:0 5px 15px rgba(34,197,94,.6);}

.search-box{width:100%; padding:12px; border-radius:15px; border:none; margin-bottom:20px; background:rgba(255,255,255,.3); color:#fff;}
.search-box:focus{outline:none; background:rgba(255,255,255,.4);}

.table-container{overflow-x:auto; border-radius:20px;}
table{width:100%; border-collapse:collapse; background:rgba(255,255,255,.15); backdrop-filter:blur(12px);}
thead{background:linear-gradient(135deg,#3b82f6,#6366f1);}
th,td{padding:12px; text-align:left; color:#fff;}
tbody tr{background:rgba(255,255,255,.1); transition:.3s;}
tbody tr:hover{background:rgba(255,255,255,.25); transform:scale(1.01);}
.slider-img{width:80px; height:50px; object-fit:cover; border-radius:10px; cursor:pointer; transition:.3s;}
.slider-img:hover{transform:scale(1.7);}
.status.active{color:#22c55e; font-weight:bold;}
.status.inactive{color:#f87171; font-weight:bold;}
.edit-btn, .delete-btn{padding:6px 12px; border-radius:20px; border:none; cursor:pointer; transition:.3s; margin-right:5px;}
.edit-btn{background:linear-gradient(135deg,#facc15,#eab308); color:#fff;}
.edit-btn:hover{transform:scale(1.1); box-shadow:0 5px 15px rgba(250,204,21,.6);}
.delete-btn{background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff;}
.delete-btn:hover{transform:scale(1.1); box-shadow:0 5px 15px rgba(239,68,68,.6);}

/* Pagination */
.pagination{margin-top:15px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
.pagination button{padding:8px 12px; border:none; border-radius:12px; cursor:pointer; background:rgba(255,255,255,.2); color:#fff; transition:.3s;}
.pagination button.active, .pagination button:hover{background:linear-gradient(135deg,#22c55e,#4ade80);}

/* Modal */
.modal{display:none; position:fixed; z-index:100; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.8);}
.modal-content{margin:auto; display:block; width:60%; max-width:600px; margin-top:10%;}
.close{position:absolute; top:15px; right:35px; color:#fff; font-size:40px; font-weight:bold; cursor:pointer;}
@media(max-width:768px){.sidebar{width:100%; display:flex; justify-content:space-around;}.sidebar h2{display:none;}.sidebar a{margin:0; flex:1; font-size:13px;}.modal-content{width:90%;}}