:root { color-scheme: dark; font-family: Inter, "Segoe UI", sans-serif; }
body { margin: 0; min-height: 100vh; background: #07111f; color: #eaf2ff; }
main { max-width: 1200px; margin: auto; padding: 28px; }
.card { max-width: 560px; margin: 15vh auto 24px; padding: 42px; border: 1px solid #243b55; border-radius: 18px; background: #0d1b2d; box-shadow: 0 24px 80px #0008; }
.brand, .top { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.brand { justify-content: flex-start; }
.mark { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #36a2ff, #36e0a1); }
h1 { font-size: 25px; margin: 0; }
p { line-height: 1.6; color: #b9c9dd; }
.status, .message { margin-top: 24px; padding: 14px; border-radius: 10px; background: #11263e; color: #8fc7ff; font-size: 14px; }
.login, .panel { border: 1px solid #29415d; background: #0d1b2d; padding: 20px; border-radius: 14px; margin: 18px 0; }
input, select, button { font: inherit; color: inherit; background: #11263e; border: 1px solid #365675; border-radius: 8px; padding: 9px; }
input { min-width: 280px; }
input[type="checkbox"] { min-width: auto; }
button { cursor: pointer; background: #1769aa; }
button.good { background: #16734a; }
button.bad { background: #922d3c; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; border-bottom: 1px solid #243b55; padding: 10px; }
small, .muted { color: #9fb2c9; }
.table-scroll { overflow: auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 14px; align-items: end; }
.form-grid label { display: grid; gap: 6px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid .check { display: flex; align-items: center; }
.hidden { display: none; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } .form-grid .wide { grid-column: auto; } input { min-width: 0; } }