* { box-sizing: border-box; margin: 0; }
body {
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0f1420; color: #dbe2ef;
}
nav {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 24px; background: #161d2e;
  border-bottom: 1px solid #253048;
}
nav .brand { font-weight: 700; font-size: 16px; margin-right: 12px; }
nav a { color: #9fb2d8; text-decoration: none; }
nav a:hover { color: #fff; }
nav .right { margin-left: auto; }
.env { font-size: 11px; padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.env-main { background: #7a2b2b; color: #ffc9c9; }
.env-test { background: #234d2c; color: #b8eec2; }
main { max-width: 1100px; margin: 24px auto; padding: 0 20px; }
h1 { font-size: 20px; margin-bottom: 16px; }
h2 { font-size: 16px; margin: 22px 0 10px; color: #aebfe4; }
.cards { display: flex; gap: 14px; flex-wrap: wrap; }
.card {
  background: #161d2e; border: 1px solid #253048; border-radius: 10px;
  padding: 14px 20px; min-width: 170px;
}
.card .label { font-size: 12px; color: #8494b8; }
.card .value { font-size: 22px; font-weight: 700; margin-top: 2px; }
table { width: 100%; border-collapse: collapse; background: #161d2e;
        border: 1px solid #253048; border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #212c44; }
th { background: #1b2438; color: #8ea3cf; font-size: 12px; text-transform: uppercase; }
tr:last-child td { border-bottom: none; }
.green { color: #57d98e; }
.red { color: #ff7b7b; }
.muted { color: #7385ab; }
.flash {
  background: #1f3a5f; border: 1px solid #35619c; color: #cfe3ff;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
}
.error-box {
  background: #47201f; border: 1px solid #8a3d3a; color: #ffd4d0;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
}
button, .btn {
  background: #2c62c9; color: #fff; border: none; border-radius: 7px;
  padding: 7px 14px; cursor: pointer; font-size: 13px;
}
button:hover { background: #3a74e0; }
button.danger { background: #a33434; }
button.danger:hover { background: #c24040; }
button.small { padding: 4px 10px; font-size: 12px; }
input[type=text], input[type=number], input[type=password] {
  background: #0f1420; border: 1px solid #33405f; color: #dbe2ef;
  border-radius: 7px; padding: 7px 10px; font-size: 13px;
}
form.inline { display: inline; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }
.settings-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.settings-row label:first-child { width: 320px; color: #aebfe4; }
.login-box {
  max-width: 340px; margin: 90px auto; background: #161d2e;
  border: 1px solid #253048; border-radius: 12px; padding: 28px;
}
.login-box h1 { margin-bottom: 18px; }
.login-box input { width: 100%; margin-bottom: 14px; }
.login-box button { width: 100%; }
pre.code {
  background: #0b0f19; border: 1px solid #253048; border-radius: 8px;
  padding: 12px; overflow-x: auto; font-size: 12.5px; color: #9fe0b5;
}
.chart-wrap { background: #161d2e; border: 1px solid #253048;
              border-radius: 10px; padding: 14px; }
.logs { font-family: Consolas, monospace; font-size: 12.5px; }