:root { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin: 0; background: #0b0f14; color: #e8eef7; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
h1 { margin: 0 0 16px; }
h2 { margin: 0 0 12px; font-size: 18px; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .row { grid-template-columns: 1fr; } }

.card { background: #111826; border: 1px solid #1f2a3a; border-radius: 12px; padding: 16px; }
.controls { display: flex; gap: 8px; }
input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid #2a3a52; background: #0b1220; color: #e8eef7; }
button { padding: 10px 12px; border-radius: 10px; border: 1px solid #2a3a52; background: #18243a; color: #e8eef7; cursor: pointer; }
button:hover { background: #203050; }

.hint { margin: 10px 0 0; opacity: 0.75; font-size: 13px; }

.status { padding: 10px 12px; border-radius: 10px; background: #0b1220; border: 1px solid #2a3a52; }

.tableWrap { overflow: auto; border-radius: 10px; border: 1px solid #1f2a3a; }
table { width: 100%; border-collapse: collapse; min-width: 1050px; }
th, td { padding: 10px 12px; border-bottom: 1px solid #1f2a3a; vertical-align: top; }
th { text-align: left; font-weight: 600; background: #0e1522; position: sticky; top: 0; }
.small { opacity: 0.8; font-size: 12px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid #2a3a52; font-size: 12px; }
.badge.on { background: #10301f; border-color: #1d6b41; }
.badge.off { background: #2b1b1b; border-color: #7a2f2f; }