:root {
    --bg: #0a0a0a;
    --bg2: #161616;
    --text: #ffffff;
    --text2: #a0a0a0;
    --text3: #222222;
    --accent: #6366f1;
    --accent-glow: rgba(99, 102, 241, 0.4);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, sans-serif;
    min-height:100vh;
}

header {
    padding:10px;
    border-bottom:1px solid var(--text3);
    text-align:center;
}

main {
    max-width:1200px;
    margin:auto;
    padding:10px;
}

footer {
    padding:10px;
    text-align:center;
    border-top:1px solid var(--text3);
    color:var(--text2);
}

.sites {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:10px;
    margin:20px auto;
}

.site-card {
    background-color: var(--bg2);
    border: 1px solid #222;
    border-radius: 16px;
    padding: 15px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.site-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px -10px var(--accent-glow);
}

.site-icon {
    width:48px;
    height:48px;
    border-radius:12px;
    background:#222;
    padding:4px;
    object-fit:contain;
}

.site-name { font-weight:600; }
.site-info span { color:var(--text2); font-size:.9rem; }