*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,sans-serif;
}

body{
background:#0b0f1a;
color:#e5e7eb;
}


.header{
display:flex;
justify-content:space-between;
align-items:center;

padding:18px 28px;

background:#020617;
border-bottom:1px solid #1f2937;
}

.header-left{
display:flex;
align-items:center;
gap:12px;
}

.logo{
width:38px;
height:38px;

display:flex;
align-items:center;
justify-content:center;

border-radius:10px;

background:linear-gradient(135deg,#6366f1,#a855f7);
}

.logo i{
color:white;
}

.header h1{
font-size:20px;
font-weight:700;
}

.header p{
font-size:13px;
color:#9ca3af;
}


.container{
max-width:1100px;
margin:auto;
padding:30px 20px;
}


.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:16px;
margin-bottom:30px;
}

.stat-card{
display:flex;
align-items:center;
gap:14px;

background:#111827;
border:1px solid #1f2937;

padding:18px;
border-radius:12px;

transition:.2s;
}

.stat-card:hover{
border-color:#6366f1;
background:#0f172a;
}

.stat-icon{
width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

border-radius:10px;

background:linear-gradient(135deg,#6366f1,#a855f7);
}

.stat-icon i{
color:white;
}

.stat-number{
font-size:22px;
font-weight:700;
}

.stat-label{
font-size:13px;
color:#9ca3af;
}

.page-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.page-header h2{
font-size:24px;
font-weight:700;
}

.page-header p{
font-size:14px;
color:#9ca3af;
}

.btn-gradient{
background:linear-gradient(90deg,#6366f1,#a855f7);
border:none;

padding:10px 16px;

border-radius:10px;
color:white;

font-weight:600;

cursor:pointer;

display:flex;
align-items:center;
gap:6px;
}

.btn-gradient:hover{
opacity:.9;
}

.btn-secondary{
background:#1f2937;
border:none;

padding:10px 16px;

border-radius:10px;

color:#e5e7eb;
cursor:pointer;
}

.gang-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:16px;
}

.gang-card-link{
text-decoration:none;
color:inherit;
}

.gang-card{
background:#111827;

border:1px solid #1f2937;
border-radius:14px;

padding:18px;

transition:.2s;
}

.gang-card:hover{
border-color:#6366f1;
background:#0f172a;
transform:translateY(-3px);
}

.gang-card h3{
font-size:16px;
margin-bottom:6px;
}

.tag{
font-size:11px;
padding:3px 8px;
border-radius:999px;
color:white;
margin-left:6px;
}

.gang-desc{
font-size:13px;
color:#9ca3af;
margin-bottom:10px;
}

.gang-info{
display:flex;
justify-content:space-between;

font-size:12px;
color:#9ca3af;
}

.modal{
display:none;

position:fixed;
inset:0;

background:rgba(0,0,0,.7);

align-items:center;
justify-content:center;
}

.modal-content{
background:#111827;

border:1px solid #1f2937;
border-radius:14px;

padding:24px;
width:400px;
}

.modal-content h3{
margin-bottom:16px;
}

.modal-content input,
.modal-content textarea{
width:100%;

margin-bottom:12px;

padding:10px;

background:#1f2937;
border:none;

border-radius:8px;

color:white;
}

.modal-buttons{
display:flex;
justify-content:flex-end;
gap:10px;
}

.gang-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.gang-actions button {
  background:#ef4444;
  color:white;
  border:none;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
}
.gang-actions button:hover {
  opacity:0.9;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right .btn-gradient {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  color: white;
  background: linear-gradient(90deg, #5865F2, #7289DA);
  transition: opacity 0.2s;
}
.header-right .btn-gradient:hover {
  opacity: 0.9;
}

.header-right .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #6366f1;
}

.header-right p {
  color: #e5e7eb;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.header-right .btn-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #e5e7eb;
  background: #1f2937;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
.header-right .btn-secondary:hover {
  opacity: 0.9;
}