/* Genie portal. Brand palette taken from the wordmark: blue #0E5295 on black, white outline. */
:root {
  --bg:#0A0D11; --panel:#11161D; --line:#1E2833;
  --blue:#0E5295; --blue-lift:#2C7FD4;
  --text:#EAF0F6; --muted:#8FA3B8; --good:#7FD1A0; --bad:#FF8A80;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}
a { color:var(--blue-lift); text-decoration:none; }
a:hover { text-decoration:underline; }
main { max-width:1100px; margin:0 auto; padding:28px 24px 80px; }

h1 { font-size:28px; margin:0 0 6px; font-weight:700; }
h2 { font-size:18px; margin:28px 0 12px; font-weight:600; color:var(--muted); }
.muted { color:var(--muted); }
.mono { font-family:ui-monospace, Consolas, monospace; font-size:13px; }
.sub { margin:0 0 24px; }
.pad { padding:28px 0; }
.num { text-align:right; }
.back { font-size:14px; color:var(--muted); }

/* header */
.top {
  display:flex; align-items:center; gap:28px;
  padding:14px 24px; background:#05080B; border-bottom:1px solid var(--line);
}
.brand { font-weight:800; letter-spacing:.5px; color:var(--text); font-size:19px; }
.brand span { color:var(--blue-lift); }
.brand.big { font-size:34px; display:block; margin-bottom:22px; text-align:center; }
.top nav { display:flex; gap:18px; flex:1; }
.top nav a { color:var(--muted); padding:4px 0; border-bottom:2px solid transparent; }
.top nav a.on { color:var(--text); border-bottom-color:var(--blue-lift); }
.who { font-size:13px; color:var(--muted); }

/* forms */
input, button, .btn {
  font:inherit; border-radius:8px; border:1px solid var(--line);
  padding:11px 14px; background:var(--panel); color:var(--text);
}
input:focus { outline:2px solid var(--blue); outline-offset:-1px; }
button, .btn { background:var(--blue); border-color:var(--blue); cursor:pointer; }
button:hover, .btn:hover { background:var(--blue-lift); text-decoration:none; }
.btn.ghost { background:transparent; border-color:var(--line); color:var(--muted); }
label { display:block; font-size:13px; color:var(--muted); margin:14px 0 5px; }
.search { display:flex; gap:10px; margin:18px 0 22px; }
.search input { flex:1; }

/* login */
.loginwrap { max-width:380px; margin:12vh auto; padding:0 20px; }
.loginwrap .card { padding:26px; }
.loginwrap input { width:100%; }
.loginwrap button { width:100%; margin-top:22px; padding:13px; }
.alert {
  background:#3A1418; border:1px solid #5A2026; color:#FFC9C9;
  padding:12px 14px; border-radius:8px; margin-bottom:16px; font-size:14px;
}

/* tables */
table { width:100%; border-collapse:collapse; margin-top:4px; }
th {
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line);
}
th.num { text-align:right; }
td { padding:13px 12px; border-bottom:1px solid var(--line); }
tbody tr:hover { background:var(--panel); cursor:pointer; }
.fresh { color:var(--good); }
.stale { color:var(--bad); }

/* cards and vitals */
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.result { margin-bottom:14px; }
.result .when { font-size:14px; margin-bottom:14px; font-weight:600; }
.vitals { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px 22px; }
.vital {
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line); padding-bottom:7px;
}
.vital span { color:var(--muted); font-size:13px; }
.vital b { font-size:17px; font-weight:700; }

@media (max-width:640px) {
  .top { flex-wrap:wrap; gap:12px; }
  .who { width:100%; }
  td, th { padding:10px 8px; }
}