/* Design tokens lifted verbatim from tomgames.dev so the two read as one
   system. No new hues were invented for status: OK borrows --space-hi,
   warnings borrow --plum-hi, critical is the brand red. */
:root{
  --bg:#131118; --line:rgba(244,234,216,.10);
  --cream:#f4ead8; --dim:#a99fb8; --dim-2:#7e7590;
  --red:#e8402a; --blue:#2b8fd6;
  --plum:#2a2533; --plum-hi:#f2a65a;
  --space:#0b0d1f; --space-hi:#57d8f0;
  --panel:#0f0d14;
  --r:22px;
  --mono:"JetBrainsMono Nerd Font","JetBrainsMono NF","JetBrains Mono",monospace;

  --ok:var(--space-hi); --warn:var(--plum-hi); --crit:var(--red);

  /* the input background once rgba(244,234,216,.03) is composited over
     --panel; needed as a solid colour for the autofill override below */
  --input-bg:#17151b;

  /* tells the browser to render its own furniture - password reveal icons,
     scrollbars, autofill - in dark. Without it Chrome assumes a light page. */
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-color:#332e3f var(--bg)}
body{
  background:var(--bg); color:var(--cream);
  font-family:var(--mono); font-size:15.5px; line-height:1.7;
  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
a{color:inherit;text-decoration:none}

/* the same drifting starfield as the studio site, at half strength — this is
   a tool, the numbers should stay the loudest thing on the page */
.stars{
  position:fixed;inset:-60px;pointer-events:none;z-index:0;opacity:.18;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 22%,  rgba(244,234,216,.8), transparent 60%),
    radial-gradient(1px 1px     at 27% 64%, rgba(244,234,216,.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 45% 12%, rgba(244,234,216,.7), transparent 60%),
    radial-gradient(1px 1px     at 66% 43%, rgba(244,234,216,.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 84% 70%, rgba(244,234,216,.7), transparent 60%),
    radial-gradient(1px 1px     at 15% 88%, rgba(244,234,216,.5), transparent 60%);
  animation:drift 160s linear infinite;
}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(120px)}}
header,main,footer{position:relative;z-index:1}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;width:100%}
.comment{color:var(--dim-2);font-size:.85rem;margin:0 0 14px;user-select:none}

/* ---------- terminal chrome, same as the studio site ---------- */
.term{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--panel);box-shadow:0 16px 36px -20px rgba(0,0,0,.6);
}
.term .bar{
  display:flex;gap:7px;padding:11px 14px;align-items:center;
  background:rgba(244,234,216,.04);border-bottom:1px solid var(--line);
}
.term .bar i{width:11px;height:11px;border-radius:50%;background:var(--dim-2);opacity:.5;flex:none}
.term .bar i:first-child{background:var(--red);opacity:.9}
.term .bar i:nth-child(2){background:var(--plum-hi);opacity:.9}
.term .bar i:nth-child(3){background:var(--blue);opacity:.9}
/* --dim-2 is the studio site's choice, but there it sits on a lighter card;
   on this panel it fell below comfortable contrast, so one step brighter. */
.term .bar .title{margin:0 auto;color:var(--dim);font-size:.76rem;transform:translateX(-16px)}
.cmd{color:var(--blue);font-weight:700}

/* ---------- the rocket, same behaviour as tomgames.dev ---------- */
.mark-wrap{position:relative;display:inline-block;background:none;border:0;cursor:pointer;padding:0}
.mark-wrap:hover{background:none;transform:none}
.mark{
  width:96px;height:96px;display:block;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.45));
  animation:hover-bob 6s ease-in-out infinite;
}
@keyframes hover-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.mark-wrap .exhaust{
  position:absolute;left:50%;bottom:2px;width:7px;height:0;border-radius:4px;
  transform:translateX(-50%);opacity:0;pointer-events:none;
  background:linear-gradient(to bottom,#ffd28a,rgba(232,64,42,.85),transparent);
}
.mark-wrap.go .mark{animation:launch 1.6s cubic-bezier(.5,-.18,.85,.9) forwards}
.mark-wrap.go .exhaust{animation:flame 1.6s ease-out forwards}
.mark-wrap.back .mark{animation:touchdown .7s ease-out}
@keyframes launch{0%{transform:translateY(0)}12%{transform:translateY(6px)}100%{transform:translateY(-120vh)}}
@keyframes flame{0%{height:0;opacity:0}18%{height:70px;opacity:1}75%{height:110px;opacity:.8}100%{height:0;opacity:0}}
@keyframes touchdown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}

/* the launch has to escape the card, so nothing above may clip it */
.login{overflow:visible}
.rocket-bay{text-align:center;margin-bottom:18px}
/* smaller, inline with the dashboard title */
.top .mark{width:44px;height:44px}
.top .brand{display:flex;align-items:center;gap:14px}

