:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin: 0; background:#0b0f17; color:#e7eefc; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.card { background:#111a2b; border:1px solid #20304f; border-radius: 14px; padding: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.row { display:flex; gap:12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 220px; }
h1,h2 { margin: 0 0 12px; }
label { display:block; font-size: 12px; opacity: .85; margin-bottom: 6px; }
input, select, button, textarea { width:100%; box-sizing:border-box; padding:10px 12px; border-radius: 10px; border:1px solid #2b3f66; background:#0b1222; color:#e7eefc; }
input[type="checkbox"], input[type="radio"] { width: auto; }
button { cursor:pointer; background:#1d2f55; border-color:#35528a; }
button:hover { filter:brightness(1.08); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap--spaced { margin-top: 10px; }
.table-wrap table { min-width: 720px; }
table { width:100%; border-collapse: collapse; overflow:hidden; border-radius: 12px; }
th, td { border-bottom: 1px solid #20304f; padding: 10px 8px; text-align: left; font-size: 14px; vertical-align: top; }
th { font-size: 12px; opacity:.9; text-transform: uppercase; letter-spacing: .08em; }
.table-actions { display:flex; justify-content: flex-end; gap:10px; flex-wrap: wrap; align-items:center; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid #2b3f66; }
.badge.ok { background:#11301f; border-color:#1f6b43; }
.badge.bad { background:#35151a; border-color:#8a2c3a; }
.badge.warn { background:#2e2a12; border-color:#7b6d27; }
.topbar { display:flex; gap:12px; align-items:center; justify-content: space-between; margin-bottom: 16px; }
.actions { display:flex; gap:10px; flex-wrap: wrap; align-items:center; }
.small { font-size: 12px; opacity:.85; }
hr { border:0; border-top:1px solid #20304f; margin: 16px 0; }
.msg { padding: 10px 12px; border-radius: 12px; border: 1px solid #2b3f66; background:#0b1222; margin-bottom: 12px; }
.msg.ok { border-color:#1f6b43; background:#11301f; }
.msg.err { border-color:#8a2c3a; background:#35151a; }
code { background:#0b1222; padding:2px 6px; border-radius:8px; border:1px solid #20304f; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .container { padding: 16px; }
  .topbar { flex-wrap: wrap; align-items: flex-start; }
  .topbar .actions { width: 100%; }
}

@media (max-width: 720px) {
  .container { padding: 14px; }
  .row { flex-direction: column; }
  .row > * { min-width: 0; }
  h1 { font-size: 22px; }
  table { border: 0; border-radius: 0; }
  thead { display: none; }
  tbody tr { display: block; border: 1px solid #20304f; border-radius: 12px; padding: 8px; margin-bottom: 10px; background:#0b1222; }
  tbody td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 4px; font-size: 13px; }
  tbody td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
  tbody td[colspan] { justify-content: center; text-align: center; }
  tbody td[colspan]::before { content: ""; }
  .table-actions { justify-content: space-between; }
  .table-wrap table { min-width: 0; }
}