:root {
  --bg: #0d0d0d; --surface: #111; --border: #222; --border2: #1e1e1e;
  --text: #e0e0e0; --text2: #ccc; --text3: #bbb;
  --muted: #555; --muted2: #444; --muted3: #3a3a3a;
  --btn-bg: #1a1a1a; --btn-border: #333; --row-hover: #171717; --row-border: #181818;
  --accent: #4caf50; --accent-bg: #0f2a0f; --accent-border: #2a4a2a;
  --warn: #ffc107; --warn-bg: #2a2a0f; --warn-border: #4a4a2a;
  --err: #ef5350; --err-bg: #2a0f0f; --err-border: #4a2a2a;
  --flash-bg: #1a2a3a;
  --row-odd: #0f0f0f; --row-even: #111;
  --scroll-thumb: #2c2c2c; --scroll-thumb-hover: #3d3d3d;
}
body.light {
  --bg: #f2f2f2; --surface: #fff; --border: #ddd; --border2: #e8e8e8;
  --text: #111; --text2: #333; --text3: #444;
  --muted: #777; --muted2: #666; --muted3: #aaa;
  --btn-bg: #f0f0f0; --btn-border: #ccc; --row-hover: #f5f5f5; --row-border: #eee;
  --accent: #2e7d32; --accent-bg: #e8f5e9; --accent-border: #a5d6a7;
  --warn: #e65100; --warn-bg: #fff3e0; --warn-border: #ffcc80;
  --err: #c62828; --err-bg: #ffebee; --err-border: #ef9a9a;
  --flash-bg: #dbeafe;
  --row-odd: #f9f9f9; --row-even: #fff;
  --scroll-thumb: #cfcfcf; --scroll-thumb-hover: #b4b4b4;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Courier New', monospace; background: var(--bg); color: var(--text); min-height: 100vh; transition: background 0.2s, color 0.2s; }

header { padding: 1.25rem 2rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; }
header h1 { font-size: 1.4rem; letter-spacing: 0.15em; color: var(--text); flex: 1; }
header .serial { font-size: 0.75rem; color: var(--muted); }
.mode-btn { background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--text2); padding: 0.3rem 0.65rem; cursor: pointer; font-family: inherit; font-size: 0.85rem; border-radius: 3px; }
.mode-btn:hover { border-color: var(--muted); }

.state-badge { font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 3px; background: var(--btn-bg); color: var(--muted2); border: 1px solid var(--btn-border); white-space: nowrap; }
.state-badge.live { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }
.state-badge.down { background: var(--err-bg); color: var(--err); border-color: var(--err-border); }

main { max-width: 900px; margin: 1.5rem auto; padding: 0 1.5rem 3rem; }

table.status-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.status-table thead th { text-align: left; background: var(--surface); color: var(--muted2); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; border-bottom: 1px solid var(--border2); padding: 0.5rem 0.7rem; }
table.status-table tbody td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--row-border); vertical-align: middle; font-variant-numeric: tabular-nums; }
table.status-table tbody tr:nth-child(odd)  td { background: var(--row-odd); }
table.status-table tbody tr:nth-child(even) td { background: var(--row-even); }
table.status-table tbody tr:hover td { background: var(--row-hover); }
td.c-printer { color: var(--text); font-weight: bold; white-space: nowrap; }
td.c-job { color: var(--text2); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.c-op { color: var(--text3); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.c-age { color: var(--muted2); }
td.c-num { color: var(--text2); white-space: nowrap; }
td.c-num.flash, .state-badge.flash { background: var(--flash-bg) !important; transition: background 1.2s ease; }

#toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); color: var(--text2); padding: 0.6rem 1.1rem; border-radius: 6px; font-size: 0.85rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 20; }
#toast.show { opacity: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }