:root { --bg: #0e0f11; --card: #17191d; --line: #2a2d33; --tx: #ececee; --mu: #9a9ea8; --ac: #3d6fd1; --ok: #2e9e6a; --bad: #d1503d; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--tx); }
header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); }
header nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
header nav a { color: var(--mu); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
header nav a.on, header nav a:hover { background: var(--card); color: var(--tx); }
header nav form { margin: 0; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
h1 { font-size: 22px; margin: 0 0 14px; } h2 { font-size: 16px; margin: 0 0 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; overflow-x: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.muted { color: var(--mu); font-size: 13.5px; }
label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 13.5px; color: var(--mu); max-width: 520px; }
input { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--tx); font: inherit; }
button { padding: 8px 14px; border-radius: 9px; border: 0; background: var(--ac); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button.ghost, header nav button { background: transparent; color: var(--mu); border: 1px solid var(--line); }
form.inline { display: inline; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--mu); font-weight: 500; }
.badrow td { color: var(--bad); }
.ok { color: var(--ok); } .bad { color: var(--bad); }
.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; background: #1d3a2b; }
.flash.error { background: #4a2020; }
.key code { display: block; padding: 12px; background: var(--bg); border-radius: 9px; word-break: break-all; font-size: 15px; user-select: all; }