:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 16px 56px;
  background: #0b0d10; color: #d7dde3;
  font: 14px/1.6 -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 920px; margin: 0 auto; }
h1 { font-size: 20px; margin: 0 0 6px; letter-spacing: .3px; }
h1 span { color: #6f7d8c; font-weight: 400; font-size: 15px; }
a { color: #58a6ff; text-decoration: none; }
.hero { padding: 64px 0 22px; }
.lead { color: #8b99a8; max-width: 560px; margin: 0; }
.topbar { display: flex; justify-content: space-between; align-items: flex-end;
          gap: 12px; padding: 26px 0 14px; flex-wrap: wrap; }
.sub { color: #6f7d8c; font-size: 12.5px; }
.sub b { color: #9fb0c0; }
.logout { font-size: 12.5px; color: #6f7d8c; }
.card { background: #11151a; border: 1px solid #1d242c; border-radius: 10px;
        padding: 18px; margin-top: 14px; }
.card.login { max-width: 420px; margin-top: 8px; }
label { display: block; font-size: 11px; color: #7d8b99; margin-bottom: 10px;
        text-transform: uppercase; letter-spacing: .6px; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=tel], input:not([type]) {
  width: 100%; margin-top: 6px; background: #0b0d10; color: #d7dde3;
  border: 1px solid #263039; border-radius: 6px; padding: 10px 11px; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
input[type=password] { letter-spacing: 1px; }

/* layar login: kartu di tengah, tidak menempel pojok kiri atas */
.screen {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; padding: 24px 16px;
}
.screen .wrap { width: 100%; max-width: 400px; margin: 0; }
.screen h1 { text-align: center; }
.screen .card { width: 100%; margin: 0; }
.screen .lead { text-align: center; }
input:focus { outline: none; border-color: #1f6feb; }
button { background: #1f6feb; color: #fff; border: 0; border-radius: 6px;
         padding: 10px 18px; font-size: 14px; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button.ghost { background: #21262d; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row.actions { margin-top: 14px; align-items: center; }
.grow { flex: 1 1 220px; }
.lanes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.chip { text-transform: none; letter-spacing: 0; font-size: 12.5px; margin: 0;
        border: 1px solid #263039; border-radius: 20px; padding: 5px 11px;
        display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chip input { margin: 0; accent-color: #1f6feb; }
.dim { color: #6f7d8c; }
.msg { font-size: 12.5px; margin-top: 10px; color: #f87171; min-height: 18px; }
.msg.ok { color: #4ade80; }
.hint { font-size: 12px; color: #6f7d8c; margin-top: 12px; }
.tablewrap { max-height: 420px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { padding: 7px 9px; text-align: left; border-bottom: 1px solid #1a2028;
         white-space: nowrap; }
th { color: #7d8b99; font-size: 10.5px; text-transform: uppercase;
     letter-spacing: .6px; font-weight: 500; position: sticky; top: 0; background: #11151a; }
td.dim, .dim { color: #6f7d8c; }
tr.st-sent .stt { color: #4ade80; }
tr.st-cooldown .stt { color: #fbbf24; }
tr.st-gated .stt { color: #60a5fa; }
tr.st-fail .stt { color: #f87171; }
.foot { color: #6f7d8c; font-size: 12px; margin-top: 18px; }
table.admin td, table.admin th { white-space: normal; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 20px;
         font-size: 11px; border: 1px solid currentColor; }
.b-online { color: #4ade80; } .b-offline { color: #6f7d8c; }
.b-revoked { color: #f87171; } .b-expired { color: #fbbf24; }
form.inline { display: inline; }
.btn-sm { padding: 5px 10px; font-size: 12px; }