/* The website (docs/website.md): the 0.97k login screen's glowing logo over plain cards like the admin page's
   sign-in (Mu.Admin app.css, its dark colours), the server button 0box with Level01 load dots, the Discord badge. */
:root {
  --bg: #161614; --panel: #1f1f1c; --text: #e8e6e0; --muted: #9a978f; --line: #34332f;
  --accent: #e0a64a; --error: #ef8a80; --ok: #7cc47f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text); font: 14px/1.45 system-ui, sans-serif;
}
a { color: var(--accent); }
a:hover { color: #f3c47a; }
input, button { font: inherit; color: inherit; }

/* Centred on the screen; a taller page (the server list) just grows and scrolls. */
.stage {
  max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 24px 16px;
  display: flex; flex-direction: column; justify-content: center;
}

.logo { position: relative; width: min(340px, 80%); margin: 8px auto 12px; aspect-ratio: 2 / 1; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: lighten; }
.logo .glow { mix-blend-mode: screen; opacity: .35; animation: glow 4s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .15; } to { opacity: .55; } }

.card {
  width: 100%; max-width: 340px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
}
.card .brand { margin: 0; font-size: 18px; font-weight: 600; }

.tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--line); }
.tabs a { color: var(--muted); text-decoration: none; padding: 2px 0 6px; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--accent); }

.form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.form label { display: block; }
.form label small { color: var(--muted); font-size: 12px; }
.box {
  display: block; width: 100%; margin-top: 2px; padding: 6px 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; outline: 0;
}
.box:focus { border-color: var(--accent); }

.btn {
  margin-top: 4px; padding: 7px 12px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--accent); color: #1d1d1b; font-weight: 600;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { filter: brightness(.92); }

.msg { margin: 0; }
.msg.err { color: var(--error); }
.msg.ok { color: var(--ok); }
.hint { margin: 0; color: var(--muted); font-size: 12px; }
.hello { margin: 0; }

.meter { height: 4px; margin-top: -2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; background: #c0392b; transition: width .2s; }
.meter span.ok { background: #d4ac0d; }
.meter span.strong { background: #27ae60; }
.meter-text { display: block; min-height: 14px; margin-top: -4px; color: var(--muted); font-size: 11px; }

.cf-turnstile { display: flex; justify-content: center; }

.server { margin: 12px auto 0; text-align: center; }
.server-btn {
  position: relative; display: block; width: 268px; max-width: 100%; height: 60px; margin: 0 auto;
  color: #fff; text-decoration: none;
}
/* The picture on its own layer, so greying a server that's down leaves the red status dot red. */
.server-btn::before { content: ""; position: absolute; inset: 0; background: url(server.jpg) 0 0 / 100% 100% no-repeat; }
a.server-btn:hover { filter: brightness(1.2); color: #fff; }
.server.down .server-btn::before { filter: grayscale(1) brightness(.6); }
.server.down .server-btn .label { color: #aaa; }
.server-btn .label {
  position: absolute; left: 0; right: 0; top: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 20px; text-shadow: 0 1px 2px #000;
}
.status {
  /* top: the line box's middle sits above the letters' (the font's ascent is taller than its descent) */
  flex: none; position: relative; top: 1px; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  background: #3c3; box-shadow: 0 0 4px #3c3;
}
.server.down .status { background: #d33; box-shadow: 0 0 4px #d33; }
.dots { position: absolute; left: 0; right: 0; bottom: 13px; display: flex; justify-content: center; gap: 3px; }
.dots i {
  --c: #2a2a2a; display: block; width: 8px; height: 8px;
  background: var(--c) url(dot.jpg) 0 0 / 100% 100%; background-blend-mode: multiply;
}
.dots i.d0 { --c: hsl(120 75% 48%); }
.dots i.d1 { --c: hsl(114 75% 48%); }
.dots i.d2 { --c: hsl(107 75% 48%); }
.dots i.d3 { --c: hsl(101 75% 48%); }
.dots i.d4 { --c: hsl(95 75% 48%); }
.dots i.d5 { --c: hsl(88 75% 48%); }
.dots i.d6 { --c: hsl(82 75% 48%); }
.dots i.d7 { --c: hsl(76 75% 48%); }
.dots i.d8 { --c: hsl(69 75% 48%); }
.dots i.d9 { --c: hsl(63 75% 48%); }
.dots i.d10 { --c: hsl(57 75% 50%); }
.dots i.d11 { --c: hsl(51 75% 50%); }
.dots i.d12 { --c: hsl(44 75% 50%); }
.dots i.d13 { --c: hsl(38 75% 50%); }
.dots i.d14 { --c: hsl(32 75% 50%); }
.dots i.d15 { --c: hsl(25 75% 50%); }
.dots i.d16 { --c: hsl(19 75% 50%); }
.dots i.d17 { --c: hsl(13 75% 50%); }
.dots i.d18 { --c: hsl(6 75% 50%); }
.dots i.d19 { --c: hsl(0 75% 50%); }
.count { margin-top: 3px; color: #9a9a9a; font-size: 12px; }
.count .ch { margin: 0 3px; }
.count .ch.off { color: #555; }

.links { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 8px; font-size: 13px; }
form.inline { display: inline; margin: 0; }
button.link { border: 0; padding: 0; background: none; color: var(--accent); text-decoration: underline; cursor: pointer; }
button.link:hover { color: #f3c47a; }

.discord {
  display: flex; align-items: center; gap: 6px; width: fit-content; margin: 14px auto 0; padding: 4px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 13px; text-decoration: none;
}
.discord[hidden] { display: none; }
a.discord[href]:hover { color: var(--text); border-color: var(--accent); }
.discord svg { flex: none; width: 18px; height: 14px; margin-right: 2px; fill: #5865f2; }