:root {
  color-scheme: dark;
  --bg: #0c0913;
  --surface: #151021;
  --surface-2: #1c162b;
  --line: rgba(222,208,245,.15);
  --text: #f8f4ff;
  --muted: #aea2bd;
  --violet: #bd8cff;
  --teal: #3fd4c1;
  --red: #ff7c78;
  --orange: #ffb45b;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 75% -15%, rgba(189,140,255,.15), transparent 35rem), var(--bg); color: var(--text); font: 400 1rem/1.5 "DM Sans", system-ui, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
main { width: min(1080px, calc(100% - 36px)); margin: 0 auto; padding: 56px 0 80px; }
header { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
header > div { max-width: 720px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; font: 800 clamp(2rem,5vw,3.3rem)/1.05 "Manrope"; letter-spacing: -.04em; }
h2 { margin-bottom: 8px; font: 800 clamp(1.35rem,3vw,1.85rem)/1.15 "Manrope"; }
header p:last-child { margin-bottom: 0; color: var(--muted); }
header > a { flex: 0 0 auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); text-decoration: none; font-size: .75rem; }
.eyebrow { margin: 0 0 6px; color: var(--violet); font: 700 .7rem "Manrope"; letter-spacing: .12em; }
.guard-card, .runner-card { margin-top: 22px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(21,16,33,.84); }
.guard-card { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 18px; align-items: center; border-color: rgba(189,140,255,.28); }
.guard-mark { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(189,140,255,.45); border-radius: 15px; background: rgba(189,140,255,.1); color: var(--violet); font: 800 1.3rem "Manrope"; }
.guard-card p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .82rem; }
#login-form { display: flex; align-items: flex-end; gap: 8px; }
#login-form label { display: grid; gap: 5px; color: var(--muted); font-size: .7rem; }
input { width: 170px; min-height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #08060d; color: var(--text); }
input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(189,140,255,.09); }
button { min-height: 43px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--violet); color: #180e25; font-weight: 700; }
button.secondary { border: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--text); }
button:disabled { cursor: not-allowed; opacity: .45; }
.status-message { grid-column: 2 / -1; min-height: 1.2em; color: var(--red) !important; }
.guard-card.authenticated { border-color: rgba(63,212,193,.3); }
.guard-card.authenticated .guard-mark { color: var(--teal); border-color: rgba(63,212,193,.4); background: rgba(63,212,193,.08); }
.guard-card.blocked { border-color: rgba(255,124,120,.4); }
.runner-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.runner-actions { display: flex; gap: 8px; }
.summary { display: flex; justify-content: space-between; margin-top: 22px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(0,0,0,.12); }
.summary[data-state="running"] { border-color: rgba(255,180,91,.3); color: var(--orange); }
.summary[data-state="pass"] { border-color: rgba(63,212,193,.3); color: var(--teal); }
.summary[data-state="fail"] { border-color: rgba(255,124,120,.35); color: var(--red); }
.test-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 7px; counter-reset: tests; }
.test-row { counter-increment: tests; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 62px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.1); }
.test-row::before { content: counter(tests, decimal-leading-zero); color: #746b82; font: 700 .67rem "Manrope"; }
.test-row strong, .test-row small { display: block; }
.test-row strong { font-size: .85rem; }
.test-row small { margin-top: 2px; color: var(--muted); font-size: .69rem; }
.test-state { min-width: 76px; text-align: right; color: var(--muted); font-size: .7rem; }
.test-row.running { border-color: rgba(255,180,91,.28); }
.test-row.running .test-state { color: var(--orange); }
.test-row.pass { border-color: rgba(63,212,193,.26); }
.test-row.pass .test-state { color: var(--teal); }
.test-row.fail { border-color: rgba(255,124,120,.34); background: rgba(255,124,120,.035); }
.test-row.fail .test-state, .test-row.fail small { color: var(--red); }
@media (max-width: 760px) {
  main { padding-top: 28px; }
  header, .runner-head { display: block; }
  header > a { display: inline-flex; margin-top: 18px; }
  .guard-card { grid-template-columns: 48px minmax(0,1fr); padding: 18px; }
  .guard-mark { width: 46px; height: 46px; }
  #login-form { grid-column: 1 / -1; }
  #login-form label { flex: 1; }
  #login-form input { width: 100%; }
  .status-message { grid-column: 1 / -1; }
  .runner-actions { margin-top: 16px; }
}
@media (max-width: 440px) {
  .runner-actions, #login-form { display: grid; grid-template-columns: 1fr; }
  .test-row { grid-template-columns: 27px minmax(0,1fr); }
  .test-state { grid-column: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }