:root {
    --black: #0b0b0b;
    --turquoise: #00bfa6;
    --grey: #1e1e1e;
}

body {
    background-color: var(--black);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

header, footer {
    background: var(--grey);
    text-align: center;
    padding: 1rem;
}

header a, nav a {
    color: var(--turquoise);
    margin: 0 0.5rem;
    text-decoration: none;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 1rem;
    padding: 1rem;
}

.card {
    background: #111;
    border: 1px solid var(--turquoise);
    border-radius: 12px;
    padding: 1rem;
    transition: 0.3s;
}
.card:hover { transform: scale(1.03); }

button, .btn {
    background: var(--turquoise);
    border: none;
    color: var(--black);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    padding: 1rem;
}

input, select {
    padding: .5rem;
    border-radius: 8px;
    border: none;
}

.card.premium {
    border-color: gold;
}

.badge {
    background: gold;
    color: black;
    padding: .2rem .5rem;
    border-radius: .4rem;
    font-size: .8rem;
}

.auth, .profile {
    max-width: 400px;
    margin: 2rem auto;
    background: #111;
    padding: 2rem;
    border-radius: 12px;
}

.auth input, .profile input, .auth select {
    width: 100%;
    margin-bottom: .8rem;
    padding: .6rem;
    border-radius: 8px;
    border: none;
}

.auth button, .profile button {
    width: 100%;
}

.admin-dashboard h2 { text-align:center; margin:1rem 0; }

.admin-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem;
    padding:1rem;
}

.admin-section { padding:1rem; }

.admin-table {
    width:100%;
    border-collapse:collapse;
    color:#fff;
}

.admin-table th, .admin-table td {
    border-bottom:1px solid #333;
    padding:.5rem;
    text-align:left;
}

.admin-table th {
    color: var(--turquoise);
}