body {font-family:sans-serif;background:#f5f5f5;margin:0;padding:20px;}
h1{text-align:center;font-size:2rem;}
.login-body{display:flex;justify-content:center;align-items:center;height:100vh;background:#f5f5f5;padding:15px;}
.login-box{background:#fff;padding:30px;border-radius:12px;box-shadow:0 0 10px rgba(0,0,0,0.1);text-align:center;width:100%;max-width:350px;}
.login-box input[type="password"]{padding:12px;width:100%;border:1px solid #ccc;border-radius:8px;font-size:16px;}
.login-box button{margin-top:15px;padding:12px;background:#007bff;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;width:100%;}
.login-box button:hover{background:#0056b3;}
.error{color:red;margin-top:10px;}

.controls{text-align:center;margin-bottom:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.controls button{padding:12px 18px;border:none;border-radius:8px;cursor:pointer;font-size:14px;min-width:120px;}
.controls button:hover{opacity:0.85;}
.controls .danger{background:#dc3545;color:white;}
.controls a button{background:#007bff;color:#fff;}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;}
.item{background:#fff;padding:10px;border-radius:10px;box-shadow:0 0 5px rgba(0,0,0,0.1);text-align:center;overflow:hidden;}
img,video{width:100%;height:auto;max-height:220px;object-fit:cover;border-radius:8px;}
.meta{margin-top:8px;font-size:12px;color:#555;display:block;word-wrap:break-word;}

.pagination{text-align:center;margin-top:20px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;}
.pagination a{padding:10px 14px;background:#007bff;color:#fff;border-radius:6px;text-decoration:none;font-size:14px;}
.pagination a.active{background:#0056b3;}

/* Lightbox */
.lightbox{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.95);justify-content:center;align-items:center;flex-direction:column;padding:10px;overflow:hidden;}
.lightbox-content{max-width:95%;max-height:90%;display:flex;justify-content:center;align-items:center;}
.lightbox img,.lightbox video{max-width:100%;max-height:90%;border-radius:8px;box-shadow:0 0 20px rgba(0,0,0,0.5);transition:transform 0.2s ease;cursor:grab;z-index:1005;}
.lightbox .close{position:absolute;top:20px;right:30px;color:#fff;font-size:40px;font-weight:bold;cursor:pointer;transition:0.3s;z-index:1010;}
.lightbox .close:hover{color:#ccc;}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;color:#fff;cursor:pointer;padding:10px;user-select:none;transition:0.3s;pointer-events:auto;z-index:1010;}
.lightbox .nav:hover{color:#ccc;}
.lightbox .prev{left:10px;}
.lightbox .next{right:10px;}

/* Modal profesional */
.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7);justify-content:center;align-items:center;}
.modal-content{background:#fff;padding:25px 30px;border-radius:12px;max-width:400px;text-align:center;box-shadow:0 0 15px rgba(0,0,0,0.3);}
.modal-content h3{margin-top:0;font-size:1.4rem;color:#dc3545;}
.modal-content p{margin:15px 0;font-size:1rem;color:#333;}
.modal-buttons{display:flex;justify-content:center;gap:15px;margin-top:20px;}
.modal-buttons button{padding:10px 18px;border:none;border-radius:8px;font-size:14px;cursor:pointer;}
.modal-buttons button.danger{background:#dc3545;color:#fff;}
.modal-buttons button:hover{opacity:0.85;}

/* Responsive */
@media(max-width:768px){
    h1{font-size:1.6rem;}
    .controls button{font-size:13px;padding:10px;min-width:100px;}
}