:root {
    --bg: #111827;
    --card: #1f2937;
    --border: #374151;
    --text: #f9fafb;
    --accent: #3b82f6;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui;
}

nav {
    display: flex;
    gap: 1rem;

    padding: 1rem;

    border-bottom: 1px solid var(--border);
}

nav a {
    color: white;
    text-decoration: none;
}

main {
    max-width: 1400px;

    margin: auto;

    padding: 2rem;
}

.cards {
    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap: 1rem;
}

.card {
    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 1rem;
    text-align: left;
}

tr {
    border-bottom: 1px solid var(--border);
}

input,
select,
button {

    background: #1f2937;

    color: white;

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: .8rem;
}

button {
    cursor: pointer;
}

button:hover {
    background: var(--accent);
}

@media(max-width:768px){

    nav{
        flex-wrap:wrap;
    }

    table{
        display:block;
        overflow:auto;
    }

}