:root {
  --bg: #06070a;
  --text: #f3f5f8;
  --muted: #6b7280;
  --accent: #a3e635;
  --accent-2: #38bdf8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* slow drifting aurora */
.glow {
  position: fixed; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 50% at 30% 35%, rgba(163,230,53,.20), transparent 60%),
    radial-gradient(42% 55% at 72% 60%, rgba(56,189,248,.18), transparent 62%),
    radial-gradient(40% 50% at 55% 80%, rgba(168,85,247,.12), transparent 60%);
  filter: blur(20px);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* fine grid + grain */
.grid {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 30%, transparent 80%);
}

main {
  position: relative; z-index: 2;
  text-align: center;
  padding: 32px;
}

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 8px 16px 8px 13px;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.02);
  margin-bottom: 34px;
  opacity: 0; transform: translateY(10px);
  animation: rise .9s cubic-bezier(.2,.7,.3,1) .15s forwards;
}
.badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .3; } }

h1 {
  font-weight: 800;
  font-size: clamp(2.8rem, 12vw, 8.5rem);
  line-height: .9;
  letter-spacing: -.045em;
  background: linear-gradient(180deg, #ffffff 30%, #aab2c0 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: 0; transform: translateY(16px);
  animation: rise 1s cubic-bezier(.2,.7,.3,1) .28s forwards;
}
h1 .tld {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.sub {
  margin-top: 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(.8rem, 1.6vw, 1rem);
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--muted);
  padding-left: .42em; /* optical balance for letter-spacing */
  opacity: 0; transform: translateY(12px);
  animation: rise 1s cubic-bezier(.2,.7,.3,1) .42s forwards;
}

.line {
  width: 0; height: 1px; margin: 30px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: grow 1.1s cubic-bezier(.2,.7,.3,1) .6s forwards;
}

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes grow { to { width: min(260px, 60vw); } }

footer {
  position: fixed; bottom: 22px; left: 0; right: 0; z-index: 2;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.22);
  opacity: 0; animation: rise 1s ease 1s forwards;
}

/* top-right sign-in affordance on the landing page */
.topnav {
  position: fixed; top: 20px; right: 22px; z-index: 3;
  opacity: 0; animation: rise 1s ease .8s forwards;
}
.signin {
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 9px 16px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  transition: border-color .2s ease, background .2s ease;
}
.signin:hover {
  border-color: rgba(163,230,53,.5);
  background: rgba(163,230,53,.08);
}

/* ---- Hub ---- */
body.hub {
  display: block;
  place-items: unset;
  overflow: auto;
}
.hubbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand {
  font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em;
  color: var(--text); text-decoration: none;
}
.brand .tld {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.user { display: flex; align-items: center; gap: 12px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); }
.who {
  font-family: "JetBrains Mono", monospace; font-size: .8rem; color: var(--muted);
}
.signout {
  font-family: "JetBrains Mono", monospace; font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 7px 14px; background: rgba(255,255,255,.03);
  transition: border-color .2s ease, background .2s ease;
}
.signout:hover { border-color: rgba(56,189,248,.5); background: rgba(56,189,248,.08); }

.hubmain {
  position: relative; z-index: 2;
  max-width: 1000px; margin: 0 auto;
  text-align: left; padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 40px);
}
.hubmain .badge { margin-bottom: 24px; animation: none; opacity: 1; transform: none; }
.hubtitle {
  font-weight: 800; font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: -.03em; margin-bottom: 28px;
}
.cards {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.card {
  border: 1px solid rgba(255,255,255,.09); border-radius: 16px;
  padding: 20px; background: rgba(255,255,255,.02);
  backdrop-filter: blur(8px);
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: rgba(163,230,53,.35); transform: translateY(-2px); }
.card-name {
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em;
}
.card-meta {
  margin-top: 6px;
  font-family: "JetBrains Mono", monospace; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.note {
  margin-top: 28px;
  font-family: "JetBrains Mono", monospace; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.28);
}

@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
  .badge, h1, .sub, footer, .topnav { opacity: 1; transform: none; animation: none; }
  .line { width: min(260px, 60vw); animation: none; }
  .badge .dot { animation: none; }
}

/* ---- john power panel (embedded in the hub cards) ---- */
.hubtitle-power { margin-top: 44px; }

.card.waking {
  border-color: rgba(56,189,248,.4);
  animation: cardpulse 1.6s ease-in-out infinite;
}
@keyframes cardpulse {
  50% { border-color: rgba(56,189,248,.75); box-shadow: 0 0 22px rgba(56,189,248,.12); }
}

.john-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); color: var(--text);
}
.pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 10px currentColor;
}
.pill-awake       { color: var(--accent);  border-color: rgba(163,230,53,.4); }
.pill-asleep      { color: #94a3b8;         border-color: rgba(148,163,184,.35); }
.pill-waking      { color: var(--accent-2); border-color: rgba(56,189,248,.5); }
.pill-unreachable { color: #f87171;         border-color: rgba(248,113,113,.4); }
.pill-waking::before { display: none; } /* replaced by the spinner */

.spinner {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  color: var(--text); border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 8px 16px; background: rgba(255,255,255,.03);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-ico { display: block; }

/* Wake: filled lime accent, matching the site's --accent, with a hover glow. */
.btn-wake {
  color: #0a0d07; font-weight: 700;
  background: linear-gradient(180deg, #c6f776, var(--accent));
  border-color: rgba(163,230,53,.6);
}
.btn-wake:hover:not(:disabled) {
  box-shadow: 0 0 18px rgba(163,230,53,.5);
  transform: translateY(-1px);
}
.btn-wake:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(163,230,53,.4);
}
.btn:disabled {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
  color: var(--muted); background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12);
}

.hint { margin-top: 12px; font-size: .72rem; color: var(--muted); }
.hint code { font-family: "JetBrains Mono", monospace; color: #cbd5e1; }
.err {
  margin-top: 12px; font-family: "JetBrains Mono", monospace; font-size: .72rem;
  color: #f87171; word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .card.waking { animation: none; }
  .spinner { animation: none; }
}