:root { color-scheme: light; font-family: Inter, "Segoe UI", system-ui, sans-serif; color: #172033; background: #f4f6fa; }
* { box-sizing: border-box; }
body { margin: 0; }
header { height: 64px; padding: 0 max(24px, calc((100vw - 1100px) / 2)); display: flex; align-items: center; justify-content: space-between; background: #172033; color: white; }
.brand { color: white; text-decoration: none; font-size: 21px; font-weight: 700; }
main { max-width: 1100px; margin: 34px auto; padding: 0 24px; }
h1 { margin: 0 0 8px; font-size: 28px; }
h2 { margin-top: 0; font-size: 19px; }
p { color: #657086; }
.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 24px; }
.actions, .row-actions { display: flex; gap: 10px; }
.card { background: white; border: 1px solid #e2e6ee; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 4px 18px rgba(19, 31, 55, .04); }
.login-card { max-width: 420px; margin: 70px auto; }
form { margin: 0; }
.login-card form { display: grid; gap: 10px; }
label { font-size: 14px; font-weight: 600; margin-top: 8px; }
input { width: 100%; min-height: 42px; border: 1px solid #cdd4e0; border-radius: 7px; padding: 9px 11px; font: inherit; }
.account-form { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr auto; gap: 10px; }
button, .button { border: 1px solid #ccd3df; border-radius: 7px; padding: 9px 14px; background: white; color: #263044; font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, .button:hover { background: #f1f4f9; }
.primary { background: #315efb; border-color: #315efb; color: white; }
.primary:hover { background: #244be0; }
.danger { color: #ba2737; }
.link-button { border: 0; color: white; background: transparent; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 10px; text-align: left; border-bottom: 1px solid #edf0f5; }
th { font-size: 13px; color: #69758a; }
.status { font-size: 13px; padding: 3px 9px; border-radius: 999px; }
.status.on { color: #087a51; background: #e6f7f0; }
.status.off { color: #707887; background: #eef0f3; }
.notice { padding: 12px 15px; margin-bottom: 18px; border-radius: 8px; }
.notice.success { color: #087a51; background: #e6f7f0; }
.notice.error, .error { color: #b42334; background: #fdecef; }
.empty { text-align: center; padding: 20px; }
@media (max-width: 760px) { .page-heading { align-items: flex-start; flex-direction: column; } .account-form { grid-template-columns: 1fr; } }