:root { --bg:#0b0f17; --card:#121a26; --muted:#9bb0c8; --text:#e8f1ff; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --line:#223148; --accent:#3b82f6; --accent-soft:rgba(59,130,246,.15); --accent-line:rgba(59,130,246,.65); --accent-text:#dbeafe; }

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); display:flex; flex-direction:column; }

body.admin-page,
body.panel-page,
body.login-page {
  background:
    radial-gradient(circle at top left, rgba(236, 72, 153, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(251, 191, 36, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)),
    var(--bg);
  background-attachment: fixed;
}

body.april-fools-theme {
  --bg:#120d1d;
  --card:rgba(27, 18, 45, 0.88);
  --muted:#f3cde5;
  --text:#fff3fa;
  --line:rgba(255, 167, 214, 0.18);
  --accent:#ff5da8;
  --accent-soft:rgba(255,93,168,.22);
  --accent-line:rgba(255,93,168,.58);
  --accent-text:#fff0f7;
  background:
    radial-gradient(circle at 10% 15%, rgba(255, 93, 168, 0.28), transparent 23%),
    radial-gradient(circle at 82% 18%, rgba(255, 183, 77, 0.18), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(244, 114, 182, 0.18), transparent 32%),
    linear-gradient(145deg, #170e22 0%, #161129 52%, #2a1030 100%);
}

body.april-fools-theme[data-april-band="midnight"] {
  --bg:#120818;
  --card:rgba(27, 14, 33, 0.92);
  --muted:#eac6e1;
  --line:rgba(241, 146, 194, 0.2);
  --accent:#ff79c6;
  --accent-soft:rgba(255,121,198,.22);
  --accent-line:rgba(255,121,198,.52);
  --accent-text:#fff0f8;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 121, 198, 0.28), transparent 22%),
    radial-gradient(circle at 78% 12%, rgba(192, 132, 252, 0.16), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(244, 114, 182, 0.18), transparent 30%),
    linear-gradient(180deg, #0e0611 0%, #190b1d 55%, #14091f 100%);
}

body.april-fools-theme[data-april-band="sunrise"] {
  --bg:#210f1c;
  --card:rgba(53, 22, 42, 0.88);
  --muted:#ffd5df;
  --line:rgba(255, 154, 186, 0.22);
  --accent:#ff8bb7;
  --accent-soft:rgba(255,139,183,.22);
  --accent-line:rgba(255,139,183,.55);
  --accent-text:#fff1f6;
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 184, 122, 0.22), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(255, 139, 183, 0.22), transparent 20%),
    radial-gradient(circle at 54% 100%, rgba(244, 114, 182, 0.16), transparent 30%),
    linear-gradient(180deg, #24101e 0%, #4a1731 50%, #1a1122 100%);
}

body.april-fools-theme[data-april-band="day"] {
  --bg:#1b1021;
  --card:rgba(41, 20, 48, 0.86);
  --muted:#ffd7ee;
  --line:rgba(255, 152, 211, 0.2);
  --accent:#ff74bb;
  --accent-soft:rgba(255,116,187,.2);
  --accent-line:rgba(255,116,187,.52);
  --accent-text:#fff0f7;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 116, 187, 0.26), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(255, 196, 107, 0.18), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(244, 114, 182, 0.16), transparent 32%),
    linear-gradient(180deg, #1a0f22 0%, #3b1738 54%, #1b1120 100%);
}

body.april-fools-theme[data-april-band="dusk"] {
  --bg:#140d22;
  --card:rgba(31, 17, 44, 0.88);
  --muted:#f2d7eb;
  --line:rgba(255, 110, 168, 0.18);
  --accent:#ff5e86;
  --accent-soft:rgba(255,94,134,.18);
  --accent-line:rgba(255,94,134,.52);
  --accent-text:#fff0f5;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 94, 134, 0.28), transparent 24%),
    radial-gradient(circle at 86% 16%, rgba(251, 191, 36, 0.2), transparent 20%),
    radial-gradient(circle at 54% 100%, rgba(59, 130, 246, 0.16), transparent 32%),
    linear-gradient(180deg, #180c21 0%, #29143a 48%, #0d1222 100%);
}

body.april-fools-theme header,
body.april-fools-theme .card,
body.april-fools-theme .admin-card,
body.april-fools-theme .admin-pane,
body.april-fools-theme .admin-nav,
body.april-fools-theme .login-card,
body.april-fools-theme .timed-lock-widget {
  background-color: var(--card);
  border-color: var(--line);
  box-shadow: 0 18px 36px rgba(16, 6, 18, 0.3);
}

body.april-fools-theme .card,
body.april-fools-theme .admin-pane,
body.april-fools-theme .admin-nav,
body.april-fools-theme .login-card {
  backdrop-filter: blur(18px);
}

body.april-fools-theme .topnote,
body.april-fools-theme .small,
body.april-fools-theme .meta,
body.april-fools-theme .admin-brand .sub,
body.april-fools-theme .admin-nav-link .s,
body.april-fools-theme .timed-lock-badge {
  color: var(--muted);
}

body.april-fools-theme .btn-ghost,
body.april-fools-theme .state-pill,
body.april-fools-theme .timed-lock-badge,
body.april-fools-theme .timed-lock-progress,
body.april-fools-theme .table th,
body.april-fools-theme .table td {
  border-color: var(--line);
}

body.april-fools-theme .btn-lock {
  background: linear-gradient(135deg, #ffb25f, #ff8b73);
}

body.april-fools-theme .btn-unlock {
  background: linear-gradient(135deg, #ff6bb0, #ff92c7);
  color: #2a0d1f;
}

body.april-fools-theme .btn-danger {
  background: linear-gradient(135deg, #ff4d7f, #d72662);
}

body.april-fools-theme .mock-frame {
  stroke: rgba(255, 182, 213, 0.38);
  fill: rgba(255, 240, 248, 0.04);
}

body.april-fools-theme .mock-shell {
  stroke: rgba(255, 176, 210, 0.32);
  filter: drop-shadow(0 0 18px rgba(255, 110, 184, 0.12));
}

body.april-fools-theme .mock-inner-frame {
  stroke: rgba(255, 196, 221, 0.22);
}

body.april-fools-theme .mock-door-panel {
  fill: rgba(255, 136, 196, 0.18);
  stroke: rgba(255, 204, 229, 0.32);
  filter: drop-shadow(0 0 16px rgba(255, 102, 179, 0.14));
}

body.april-fools-theme .mock-accent {
  fill: rgba(255, 216, 233, 0.2);
}

body.april-fools-theme .mock-accent-stroke {
  stroke: rgba(255, 202, 226, 0.3);
}

body.april-fools-theme .mock-kicker {
  fill: rgba(255, 210, 233, 0.96);
  letter-spacing: 0.8px;
}

body.april-fools-theme .mock-meta {
  fill: rgba(247, 204, 225, 0.82);
}

body.april-fools-theme .mock-value {
  fill: rgba(255, 243, 249, 0.97);
}

body.april-fools-theme .mock-light-dot {
  filter: drop-shadow(0 0 10px rgba(255, 114, 182, 0.55));
}

body.april-fools-theme .login-wrap {
  position: relative;
}

body.april-fools-theme .login-wrap::before,
body.april-fools-theme .login-wrap::after {
  content: '';
  position: absolute;
  inset: auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(22px);
  opacity: 0.35;
}

body.april-fools-theme .login-wrap::before {
  top: 8%;
  left: max(10px, 2vw);
  background: radial-gradient(circle, rgba(255, 112, 181, 0.9), rgba(255, 112, 181, 0));
}

body.april-fools-theme .login-wrap::after {
  right: max(10px, 3vw);
  bottom: 10%;
  background: radial-gradient(circle, rgba(255, 188, 104, 0.8), rgba(255, 188, 104, 0));
}

body.april-fools-theme .login-card {
  position: relative;
  overflow: hidden;
}

body.april-fools-theme .login-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 36%, rgba(255, 117, 183, 0.08));
  pointer-events: none;
}

header { padding:22px 24px; border-bottom:1px solid var(--line); display:flex; gap:12px 18px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
header h1 { margin:0; font-size:22px; letter-spacing:.2px; line-height:1.2; flex:0 1 auto; }
header .right { display:flex; gap:12px; align-items:center; color:var(--muted); font-size:14px; flex-wrap:wrap; margin-left:auto; }
.user-switch-wrap { display:flex; gap:8px; align-items:center; }
.user-switch,
.add-user-form input[type="text"] {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
}
.user-switch,
.form-row select {
  background-color: var(--card);
  color: var(--text);
  color-scheme: dark;
}
.user-switch option,
.form-row select option {
  background-color: var(--card);
  color: var(--text);
}
.user-switch:focus,
.form-row select:focus,
.form-row input:focus,
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.add-user-form { display:flex; gap:8px; align-items:center; }
.add-user-form label { display:flex; gap:4px; align-items:center; color:var(--muted); }

.wrap { width:min(1700px, 100%); margin: 0 auto; padding: 24px; flex:1; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:14px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.card h2 { margin:0 0 6px 0; font-size:16px; }

.card.card-alert-forced-open {
  border-color: rgba(239, 68, 68, 0.7);
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.26) 0%, rgba(18, 26, 38, 1) 55%);
  box-shadow: 0 10px 24px rgba(127, 29, 29, .3);
}

.card.card-alert-forced-open .state-pill {
  border-color: rgba(239, 68, 68, 0.55);
}

.meta { color:var(--muted); font-size:13px; display:flex; gap:10px; flex-wrap:wrap; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.75);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--text);
  line-height: 1;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.april-theme-pill {
  border-color: var(--accent-line);
  background: linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,.03));
}

.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.control-break { flex-basis: 100%; height: 0; }
.control-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding-bottom: 2px;
}
.control-group-light,
.control-group-remote {
  flex: 0 1 auto;
}
.control-group-light {
  flex-wrap: wrap;
  overflow-x: visible;
  overflow-y: visible;
  white-space: normal;
}
.timed-lock-row { margin-top: 10px; }
.timed-input {
  width: 40px;
  background-color: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 2px;
  text-align: center;
  color-scheme: dark;
  -moz-appearance: textfield;
}

.timed-input::-webkit-outer-spin-button,
.timed-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.light-color-input {
  width: 42px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--card);
  cursor: pointer;
}

