:root {
    --ok: #1a7a3c;
    --ok-bg: #e8f5ec;
    --ei-ok: #a02020;
    --ei-ok-bg: #fbe9e9;
    --border: #dfe3e8;
    --text: #22262b;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: #f7f8fa;
    margin: 0;
    padding: 0 24px 48px;
}

header {
    padding: 24px 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

h1 { font-size: 1.5rem; margin: 0 0 12px; }

nav a {
    margin-right: 16px;
    text-decoration: none;
    color: #555;
    padding: 6px 10px;
    border-radius: 6px;
}
nav a.active { background: #22262b; color: #fff; }
nav a.btn { background: var(--ok); color: #fff; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
th { background: #fafbfc; font-weight: 600; }

tr.rivi-ok { background: var(--ok-bg); }
tr.rivi-ei-ok { background: var(--ei-ok-bg); }

.badge { font-weight: 600; }
tr.rivi-ok .badge { color: var(--ok); }
tr.rivi-ei-ok .badge { color: var(--ei-ok); }

.tag {
    font-size: 0.7rem;
    background: #eee;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 4px;
    color: #666;
}

form { max-width: 480px; display: flex; flex-direction: column; gap: 12px; background: #fff; padding: 24px; border-radius: 8px; }
form label { display: flex; flex-direction: column; font-size: 0.9rem; gap: 4px; }
form label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
input, select, textarea { padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; }
button { padding: 10px; border: none; border-radius: 6px; background: var(--ok); color: #fff; cursor: pointer; font-size: 0.95rem; }
.virhe { color: var(--ei-ok); }