/* ธีมเดียวกับแอป: พื้นดำ · ตัวแดง #ed1c24 · ฟอนต์ Space Mono */
@font-face {
  font-family: 'Space Mono';
  font-weight: 400;
  src: url('fonts/SpaceMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Mono';
  font-weight: 700;
  src: url('fonts/SpaceMono-Bold.ttf') format('truetype');
}

:root {
  --bg: #0a0a0a;
  --red: #ed1c24;
  --red-dim: rgba(237, 28, 36, 0.5);
  --red-faint: rgba(237, 28, 36, 0.16);
  --white: #f2f2f2;
  --gray: #a0a0a0;
  --line: #2c2c2c;
  --mono: 'Space Mono', 'Leelawadee UI', 'Noto Sans Thai', monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--white);
  font-family: var(--mono);
  font-size: 15px;
}

h1 { margin: 0; font-size: 1.15rem; letter-spacing: 0.08em; color: var(--red); }
h1 span { color: var(--gray); font-weight: 400; }
h2 { margin: 28px 0 12px; font-size: 0.95rem; letter-spacing: 0.1em; }

button, input, select {
  font: inherit;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--line);
  min-height: 42px;
  padding: 8px 12px;
}
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--red-dim); background: var(--red-faint); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--red); border-color: var(--red); }
button.primary:hover:not(:disabled) { background: #c8141b; }
button.danger { color: #ff8a8e; }
input, select { width: 100%; background: #111; }
select option { background: #111; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.login { max-width: 400px; margin: 12vh auto 0; }
.login form { display: grid; gap: 12px; margin-top: 24px; }

.app { max-width: 1100px; margin: 0 auto; }
.topbar, .summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.summary { margin-top: 20px; padding: 14px 0; border-block: 1px solid var(--line); }
.summary p { margin: 0; }

.error, .message { min-height: 1.4em; margin: 10px 0 0; font-size: 0.85rem; }
.error { color: #ff8a8e; }
.empty { color: var(--gray); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.card { min-width: 0; padding: 16px; border: 1px solid var(--line); background: #0f0f0f; }
.card-title { display: flex; align-items: center; gap: 8px; }
.card-title input { flex: 1; min-width: 0; }
.status-line { margin: 10px 0 0; color: var(--gray); font-size: 0.82rem; overflow-wrap: anywhere; }
.status-line.online { color: var(--white); }
.status-line.alert { color: #ff8a8e; }
.settings { display: grid; gap: 10px; margin-top: 14px; }
.settings label { display: grid; gap: 4px; font-size: 0.82rem; color: var(--gray); }
.settings .check { display: flex; align-items: center; gap: 8px; }
.settings .check input { width: 20px; min-height: 20px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.card-actions button { flex: 1 1 auto; }