[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #f6f7f9; color: #1d1f24; }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: #eceef2; padding: 1px 5px; border-radius: 4px; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.top { background: #1d1f24; color: #fff; }
.top .wrap { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.top a { color: #fbad41; text-decoration: none; }
.brand { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag { font-weight: 400; font-size: 12px; background: #f38020; color: #fff; padding: 2px 8px; border-radius: 99px; }
h1 { font-size: 26px; margin: 28px 0 8px; }
h2 { font-size: 18px; margin: 28px 0 12px; }
.ok-t { color: #1a7f37; } .bad-t { color: #cf222e; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.switch { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #d7dbe0; padding: 7px 12px; border-radius: 8px; }
.btn { border: 0; background: #f38020; color: #fff; font-weight: 600; padding: 9px 14px; border-radius: 8px; cursor: pointer; }
.btn:hover { background: #d96a0b; }
.btn.danger { background: #cf222e; } .btn.danger:hover { background: #a40e26; }
.btn.ghost { background: transparent; color: #1d1f24; border: 1px solid #c4c9d0; }
.btn:disabled { opacity: .55; cursor: wait; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.card { background: #fff; border: 1px solid #e1e4e8; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.card h3 { margin: 0; font-size: 15px; }
.card .req { font: 12px ui-monospace, Menlo, monospace; color: #57606a; word-break: break-all; }
.card .why { font-size: 13px; color: #57606a; margin: 0; }
.card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.badge { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: #eceef2; color: #57606a; }
.badge.ok { background: #dafbe1; color: #1a7f37; }
.badge.bad { background: #ffebe9; color: #cf222e; }
.badge.warn { background: #fff8c5; color: #7d4e00; }
.log { background: #0d1117; color: #c9d1d9; border-radius: 10px; padding: 12px; max-height: 360px; overflow: auto; font: 12px/1.6 ui-monospace, Menlo, monospace; }
.log .empty { color: #8b949e; margin: 0; }
.log .line { border-bottom: 1px solid #21262d; padding: 4px 0; white-space: pre-wrap; word-break: break-all; }
.log .ok { color: #3fb950; } .log .bad { color: #ff7b72; } .log .warn { color: #d29922; }
.layers { background: #fff; border: 1px solid #e1e4e8; border-radius: 10px; padding: 4px 20px 12px; margin: 28px 0 40px; }
.fine { font-size: 12px; color: #6e7781; }
@media (max-width: 600px) { h1 { font-size: 21px; } .tag { display: none; } }