* { box-sizing: border-box; }
body {
  margin: 0; background: #03060B; color: #e6eef5;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
header { padding: 20px 24px; border-bottom: 1px solid #10202c; }
header h1 { margin: 0; color: #29C7FF; letter-spacing: 3px; font-size: 24px; }
header .sub { color: #9fb3c8; font-size: 12px; letter-spacing: 2px; }

section { padding: 16px 24px; }
h2 { color: #cfe6f5; font-size: 16px; border-left: 3px solid #29C7FF; padding-left: 8px; }

.bar, .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input {
  background: #0A2A3A; border: 1px solid #16384a; color: #fff;
  padding: 9px 12px; border-radius: 8px; min-width: 220px;
}
button, .btn-link {
  background: #29C7FF; color: #03060B; border: 0; padding: 9px 14px;
  border-radius: 8px; font-weight: 600; cursor: pointer; text-decoration: none;
}
button.ghost { background: transparent; color: #29C7FF; border: 1px solid #29C7FF; }
button.danger { background: #E9564B; color: #fff; }
button.gold { background: #E9B949; color: #03060B; }
.btn-link { display: inline-block; }
.hint { color: #7d93a6; font-size: 12px; }
.status { color: #9fb3c8; font-size: 13px; margin: 8px 0; }

table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #10202c; }
th { color: #7d93a6; font-weight: 600; }
.tag { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.tag.locked { background: #4a1210; color: #ff8f86; }
.tag.unlocked { background: #10361f; color: #7ee0a0; }
.tag.on { color: #7ee0a0; }
.tag.off { color: #ff8f86; }
td .actions { display: flex; gap: 6px; flex-wrap: wrap; }
code { font-family: ui-monospace, monospace; color: #9fb3c8; }