body, html { 
  margin:0; 
  padding:0; 
  height:100%; 
  font-family:"Microsoft YaHei",sans-serif; 
  color:#fff; 
  overflow:hidden; 
}

#bg { 
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background:rgb(0,0,0); 
  z-index:-1; 
}

.container { 
  position:relative; 
  width:60%; 
  margin:40px auto; 
  padding:20px; 
  background:transparent; 
  border-radius:15px; 
  box-shadow:none; 
}

h1 { 
  text-align:center; 
  margin-bottom:10px; 
}

.header h1 { 
  margin:0; 
  line-height:48px; 
  display:inline-block; 
}

.search-box { 
  display:flex; 
  justify-content:center; 
  margin:20px 0; 
  gap:0; 
}

.search-box input { 
  padding:10px; 
  width:300px; 
  border:none; 
  border-radius:8px 0 0 8px; 
  outline:none; 
  background:rgba(255,255,255,0.18); 
  color:#fff; 
}

.search-box button { 
  padding:10px 20px; 
  border:none; 
  background:rgba(0,123,255,0.85); 
  color:white; 
  cursor:pointer; 
  border-radius:0; 
  margin:0; 
}

.search-box button:hover { 
  background:rgba(0,123,255,0.95); 
}

.search-box button:last-of-type { 
  border-radius:0 8px 8px 0; 
}

.search-box button + button { 
  margin-left:-1px; 
}

.info-box { 
  text-align:center; 
  margin-bottom:20px; 
}

.admin-controls { 
  display:none; 
  margin:15px 0; 
  text-align:center; 
}

.admin-controls button { 
  margin:0 10px; 
  padding:8px 15px; 
  border:none; 
  border-radius:5px; 
  cursor:pointer; 
}

.btn-upload { 
  background:#ffc107; 
}

.btn-add { 
  background:#17a2b8; 
}

.btn-list { 
  background:#28a745; 
}

.btn-logs { 
  background:#6f42c1; 
}

.btn-delete { 
  background:#dc3545; 
}

.header { 
  position:relative; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  margin-bottom:10px; 
  gap:0; 
}

.logo { 
  position:static; 
  width:48px; 
  height:48px; 
  border-radius:50%; 
  border:2px solid #fff; 
  background:rgba(255,255,255,0.15); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-weight:bold; 
  color:#fff; 
  letter-spacing:1px; 
  cursor:pointer; 
  user-select:none; 
  margin-right:0; 
}

.logo:hover { 
  background:rgba(255,255,255,0.25); 
}

.modal { 
  display:none; 
  position:fixed; 
  z-index:10; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%; 
  background:rgba(0,0,0,0.6); 
}

.modal-content { 
  position:relative; 
  background:#1e1e1e; 
  margin:12% auto; 
  padding:20px; 
  border-radius:12px; 
  width:320px; 
  box-shadow:0 0 20px rgba(0,0,0,0.8); 
  text-align:center; 
}

.modal-content input, .modal-content textarea { 
  width:90%; 
  margin:8px 0; 
  padding:10px; 
  border:none; 
  border-radius:8px; 
  outline:none; 
}

.modal-content button { 
  padding:8px 15px; 
  border:none; 
  border-radius:6px; 
  background:#28a745; 
  color:#fff; 
  cursor:pointer; 
}

.modal-content .close { 
  position:absolute; 
  right:16px; 
  top:10px; 
  font-size:24px; 
  cursor:pointer; 
}

table { 
  width:100%; 
  border-collapse:collapse; 
  background:rgba(255,255,255,0.1); 
}

th, td { 
  padding:10px; 
  border-bottom:1px solid rgba(255,255,255,0.3); 
  text-align:center; 
}

th { 
  background:rgba(0,0,0,0.3); 
}

.small { 
  font-size:12px; 
  color:rgba(255,255,255,0.7); 
}

.hidden { 
  display:none; 
}

.data-table { 
  width:100%; 
  margin-top:10px; 
  background:rgba(255,255,255,0.1); 
  border-collapse:collapse; 
}

.data-table th, .data-table td { 
  padding:8px; 
  border:1px solid rgba(255,255,255,0.2); 
  text-align:center; 
}

.data-table th { 
  background:rgba(0,0,0,0.4); 
}

.pagination { 
  margin-top:15px; 
  text-align:center; 
}

.pagination button { 
  margin:0 5px; 
  padding:5px 10px; 
  background:rgba(0,123,255,0.7); 
  border:none; 
  border-radius:3px; 
  color:white; 
  cursor:pointer; 
}

.pagination button:disabled { 
  background:rgba(255,255,255,0.3); 
  cursor:not-allowed; 
}

.pagination span { 
  margin:0 10px; 
}
.btn-users {
  background: #fd7e14;
}