:root {
    --bg: #f3f6f8;
    --surface: #ffffff;
    --text: #1d2a33;
    --muted: #64748b;
    --border: #dde4ea;
    --primary: #0e7490;
    --primary-dark: #0b5d73;
    --danger-bg: #fdecec;
    --danger: #b42318;
    --ok: #15803d;
    --off: #b42318;
    --unknown: #64748b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
}

h1 { font-size: 22px; margin: 0; }

.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar__brand { font-weight: 600; color: var(--primary); }

.topbar__user { display: flex; align-items: center; gap: 12px; }
.topbar__user form { margin: 0; }

.badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e0f2f7;
    color: var(--primary-dark);
    font-size: 12px;
}

.page { max-width: 1400px; margin: 0 auto; padding: 28px 32px; }

.page__header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.empty { padding: 24px; color: var(--muted); }

.table { width: 100%; border-collapse: collapse; overflow: hidden; }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #f8fafb; }
.table tr:last-child td { border-bottom: none; }
.table .actions { text-align: right; }

.status { font-weight: 600; }
.status--online { color: var(--ok); }
.status--offline { color: var(--off); }
.status--unknown { color: var(--unknown); }

.button {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.button:hover { background: var(--primary-dark); }
.button--ghost { background: transparent; color: var(--primary); border: 1px solid var(--border); }
.button--ghost:hover { background: #eef6f8; }

/* Login: wide and low, for desktop screens */
.login {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
    align-items: center;
    max-width: 1100px;
    margin: 8vh auto 0;
}
.login__intro p { color: var(--muted); }
.login__form { padding: 24px; display: flex; flex-direction: column; gap: 16px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; color: var(--muted); }
.field input {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
}
.field input:focus { outline: 2px solid #a5d8e6; border-color: var(--primary); }

.alert {
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--danger-bg);
    color: var(--danger);
}