:root {
  color-scheme: dark;
  --bg: #07101e;
  --panel: #111e31;
  --panel-soft: #0c1728;
  --line: rgba(151, 177, 214, .16);
  --text: #edf5ff;
  --muted: #8499b2;
  --blue: #4d8fff;
  --green: #4ce3a2;
  --amber: #f1bd59;
  --red: #ff6a80;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 1020px;
  min-height: 100vh;
  color: var(--text);
  font-family: "Segoe UI Variable", "Microsoft YaHei UI", sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(52, 104, 196, .2), transparent 35%),
    linear-gradient(145deg, #07101e, #091321);
}
.shell { width: min(1440px, calc(100% - 52px)); margin: 0 auto; padding: 30px 0 50px; }
header, .login, .panel-head, .actions, .tabs { display: flex; align-items: center; }
header { justify-content: space-between; gap: 30px; margin-bottom: 22px; }
h1 { margin: 6px 0; font-size: 25px; }
header p { margin: 0; color: var(--muted); font-size: 12px; }
.eyebrow { color: #79adff; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.login { gap: 9px; }
input, select, button {
  min-height: 39px;
  padding: 9px 12px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(5, 14, 26, .72);
  outline: none;
}
input:focus, select:focus { border-color: rgba(77, 143, 255, .7); }
button { cursor: pointer; background: linear-gradient(135deg, #3479ed, #2865cf); }
button:hover { filter: brightness(1.08); }
button.danger { border-color: rgba(255, 106, 128, .3); background: rgba(255, 106, 128, .1); color: #ff9aaa; }
button.minor { background: rgba(255, 255, 255, .035); color: #9ec7ff; }
button:disabled { opacity: .45; cursor: wait; }
.message { margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(77, 143, 255, .3); border-radius: 10px; background: rgba(77, 143, 255, .1); font-size: 12px; }
.message.bad { border-color: rgba(255, 106, 128, .3); background: rgba(255, 106, 128, .1); color: #ffb1bd; }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.metrics article, .panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(17, 30, 49, .9);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.metrics article { padding: 16px 18px; }
.metrics span { color: var(--muted); font-size: 10px; }
.metrics strong { display: block; margin-top: 9px; font: 600 22px "Cascadia Code", Consolas, monospace; }
.panel { margin-top: 14px; padding: 20px; }
.panel-head { justify-content: space-between; margin-bottom: 17px; }
.panel h2 { margin: 5px 0 0; font-size: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; }
.form-grid label > span { color: #bbcadd; font-size: 10px; }
.form-grid small { color: #687f99; font-size: 8px; }
.form-grid .wide { grid-column: span 2; }
.actions { justify-content: flex-end; margin-top: 16px; }
.switch { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { display: none; }
.switch > span { width: 40px; height: 22px; padding: 3px; border-radius: 20px; background: #334256; transition: .2s; }
.switch > span::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #91a3b7; transition: .2s; }
.switch input:checked + span { background: rgba(255, 106, 128, .3); }
.switch input:checked + span::before { transform: translateX(18px); background: var(--red); }
.switch strong { color: #9fb0c5; font-size: 11px; }
.tabs { gap: 7px; margin-top: 20px; }
.tabs button { min-height: 34px; background: rgba(255,255,255,.035); color: #8fa6c0; font-size: 10px; }
.tabs button.active { border-color: rgba(77,143,255,.45); background: rgba(77,143,255,.15); color: #b5d3ff; }
.tabs #refresh-button { margin-left: auto; }
.table-panel { padding: 0; overflow: hidden; }
table { width: 100%; border-collapse: collapse; table-layout: auto; }
th, td { padding: 11px 12px; border-bottom: 1px solid rgba(151,177,214,.09); text-align: left; font-size: 9px; white-space: nowrap; }
th { color: #71869f; background: rgba(4,12,24,.25); font-weight: 600; }
td { color: #a9bbce; }
td code { color: #9fc9ff; }
td .row-actions { display: flex; gap: 5px; }
td button { min-height: 26px; padding: 4px 7px; border-radius: 6px; font-size: 8px; }
.status-active { color: var(--green); }
.status-banned, .status-refunded, .status-revoked { color: var(--red); }
.status-unbound, .status-expired { color: var(--amber); }
.hidden { display: none !important; }