:root{
  --bg:#0b0d10;
  --shell:#10141a;
  --surface:#0d1220;
  --surface-2:#0c1017;
  --text:#e6edf3;
  --muted:#9aa4b2;
  --blue:#2d6cdf;
  --blue-hi:#3b82f6;
  --ring:#1e2a44;
  --ring-soft:#182132;
  --ok:#1f8f4d;
  --bad:#b3261e;
  --warn:#b7791f;
  --info:#1f6feb;
  --neutral:#465366;
  --control-bg:#0f1520;
  --control-border:var(--ring);
  --control-height:40px;
  --control-radius:10px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
a{color:inherit}

.shell{
  width:min(1680px,calc(100vw - 48px));
  margin:0 auto;
  padding:18px 0;
}

.page-shell{padding-top:8px;padding-bottom:28px}

.app-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.header-main{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand{
  font-weight:700;
  letter-spacing:0;
  text-decoration:none;
  color:var(--text);
  white-space:nowrap;
}

.nav-links,.header-side,.actions,.toolbar-group,.button-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-links{flex-wrap:wrap}
.header-side{margin-left:auto;justify-content:flex-end}
.toolbar-group{flex-wrap:wrap}
.page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

input[type=search],
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select:not([multiple]):not([size]),
textarea{
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--text);
  border-radius:var(--control-radius);
  font:inherit;
}

input[type=search]{
  min-width:240px;
  padding:8px 10px;
}

input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
textarea{
  width:100%;
  min-height:var(--control-height);
  padding:10px 12px;
}

select:not([multiple]):not([size]){
  min-height:var(--control-height);
  padding:0 12px;
  line-height:1.3;
}

select[multiple],
select[size]{
  width:100%;
  min-height:220px;
  padding:10px 12px;
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--text);
  border-radius:var(--control-radius);
  font:inherit;
}

.btn{
  border:1px solid var(--control-border);
  background:var(--control-bg);
  color:var(--text);
  padding:0 14px;
  border-radius:var(--control-radius);
  cursor:pointer;
  min-height:var(--control-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:600;
  gap:6px;
  white-space:nowrap;
}

.btn:hover,
.btn:focus-visible{
  border-color:var(--blue-hi);
  outline:none;
}

.btn-primary{
  background:var(--blue-hi);
  border-color:var(--blue-hi);
  color:#fff;
}

.btn.danger{
  border-color:#633238;
  color:#ffd2d2;
}

.btn.ghost{background:transparent}

.flash{
  border-radius:10px;
  padding:10px 12px;
  margin:0 0 12px;
}

.flash.error{border:1px solid #7a1d1d;background:#2a1111;color:#ffb3b3}
.flash.ok{border:1px solid #1d7a3a;background:#112a1c;color:#b3ffd0}

.page-head,
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.page-head{margin-bottom:16px}

.page-title{
  margin:0;
  font-size:28px;
  line-height:1.1;
}

.page-subtitle,
.section-subtitle,
.table-secondary,
.empty-state,
.login-copy{
  margin:6px 0 0;
  color:var(--muted);
}

.section-title{
  margin:0;
  font-size:18px;
}

.surface,
.auth-card,
.card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--ring);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.surface{
  padding:20px;
  margin-bottom:18px;
}

.form-surface{max-width:1180px}
.surface-wide{max-width:none}
.settings-surface{max-width:820px}
.table-surface{max-width:none}

.form-grid{
  display:grid;
  gap:14px;
  align-items:end;
  margin-top:14px;
}

.form-grid-users{grid-template-columns:2fr 2fr 1.1fr auto}
.form-grid-two{grid-template-columns:2fr 2fr auto}
.form-grid-sites{grid-template-columns:minmax(240px,1.5fr) minmax(220px,1fr) auto}
.settings-grid{grid-template-columns:1fr 1fr 1fr auto}
.audit-filter-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.form-grid label,
.auth-card label{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
}

.form-grid label span,
.auth-card label span{
  color:var(--muted);
  font-size:12px;
}

.form-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.audit-filter-grid .form-actions{
  grid-column:1 / -1;
}

.page-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.search-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.search-controls input[type=search]{
  min-width:320px;
}

.section-search{
  width:min(360px,100%);
  min-width:260px;
}

.token-preview{
  margin-top:16px;
  padding:14px 16px;
  border:1px solid var(--ring-soft);
  border-radius:12px;
  background:rgba(15,21,32,.55);
}

.token-preview-code{
  display:block;
  margin:8px 0;
  padding:10px 12px;
  overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;
  background:rgba(9,13,20,.9);
  border:1px solid var(--ring-soft);
  border-radius:10px;
  color:var(--text);
}

.table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--ring-soft);
  border-radius:12px;
}