/* ---------- login ---------- */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.login{width:100%;max-width:440px}
.login .term pre{padding:20px 24px 4px;font-size:.9rem;color:var(--dim);white-space:pre-wrap}
.login form{padding:8px 24px 24px;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.8rem;color:var(--dim-2);letter-spacing:.06em;text-transform:uppercase}
input[type=password],input[type=text]{
  font-family:var(--mono);font-size:.95rem;color:var(--cream);
  background:rgba(244,234,216,.03);border:1px solid var(--line);
  border-radius:10px;padding:11px 14px;width:100%;
  transition:border-color .15s ease,background .15s ease;
}
input:focus{border-color:rgba(43,143,214,.55);background:rgba(43,143,214,.06);outline:none}
/* Chrome paints autofilled fields a hard-coded pale yellow that no amount of
   `background` will override — the only lever is an inset box-shadow big
   enough to cover the field, plus text-fill-color for the glyphs. The absurd
   transition delay is the standard belt-and-braces: it defers the yellow
   repaint effectively forever. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--cream);
  -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset;
  box-shadow:0 0 0 1000px var(--input-bg) inset;
  caret-color:var(--cream);
  transition:background-color 9999s ease-in-out 0s;
}
button{
  font-family:var(--mono);font-size:.9rem;font-weight:700;cursor:pointer;
  color:var(--cream);background:rgba(232,64,42,.10);
  border:1px solid rgba(232,64,42,.55);border-radius:10px;padding:11px 18px;
  transition:background .15s ease,transform .15s ease;
}
button:hover{background:rgba(232,64,42,.2);transform:translateY(-1px)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.err{color:var(--red);font-size:.85rem;min-height:1.3em}
.err:empty{min-height:0}

/* ---------- dashboard ---------- */
/* Horizontal padding repeated, not 0: this rule sits after .wrap and would
   otherwise zero out its `padding:0 24px` and let the row run off the right
   edge. Same trap as header.wrap on the studio site. */
.top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding:34px 24px 22px;
}
.top h1{font-size:1.5rem;font-weight:800;letter-spacing:.03em}
.top h1 .t{color:var(--red)}
.top h1 .g{color:var(--blue)}
.top .meta{color:var(--dim-2);font-size:.82rem;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:6px}
.dot.stale{background:var(--warn)}
.dot.dead{background:var(--crit)}
.linkish{color:var(--dim);border-bottom:1px dotted var(--dim-2);cursor:pointer;background:none;border-width:0 0 1px;padding:0;font-size:.82rem}
.linkish:hover{color:var(--cream);background:none;transform:none}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px;padding-bottom:26px}
.panel{border:1px solid var(--line);border-radius:14px;background:rgba(244,234,216,.02);padding:18px 22px 20px}
.panel h2{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-2);font-weight:700;margin-bottom:14px}

/* the tomfetch key/value block, reused for host facts */
.kv{font-size:.88rem;line-height:1.95;color:var(--dim)}
.kv div{display:flex;gap:12px}
.kv .k{color:var(--blue);font-weight:700;flex:none;width:9.5ch}
.kv .v{color:var(--dim);word-break:break-word}

.stat{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.stat .lbl{color:var(--dim);font-size:.86rem}
.stat .val{font-weight:700;font-size:.95rem}
/* NOT `.bar` — that name belongs to the terminal title bar above, and the
   height/overflow here was collapsing it to 8px and clipping its text. */
.meter{height:8px;border-radius:999px;background:rgba(244,234,216,.07);overflow:hidden;margin:2px 0 16px}
.meter span{display:block;height:100%;border-radius:999px;background:var(--ok);transition:width .5s ease,background .5s ease}
.meter span.warn{background:var(--warn)}
.meter span.crit{background:var(--crit)}
.sub{color:var(--dim-2);font-size:.78rem;margin:-12px 0 16px}

table{width:100%;border-collapse:collapse;font-size:.84rem}
th{
  text-align:left;color:var(--dim-2);font-weight:700;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;padding:0 8px 8px 0;
}
td{padding:5px 8px 5px 0;color:var(--dim);border-top:1px solid var(--line);white-space:nowrap}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.name{color:var(--cream);max-width:22ch;overflow:hidden;text-overflow:ellipsis}
.tbl-scroll{overflow-x:auto}

.pill-state{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--dim);
}
.pill-state.up{color:var(--ok);border-color:rgba(87,216,240,.45);background:rgba(87,216,240,.08)}
.pill-state.down{color:var(--crit);border-color:rgba(232,64,42,.5);background:rgba(232,64,42,.08)}

footer{border-top:1px solid var(--line);padding:22px 0 30px;color:var(--dim-2);font-size:.82rem;margin-top:8px}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){
  .stars{animation:none}
  .meter span{transition:none}
  button:hover{transform:none}
  /* the rocket still responds to a click, it just doesn't fly */
  .mark{animation:none}
  .mark-wrap.go .mark,.mark-wrap.go .exhaust,.mark-wrap.back .mark{animation:none}
}