body  { font-family: monospace; background: #111; color: #eee; padding: 16px; margin: 0; }
h1    { margin: 0 0 12px; font-size: 20px; }
h2    { font-size: 13px; color: #c0c0c0; margin: 20px 0 8px; text-transform: uppercase; }
a     { color: #00c9a7; text-decoration: none; }
a:hover { text-decoration: underline; }
.card { background: #1a1a1a; border: 1px solid #2a2a2a; padding: 12px; margin-bottom: 12px; }
.row  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.muted { color: #bdbdbd; }
.small { font-size: 12px; }

.nav { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid #2a2a2a; padding-bottom: 10px; }
.nav a { color: #a8a8a8; font-size: 11px; padding: 5px 12px; border: 1px solid transparent; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.nav a:hover  { color: #ccc; text-decoration: none; }
.nav a.active { color: #00c9a7; border-color: #00c9a7; }
.nav .spacer { flex: 1; }

.badge { font-size: 11px; padding: 2px 6px; border: 1px solid #444; color: #b8b8b8; white-space: nowrap; }
.badge.on   { border-color: #00c9a7; color: #00c9a7; }
.badge.warn { border-color: #f0a500; color: #f0a500; }
.badge.err  { border-color: #ff6b6b; color: #ff6b6b; }
.badge.act  { border-color: #7b61ff; color: #7b61ff; }

table { width: 100%; border-collapse: collapse; }
th    { text-align: left; font-size: 11px; color: #b8b8b8; text-transform: uppercase; padding: 5px 8px; border-bottom: 1px solid #2a2a2a; }
td    { padding: 5px 8px; border-bottom: 1px solid #222; font-size: 13px; vertical-align: top; color: #e8e8e8; }
td.num { text-align: right; color: #00c9a7; }
tr.lvl-0 td, tr.lvl-1 td { color: #ff6b6b; }
tr.lvl-2 td { color: #ffb52e; }
td.msg { white-space: pre-wrap; word-break: break-word; }

input[type=text], input[type=password], input[type=number], input[type=datetime-local], select {
    background: #111; border: 1px solid #2a2a2a; color: #eee; font-family: monospace; font-size: 13px; padding: 6px 8px; border-radius: 3px;
}
input:focus, select:focus { outline: none; border-color: #00c9a7; }
input[type=file] { color: #c8c8c8; font-family: monospace; font-size: 12px; }
label { font-size: 11px; color: #b8b8b8; text-transform: uppercase; letter-spacing: 0.5px; }
.field { display: flex; flex-direction: column; gap: 4px; }
form.inline { display: inline; }

button, .btn {
    background: #1a1a1a; border: 1px solid #444; color: #c8c8c8; font-family: monospace; font-size: 12px;
    padding: 5px 10px; cursor: pointer; border-radius: 3px;
}
button:hover, .btn:hover { border-color: #555; color: #ccc; }
button.primary { background: #00c9a7; border-color: #00c9a7; color: #0a0a0a; font-weight: bold; }
button.primary:hover { background: #00e0ba; }
button.danger { border-color: #ff6b6b; color: #ff6b6b; }
button:disabled { opacity: 0.5; cursor: default; }

.flash { padding: 8px 12px; margin-bottom: 12px; border: 1px solid #00c9a7; color: #00c9a7; font-size: 12px; }
.flash.err { border-color: #ff6b6b; color: #ff6b6b; }
.token { font-size: 13px; color: #f0a500; word-break: break-all; user-select: all; }
.bar-wrap { height: 6px; background: #2a2a2a; border-radius: 3px; overflow: hidden; width: 120px; display: inline-block; vertical-align: middle; }
.bar { display: block; height: 100%; background: #00c9a7; }
.login { max-width: 320px; margin: 80px auto; }