* { margin:0; padding:0; box-sizing:border-box; font-family:Arial, sans-serif; }
body { background:#f4f4f4; color:#333; line-height:1.6; }

.container { max-width:1200px; margin:0 auto; padding:20px; }
header { text-align:center; margin-bottom:30px; }
header h1 { font-size:2.5em; color:#2c3e50; }
header p { color:#7f8c8d; }

.search-bar { display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap; }
.search-bar input, .search-bar select {
  padding:12px; border:1px solid #ddd; border-radius:5px; flex:1; min-width:200px;
}

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
.card {
  background:white; border-radius:10px; padding:20px; box-shadow:0 4px 15px rgba(0,0,0,0.1);
  transition:0.3s;
}
.card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15); }
.card .icon { font-size:50px; color:#3498db; margin-bottom:15px; }
.card h3 { margin:10px 0; color:#2c3e50; }
.card p { font-size:0.95em; color:#555; }
.desc { font-style:italic; margin:10px 0; }
.btn-download {
  background:#e74c3c; color:white; border:none; padding:12px 20px;
  border-radius:5px; cursor:pointer; width:100%; margin-top:15px;
  transition:0.3s;
}
.btn-download:hover { background:#c0392b; }

/* Modal */
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); }
.modal-content { background:white; margin:10% auto; padding:30px; width:90%; max-width:500px; border-radius:10px; position:relative; }
.close { position:absolute; top:10px; right:15px; font-size:28px; cursor:pointer; }

/* Admin Styles */
.login-body { background:#3498db; display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-container { background:white; padding:40px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.3); width:90%; max-width:400px; }
.input-group { position:relative; margin:20px 0; }
.input-group i { position:absolute; left:15px; top:15px; color:#777; }
.input-group input { width:100%; padding:15px 15px 15px 45px; border:1px solid #ddd; border-radius:5px; }
.btn-login { width:100%; padding:15px; background:#2c3e50; color:white; border:none; border-radius:5px; font-size:16px; }

.admin-container { display:flex; min-height:100vh; }
.sidebar { width:250px; background:#2c3e50; color:white; padding:20px; }
.sidebar a { display:block; color:white; padding:15px; text-decoration:none; margin:10px 0; border-radius:5px; }
.sidebar a:hover { background:#34495e; }
.main-content { flex:1; padding:30px; background:#ecf0f1; }
.btn-upload { background:#27ae60; color:white; padding:15px 30px; border:none; border-radius:5px; }
.file-table { width:100%; background:white; border-collapse:collapse; margin-top:20px; }
.file-table th, .file-table td { padding:12px; border:1px solid #ddd; text-align:left; }
.btn-delete { color:red; text-decoration:none; }

@media (max-width: 768px) {
  .search-bar { flex-direction:column; }
  .admin-container { flex-direction:column; }
  .sidebar { width:100%; }
}