.light-white-input {
  width: 120px;
}

button { border:0; border-radius:12px; padding:11px 14px; font-weight:650; cursor:pointer; color:#071018; font-size:14px; }
.btn-lock { background: var(--warn); }
.btn-unlock { background: var(--ok); }
.btn-danger { background: var(--bad); color:white; }
.btn-ghost { background: transparent; border:1px solid var(--line); color:var(--text); }
button:disabled { opacity:.5; cursor:not-allowed; }

.status { display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--muted); font-size:13px; }
.dot { width:10px; height:10px; border-radius:50%; background:#64748b; }
.dot.locked { background: var(--warn); }
.dot.unlocked { background: var(--ok); }
.dot.offline { background:#64748b; }

.device-state-strip {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.state-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.7);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}

.state-lastseen {
  margin-left: auto;
  margin-top: 0;
}

/* give the mockup a consistent height so it doesn't get squished */
.mock { padding: 12px; }
.mock svg { width: 100%; height: auto; max-height: 280px; display:block; }
@media (max-width: 520px) {
  .mock svg { max-height: 220px; }
  header { flex-direction: column; align-items:flex-start; padding:18px; }
  header h1 { font-size: 19px; }
  .wrap { padding: 16px; }
}

.small { font-size:12px; color:var(--muted); margin-top:10px; line-height:1.35; }
.topnote { margin: 0 0 14px 0; color: var(--muted); font-size: 13px; }

.timed-lock-widget {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.45);
  padding: 10px;
}

