/* mcpatrol.com's palette, from site/site.css — the console is the product,
   not a separate admin tool. */
:root {
  --bg:#0A0F1A; --surface:#0F1626; --raised:#14203A; --border:#1E3A5F;
  --cyan:#38BDF8; --green:#34D399; --amber:#FBBF24; --red:#F87171;
  --text:#E6EDF7; --sub:#B7C7DE; --meta:#7E96B8;
  --mono: ui-monospace,"Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text);
       font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--cyan); text-decoration:none; }
a:hover { text-decoration:underline; }

header { position:sticky; top:0; background:rgba(10,15,26,.85); backdrop-filter:blur(8px);
         border-bottom:1px solid var(--border); z-index:10; }
.nav { display:flex; align-items:center; gap:18px; padding:14px 22px;
       max-width:1060px; margin:0 auto; flex-wrap:wrap; }
.brand { font-size:1.15rem; font-weight:700; color:var(--text); }
.brand:hover { text-decoration:none; }
.mcp { color:var(--cyan); }
.links { display:flex; gap:20px; font-size:.95rem; flex-wrap:wrap; }
.links a { color:var(--sub); }
.links a.on { color:var(--cyan); }
.who { margin-left:auto; color:var(--meta); font-size:.85rem; }

main { max-width:1060px; margin:0 auto; padding:40px 22px 72px; }
.kicker { font-family:var(--mono); font-size:.78rem; letter-spacing:.12em;
          color:var(--cyan); text-transform:uppercase; }
h1 { font-size:clamp(1.6rem,3.4vw,2.1rem); line-height:1.2; letter-spacing:-.01em;
     margin:8px 0 22px; }
h2 { font-size:1.2rem; margin:34px 0 12px; }

.card { background:var(--surface); border:1px solid var(--border);
        border-radius:14px; padding:20px; margin:0 0 16px; }
.card.problem { border-color:#5A4520; }
a.card { display:block; color:var(--text); }
a.card:hover { text-decoration:none; border-color:var(--cyan); }
.card h3 { margin:0 0 4px; font-size:1rem; }
.cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }

.meta { color:var(--meta); font-size:.9rem; overflow-wrap:anywhere; }
.sub { color:var(--sub); }
.good { color:var(--green); }
.warn { color:var(--amber); }
.bad  { color:var(--red); }

.flash { border-radius:10px; padding:10px 14px; margin:0 0 18px; font-size:.95rem;
         border:1px solid var(--border); background:var(--surface); }
.flash.good { border-color:#1F6B4C; }
.flash.bad  { border-color:#5A4520; }

.figures { display:flex; flex-wrap:wrap; gap:44px; }
.figure .n { font-size:2.1rem; font-weight:650; letter-spacing:-.01em; }
.figure .k { font-family:var(--mono); color:var(--meta); font-size:.74rem;
             text-transform:uppercase; letter-spacing:.1em; }

dl { display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.25rem; }
dt { color:var(--meta); }
dd { overflow-wrap:anywhere; }
code { font-family:var(--mono); font-size:.9em; background:var(--raised);
       border:1px solid var(--border); border-radius:5px; padding:1px 6px; }

table { border-collapse:collapse; width:100%; font-size:.93rem; }
th { text-align:left; font-family:var(--mono); color:var(--meta); font-weight:600;
     font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
     padding:0 .75rem .5rem 0; }
td { border-top:1px solid var(--border); padding:.6rem .75rem; vertical-align:top;
     overflow-wrap:anywhere; }
td:first-child, th:first-child { padding-left:0; }
td.num, th.num { text-align:right; padding-right:0; font-variant-numeric:tabular-nums; }
.scroll { overflow-x:auto; }

/* One vocabulary of state across the app, the backend and this page. A colour
   means the same thing in all three. */
.pill { font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
        text-transform:uppercase; border:1px solid var(--border); border-radius:999px;
        padding:2px 9px; color:var(--meta); white-space:nowrap; display:inline-block; }
.pill.healthy         { border-color:var(--green); color:var(--green); }
.pill.auth_required,
.pill.payment_required,
.pill.rate_limited    { border-color:var(--amber); color:var(--amber); }
.pill.disconnected,
.pill.critical        { border-color:var(--red);   color:var(--red); }

input, select { font:inherit; color:var(--text); background:var(--raised);
       border:1px solid var(--border); border-radius:8px; padding:9px 11px; width:100%; }
input:focus, select:focus { outline:none; border-color:var(--cyan); }
label { display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
        text-transform:uppercase; color:var(--meta); margin:0 0 5px; }
.field { margin:0 0 14px; }
.row { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); }

.btn { display:inline-block; padding:10px 18px; border-radius:10px; font-weight:600;
       font-size:.94rem; cursor:pointer; border:0; font-family:inherit; }
.btn-primary { background:var(--cyan); color:#06121F; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-ghost { border:1px solid var(--border); color:var(--sub); background:transparent; }
.btn-ghost:hover { border-color:var(--cyan); color:var(--cyan); }
.btn-danger { border:1px solid #5A2A2A; color:var(--red); background:transparent; }
.btn-danger:hover { border-color:var(--red); }
.btn[disabled] { opacity:.5; cursor:default; filter:none; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.auth { max-width:26rem; margin:6vh auto 0; }
.auth .brand { font-size:1.5rem; display:block; margin-bottom:6px; }

footer { border-top:1px solid var(--border); padding:26px 0 40px;
         color:var(--meta); font-size:.9rem; }
footer .wrap { max-width:1060px; margin:0 auto; padding:0 22px;
               display:flex; gap:12px 28px; flex-wrap:wrap; align-items:center; }
footer .sp { margin-left:auto; }

@media (max-width:760px) { .who { width:100%; margin-left:0; } }