.data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
}

.data-table th{
  text-align:left;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0;
  padding:12px 14px;
  background:rgba(15,21,32,.72);
  border-bottom:1px solid var(--ring);
}

.data-table td{
  padding:14px;
  vertical-align:top;
  border-top:1px solid var(--ring-soft);
  overflow-wrap:anywhere;
}

.data-table tbody tr:first-child td{border-top:none}
.data-table tbody tr:hover{background:rgba(59,130,246,.04)}

.table-primary{font-weight:600}
.table-secondary{font-size:12px;line-height:1.45}
.mono-cell{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
}

.actions-cell{min-width:0}
.actions-cell > * + *{margin-top:10px}

.inline-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.inline-form input,
.inline-form select{
  min-width:0;
  flex:1 1 140px;
}

.role-form select{max-width:180px}
.compact-actions .button-row{justify-content:flex-start;flex-wrap:wrap}
.table-primary{font-weight:600}
.pre-line{white-space:pre-line}

.chip,
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:2px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
  white-space:nowrap;
}

.chip-role{background:#142033;color:#cfe1ff;border-color:#213452}
.chip-ok{background:#12301f;color:#bdf0cf;border-color:#24573b}
.chip-bad{background:#341416;color:#ffc4c4;border-color:#6b2323}
.chip-warn{background:#38260f;color:#ffd9a6;border-color:#71521d}
.chip-info{background:#14284c;color:#c5dcff;border-color:#274b87}
.chip-neutral{background:#1a212d;color:#c3ccd8;border-color:#334052}

.details-block{
  margin:0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--ring-soft);
  background:#0a0f17;
  color:#d6deeb;
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:100%;
}

.users-table th:nth-child(1){width:16%}
.users-table th:nth-child(2){width:7%}
.users-table th:nth-child(3){width:13%}
.users-table th:nth-child(4){width:14%}
.users-table th:nth-child(5){width:10%}
.users-table th:nth-child(6){width:30%}
.users-table th:nth-child(7){width:10%}

.sites-table th:nth-child(1){width:18%}
.sites-table th:nth-child(2){width:8%}
.sites-table th:nth-child(3){width:7%}
.sites-table th:nth-child(4){width:12%}
.sites-table th:nth-child(5){width:12%}
.sites-table th:nth-child(6){width:16%}
.sites-table th:nth-child(7){width:27%}

.connections-table-admin th:nth-child(1){width:7%}
.connections-table-admin th:nth-child(2){width:22%}
.connections-table-admin th:nth-child(3){width:10%}
.connections-table-admin th:nth-child(4){width:10%}
.connections-table-admin th:nth-child(5){width:8%}
.connections-table-admin th:nth-child(6){width:8%}
.connections-table-admin th:nth-child(7){width:24%}

.connections-table-master th:nth-child(1){width:8%}
.connections-table-master th:nth-child(2){width:30%}
.connections-table-master th:nth-child(3){width:12%}
.connections-table-master th:nth-child(4){width:12%}
.connections-table-master th:nth-child(5){width:10%}
.connections-table-master th:nth-child(6){width:28%}

.audit-table th:nth-child(1){width:13%}
.audit-table th:nth-child(2){width:13%}
.audit-table th:nth-child(3){width:14%}
.audit-table th:nth-child(4){width:15%}
.audit-table th:nth-child(5){width:10%}
.audit-table th:nth-child(6){width:35%}

.history-table th:nth-child(1){width:14%}
.history-table th:nth-child(2){width:12%}
.history-table th:nth-child(3){width:22%}
.history-table th:nth-child(4){width:12%}
.history-table th:nth-child(5){width:14%}
.history-table th:nth-child(6){width:26%}

.sessions-table th:nth-child(1){width:30%}
.sessions-table th:nth-child(2){width:18%}
.sessions-table th:nth-child(3){width:20%}
.sessions-table th:nth-child(4){width:18%}
.sessions-table th:nth-child(5){width:14%}

.frozen-table th:nth-child(1){width:18%}
.frozen-table th:nth-child(2){width:10%}
.frozen-table th:nth-child(3){width:34%}
.frozen-table th:nth-child(4){width:18%}
.frozen-table th:nth-child(5){width:20%}

.frozen-history-table th:nth-child(1){width:18%}
.frozen-history-table th:nth-child(2){width:16%}
.frozen-history-table th:nth-child(3){width:12%}
.frozen-history-table th:nth-child(4){width:34%}
.frozen-history-table th:nth-child(5){width:20%}

.locks-table th:nth-child(1){width:18%}
.locks-table th:nth-child(2){width:18%}
.locks-table th:nth-child(3){width:14%}
.locks-table th:nth-child(4){width:22%}
.locks-table th:nth-child(5){width:16%}
.locks-table th:nth-child(6){width:12%}

.empty-state{padding:6px 0}

.auth-wrap{
  min-height:calc(100vh - 96px);
  display:grid;
  place-items:center;
  gap:14px;
}

.auth-card{
  width:100%;
  max-width:420px;
  padding:20px;
}

.auth-card h1{margin:0 0 12px;font-size:24px}
.auth-card-wide{max-width:760px}
.auth-card-narrow{max-width:220px}
.auth-actions{margin-top:10px}

.totp-setup{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:18px;
  align-items:start;
  margin:14px 0;
}

.totp-qr{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  border:1px solid var(--ring-soft);
  border-radius:12px;
  background:#fff;
}

.totp-qr img{display:block;max-width:100%;height:auto}

.totp-secret-box{
  border:1px solid var(--ring-soft);
  border-radius:12px;
  background:#0b111a;
  padding:14px;
}

.totp-secret-label{
  color:var(--muted);
  font-size:12px;
  margin-bottom:8px;
}

.totp-secret-box code{
  display:block;
  font:14px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
}

.user-menu{
  position:relative;
}

.user-menu summary{
  list-style:none;
}

.user-menu summary::-webkit-details-marker{display:none}

.user-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:180px;
  padding:8px;
  border:1px solid var(--ring);
  border-radius:12px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  z-index:50;
}

.menu-link{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:38px;
  padding:0 10px;
  border:none;
  background:transparent;
  color:var(--text);
  text-decoration:none;
  border-radius:8px;
  font:inherit;
  cursor:pointer;
}

.menu-link:hover{background:rgba(59,130,246,.08)}
.menu-link.danger{color:#ffd2d2}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,180px));justify-content:flex-start;gap:10px}
.card{position:relative;overflow:hidden;border-radius:12px}
.card .pick{position:absolute;top:10px;left:10px;z-index:3}
.card .pick input{display:none}
.card .pick span{display:inline-block;width:18px;height:18px;border-radius:5px;border:1px solid var(--ring);background:#0f1520}
.card .pick input:checked+span{background:var(--blue-hi);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.topbar{height:24px;background:linear-gradient(180deg,#2f6ee4,#2358b9);color:#fff;display:flex;align-items:center;padding:0 6px;gap:6px;border-bottom:1px solid rgba(255,255,255,.15)}
.topbar .num{font-weight:700;background:rgba(255,255,255,.2);padding:2px 5px;border-radius:6px;min-width:28px;text-align:center;font-size:12px}
.topbar .brandtag{font-weight:700;opacity:.95;font-size:11px}
.topbar .state{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.topbar .state.online{background:var(--bad)}
.screen{position:relative;aspect-ratio:9/20;background:#0f1520}
.screen img,.screen .placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.screen .placeholder{background:linear-gradient(135deg,#1a2030,#121826);pointer-events:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:8px;background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.62));z-index:1}
.overlay .title{font-weight:600;font-size:13px;line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.overlay .table-secondary{font-size:11px;margin:0}
.overlay .cta{display:flex;gap:6px;flex-wrap:wrap}
.overlay .btn{min-height:32px;padding:0 10px;font-size:12px;border-radius:9px}
.card:hover{border-color:#2f6ee4;box-shadow:0 0 0 1px #2f6ee4}

.bulk-surface .section-head{margin-bottom:14px}
.bulk-form{grid-template-columns:minmax(260px,1.1fr) minmax(260px,1.2fr) auto}
.bulk-notes{margin-top:12px}
.stats-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 14px}