.timed-lock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.timed-lock-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--muted);
  background: rgba(2, 6, 23, 0.55);
}

.timed-lock-value {
  margin-top: 8px;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text);
}

.timed-lock-progress {
  margin-top: 10px;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(2, 6, 23, 0.55);
  overflow: hidden;
}

.timed-lock-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--warn);
  transition: width .6s linear;
}

.timed-lock-note {
  margin-top: 8px;
}

.timed-lock-widget[data-timed-lock-state="running"] .timed-lock-badge {
  color: var(--ok);
  border-color: rgba(34, 197, 94, 0.5);
}

.timed-lock-widget[data-timed-lock-state="running"] .timed-lock-progress-fill {
  background: var(--ok);
}

.timed-lock-widget[data-timed-lock-state="halted"] .timed-lock-badge {
  color: var(--warn);
  border-color: rgba(245, 158, 11, 0.55);
}

.timed-lock-widget[data-timed-lock-state="halted"] .timed-lock-progress-fill {
  background: var(--warn);
}

.timed-lock-widget[data-timed-lock-state="sync"] .timed-lock-badge {
  color: var(--muted);
}

.timed-lock-controls-widget {
  margin-top: 10px;
}

.timed-lock-controls-widget .timed-lock-row {
  margin-top: 10px;
}

