:root {
    --bg:#0f1115;
    --panel:#1a1d24;
    --text:#eaeaf0;
    --muted:#9aa0aa;
    --accent:#ff3b3b;
    --border:#2a2e38;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg);
    color:var(--text);
}

a{color:var(--accent);text-decoration:none}

header{
    background:var(--panel);
    padding:1rem;
    border-bottom:1px solid var(--border);
}

header h1{margin:0;font-size:1.2rem}

nav a{margin-right:1rem;font-size:.9rem}

.container{
    max-width:1100px;
    margin:auto;
    padding:1rem;
}

.card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:6px;
    padding:1rem;
    margin-bottom:1rem;
}

input,button{
    width:100%;
    padding:.7rem;
    margin-bottom:.7rem;
    border-radius:5px;
    border:1px solid var(--border);
    background:#111;
    color:var(--text);
}

button{
    background:var(--accent);
    border:none;
    font-weight:bold;
    cursor:pointer;
}

footer{
    text-align:center;
    padding:1rem;
    font-size:.8rem;
    color:var(--muted);
}

@media(min-width:768px){
    header{display:flex;justify-content:space-between;align-items:center}
}