body { font-family: system-ui, sans-serif; margin: 0; background: #f4f6f8; color: #222; }
header { background: #1a1a2e; color: #fff; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
header a { color: #9cf; margin-left: 16px; text-decoration: none; }
main { max-width: 960px; margin: 24px auto; padding: 0 16px; }
section { margin-bottom: 32px; }
h2 { border-bottom: 1px solid #ccc; padding-bottom: 8px; }
.muted { color: #666; font-size: 14px; }
.box { background: #fff; border: 1px solid #ddd; padding: 12px; overflow: auto; max-height: 420px; font-size: 12px; }
.error { color: #c00; }
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.card { background: #fff; padding: 24px 32px; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,.08); width: 100%; max-width: 360px; }
.card label { display: block; margin: 12px 0 4px; }
.card input { width: 100%; padding: 8px; box-sizing: border-box; }
.card button { margin-top: 16px; width: 100%; padding: 10px; background: #1a1a2e; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
code { background: #eee; padding: 2px 6px; border-radius: 4px; }
.alert-bar { margin: 0; padding: 0 20px; font-size: 14px; }
.alert-bar:empty { display: none; }
.alert-bar .alert-item { padding: 10px 16px; margin: 8px 0; border-radius: 6px; border: 1px solid transparent; }
.alert-bar .alert-critical { background: #fde8e8; border-color: #e08585; color: #6b1111; }
.alert-bar .alert-warning { background: #fff8e6; border-color: #e6c200; color: #5c4a00; }