/* themes/red.css */
:root {
    --bg: #0f0f0f;
    --bg-surface: #1a1a1a;
    --primary: #e53935;
    --primary-hover: #c62828;
    --text: #f0f0f0;
    --text-muted: #888;
    --border: #2a2a2a;
    --input-bg: #222;
    --shadow: rgba(229, 57, 53, 0.15);
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: sans-serif;
}

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

input, select, textarea {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px;
    width: 100%;
}

input:focus { outline: 1px solid var(--primary); }

button, .btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    width: 100%;
}

button:hover, .btn:hover { background: var(--primary-hover); }

.box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 4px 20px var(--shadow);
}

.error { color: var(--primary); font-size: 0.9rem; margin-bottom: 16px; }
.ok { color: #4caf50; font-size: 0.9rem; }