:root { color-scheme: dark light; font-family: system-ui, sans-serif; }
body { margin: 0; display: flex; justify-content: center; background: #1b1d24; color: #e8e6e3; min-height: 100vh; }
main { width: min(680px, 94vw); padding: 2rem 0; }
h1 { text-align: center; }
.card { background: #262a35; border-radius: 10px; padding: .9rem 1.1rem; margin: .6rem 0;
        display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.card b { flex: 1; }
.badge { background: #3a3f4d; border-radius: 999px; padding: .15rem .7rem; font-size: .8rem; }
.badge.on { background: #1d5c33; } .badge.mid { background: #6b5b1e; } .badge.err { background: #6b1e1e; }
button, .btn { background: #4a6cf7; color: #fff; border: 0; border-radius: 8px; padding: .5rem 1rem;
               font-size: 1rem; cursor: pointer; text-decoration: none; }
button:disabled { opacity: .5; cursor: default; }
form { display: grid; gap: .7rem; max-width: 320px; margin: 2rem auto; }
input { padding: .6rem .8rem; border-radius: 8px; border: 1px solid #3a3f4d; background: #12141a; color: inherit; }
.error { color: #ff7b7b; min-height: 1.2em; }
pre { background: #12141a; padding: .8rem; border-radius: 8px; overflow-x: auto; font-size: .78rem; }
small { opacity: .6; }
@media (prefers-color-scheme: light) { body { background: #f2f3f7; color: #23252b; }
  .card { background: #fff; } input { background: #fff; } pre { background: #e8eaf1; } }