.timed-lock-controls-widget .timed-lock-badge {
  color: var(--muted);
}

.toast { position: fixed; right: 14px; bottom: 14px; background: #0f172a; border:1px solid var(--line); padding: 10px 12px; border-radius: 12px; color: var(--text); opacity:0; transform: translateY(8px); transition: .25s; max-width: 360px; }
.toast.show { opacity:1; transform: translateY(0); }

code { background: rgba(255,255,255,.06); padding:2px 6px; border-radius: 8px; }

/* door animation */
[data-door] { transition: transform 260ms ease, filter 260ms ease; }

.pill-link { color: var(--text); text-decoration: none; }
.pill-link:hover { text-decoration: underline; }

.admin-wrap { width:min(1800px, 100%); margin: 0 auto; padding: 24px; flex: 1; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 14px; }
.admin-grid-users { grid-template-columns: 1fr; align-items: start; }
.admin-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.admin-card h2 { margin: 0 0 10px; font-size: 16px; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.table th, .table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; word-break: break-word; }

.table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.table-users th:last-child,
.table-users td:last-child {
  width: 250px;
}

.table-users th:nth-child(3),
.table-users td:nth-child(3) {
  width: 180px;
}

.table-users {
  width: 100%;
  min-width: 1020px;
  table-layout: auto;
  font-size: 12px;
}

.table-users th,
.table-users td {
  padding: 6px;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}

.table-users th:nth-child(1), .table-users td.users-cell-identity { min-width: 320px; }
.table-users th:nth-child(2), .table-users td.users-cell-max { min-width: 260px; }
.table-users th:nth-child(3), .table-users td.users-cell-overrides { min-width: 250px; }
.table-users th:nth-child(4), .table-users td.users-cell-actions { min-width: 190px; }

.users-table-wrap::-webkit-scrollbar {
  height: 10px;
}

.users-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}

.table-users td.users-cell-identity,
.table-users th {
  white-space: nowrap;
}

.table-users td.users-cell-max .small {
  white-space: nowrap;
}

.users-cell-label {
  display: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--muted);
  margin-bottom: 4px;
}

.users-id-lines {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}

.users-inline-label {
  margin-top: 0;
}

.users-overrides-stack {
  display: grid;
  gap: 4px;
}

.users-inline-form {
  margin: 0;
}

.users-must-change {
  margin-top: 8px;
}

.flash { padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; }
.flash.ok { background: rgba(34,197,94,.16); border: 1px solid rgba(34,197,94,.4); }
.flash.err,
.err { background: rgba(239,68,68,.16); border: 1px solid rgba(239,68,68,.4); border-radius: 12px; }
.err { padding: 10px; margin-bottom: 10px; }

.form-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom: 10px; }
.form-row input, .form-row select,
.field input {
  background: transparent;
  color: var(--text);
  border:1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}

.form-inline { margin: 0; }
.form-inline-gap { margin: 0 0 6px 0; }
.section-spaced { margin-top: 14px; }

.login-wrap {
  width:min(640px, 100%);
  margin: 0 auto;
  padding: 24px;
  min-height: 100vh;
  display:flex;
  align-items:center;
}
.login-card {
  width:100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
}
.login-card h1 { margin: 0 0 12px 0; font-size: 18px; }
.field { display:flex; flex-direction:column; gap:6px; margin: 0 0 10px 0; }

