body{
background:#0b1020;
color:white;
font-family:Inter,sans-serif;
margin:0;
}

.header{
text-align:center;
padding:40px 20px;
}

.header h1{
font-size:36px;
margin-bottom:10px;
}

.header p{
color:#9ca3af;
}

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

.mods-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.mod-card{
background:#1b2240;
border-radius:16px;
padding:20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
transition:0.2s;
}

.mod-card:hover{
transform:translateY(-5px);
}

.mod-image{
width:50%;
height:150px;
object-fit:cover;
border-radius:10px;
margin-bottom:15px;
background: none;
}

.mod-card h3{
font-size:20px;
margin-bottom:10px;
}

.mod-desc{
font-size:14px;
color:#cbd5e1;
margin-bottom:15px;
}

.mod-permissions{
display:flex;
flex-direction:column;
gap:6px;
font-size:13px;
margin-bottom:15px;
}

.perm{
display:flex;
justify-content:center;
gap:6px;
color:#94a3b8;
}

.btn-workshop{
display:inline-block;
padding:10px 18px;
border-radius:8px;
background:#2563eb;
color:white;
text-decoration:none;
font-weight:600;
}

.btn-workshop:hover{
background:#1d4ed8;
}

.notice {
    background-color: #1e1e1e;
    border-left: 4px solid #4caf50;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #fff;
    border-radius: 10px;
}

.notice a {
    color: #4caf50;
    text-decoration: underline;
}

.footer {
    background-color: #111;
    color: #aaa;
    text-align: center;
    padding: 16px 20px;
    font-size: 0.9rem;
    border-top: 1px solid #333;
    margin-top: 40px;
}
.footer a {
    color: #4caf50;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}