.admin-shell { display:grid; grid-template-columns: 280px minmax(0,1fr); gap:16px; align-items:start; }
.admin-nav {
  position: sticky;
  top: 18px;
  background: var(--card);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-brand .title { font-size: 20px; font-weight: 800; }
.admin-brand .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

.admin-pills { display: grid; gap: 8px; margin-top: 8px; }

.admin-nav-list { display: grid; gap: 8px; margin-top: 10px; }
.admin-nav-link {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.admin-nav-link .k { font-weight: 700; font-size: 14px; }
.admin-nav-link .s { font-size: 12px; color: var(--muted); }
.admin-nav-link:hover { border-color: rgba(148,163,184,.6); }
.admin-nav-link.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.admin-nav-link.active .s { color: var(--accent-text); }

.admin-side-actions {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.admin-main { min-width: 0; }
.admin-pane {
  background: var(--card);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}
.admin-view { display: none; }
.admin-view.active { display: block; }

.user-action-row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

.user-action-row .user-role-select {
  flex: 1 1 120px;
  min-width: 90px;
}

.user-role-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.user-role-form .user-role-select {
  min-width: 120px;
}

.user-max-lock-input {
  width: 4.2ch !important;
  min-width: 4.2ch !important;
  max-width: 4.2ch !important;
  background-color: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  padding: 4px 2px !important;
  text-align: center;
  color-scheme: dark;
  -moz-appearance: textfield;
}

.user-max-lock-input::-webkit-outer-spin-button,
.user-max-lock-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.user-max-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  margin: 0;
}

@media (max-width: 1320px) {
  .table-users {
    min-width: 0;
    width: 100%;
  }

  .table-users thead {
    display: none;
  }

  .table-users tbody,
  .table-users tr,
  .table-users td {
    display: block;
    width: 100%;
  }

  .table-users tr.users-row {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 10px;
    background: rgba(2, 6, 23, .3);
  }

  .table-users tr.users-row:last-child {
    margin-bottom: 0;
  }

  .table-users td {
    min-width: 0 !important;
    border-bottom: 0;
    padding: 6px 0;
    white-space: normal;
  }

  .users-cell-label {
    display: block;
  }

  .user-action-row {
    gap: 8px;
  }
}

.user-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-action-row button {
  white-space: nowrap;
  width: 100%;
  padding: 6px 8px;
  font-size: 11px;
}

.user-action-row input,
.user-action-row select {
  min-height: 34px;
}

.admin-config-row {
  margin: 0;
  align-items: center;
}

.admin-config-matrix-wrap {
  display: block;
  overflow-x: auto;
}

.admin-config-matrix {
  table-layout: auto;
  min-width: 740px;
}

.admin-config-matrix th,
.admin-config-matrix td {
  min-width: 180px;
}

.admin-config-matrix th:first-child,
.admin-config-matrix td:first-child {
  min-width: 240px;
}

.admin-config-matrix thead th:first-child,
.admin-config-matrix tbody td:first-child {
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 2;
}

.admin-config-matrix select,
.admin-config-matrix input[type="number"] {
  width: 100%;
  box-sizing: border-box;
}

.admin-checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}

.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat-card { border:1px solid var(--line); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.02); }
.stat-card .k { color: var(--muted); font-size: 12px; }
.stat-card .v { font-size: 20px; font-weight: 700; margin-top: 2px; }

@media (max-width: 1280px) {
  .admin-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .admin-wrap {
    padding: 14px;
    width: 100%;
    box-sizing: border-box;
  }

  .admin-pane,
  .admin-card {
    padding: 12px;
  }

  .table {
    font-size: 12px;
  }

  .table-users th:last-child,
  .table-users td:last-child {
    width: 220px;
  }

  .table-users th:nth-child(3),
  .table-users td:nth-child(3) {
    width: 170px;
  }
}

@media (max-width: 760px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { position: static; }

  header {
    flex-direction: column;
    align-items: flex-start;
  }

  header .right {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .user-actions-stack {
    flex-direction: row;
    gap: 6px;
  }

  .user-action-row {
    flex: 1 1 0;
    min-width: 0;
  }

  .user-action-row button {
    width: 100%;
  }

  .table-users th:last-child,
  .table-users td:last-child {
    width: auto;
  }
}

/* ── Setup view utilities ───────────────────────────────────────────────────── */
.muted { color: var(--muted); font-size: 13px; }

.badge          { display:inline-block; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600; }
.badge.ok       { background:rgba(34,197,94,.15); color:var(--ok); }
.badge.err      { background:rgba(239,68,68,.15);  color:var(--bad); }

.inline-form    { display:inline; }

.form-grid      { display:flex; flex-direction:column; gap:10px; max-width:480px; }
.form-row       { display:flex; align-items:center; gap:12px; }
.form-row label { min-width:110px; color:var(--muted); font-size:13px; }
.form-row input, .form-row select { flex:1; }

.btn-sm         { font-size:12px; padding:3px 10px; }

.token-row      { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.token-row:last-child { margin-bottom:0; }