.gatekeeper-admin { display: grid; gap: 18px; }
.gatekeeper-admin[hidden] { display: none; }
.gatekeeper-admin-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, var(--brand) 6%), var(--panel)); }
.gatekeeper-admin-header h2 { margin: 0 0 8px; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.045em; }
.gatekeeper-admin-header p:last-child { max-width: 760px; margin-bottom: 0; }
.gatekeeper-admin-header .toolbar-actions { justify-content: flex-end; }

.gatekeeper-admin-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gatekeeper-admin-metrics article { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.gatekeeper-admin-metrics span { display: block; overflow: hidden; color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.gatekeeper-admin-metrics strong { display: block; margin-top: 8px; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1; letter-spacing: -.04em; }

.gatekeeper-admin-tabs { display: flex; gap: 7px; padding: 6px; overflow: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.gatekeeper-admin-tabs button { min-height: 42px; padding: 0 15px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 760; white-space: nowrap; cursor: pointer; }
.gatekeeper-admin-tabs button.active { color: var(--text); background: color-mix(in srgb, var(--brand) 12%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent); }
.gatekeeper-admin-section { display: grid; gap: 16px; }
.gatekeeper-admin-section[hidden] { display: none; }
.gatekeeper-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.gatekeeper-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gatekeeper-admin .panel { min-width: 0; }
.gatekeeper-admin .table-header { align-items: flex-start; }
.gatekeeper-enable-toggle { width: min(290px, 100%); }
.gatekeeper-settings-form, .gatekeeper-location-panel, .gatekeeper-staff-form, .gatekeeper-source-form, .gatekeeper-csv-panel { display: grid; gap: 16px; }
.gatekeeper-colour-grid, .gatekeeper-logo-grid, .gatekeeper-mapping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gatekeeper-colour-grid input[type="color"] { width: 100%; min-height: 48px; padding: 4px; }
.gatekeeper-logo-grid input[type="file"] { width: 100%; }
.gatekeeper-logo-preview { display: grid; place-items: center; min-height: 82px; padding: 10px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); font-size: .78rem; text-align: center; background: color-mix(in srgb, var(--panel) 92%, var(--brand) 8%); }
.gatekeeper-logo-preview img { max-width: 100%; max-height: 70px; object-fit: contain; }
.gatekeeper-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); gap: 12px; align-items: end; margin: 14px 0 18px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--panel) 96%, var(--brand) 4%); }
.gatekeeper-inline-form .toolbar-actions { grid-column: 1 / -1; }

.gatekeeper-card-list { display: grid; gap: 10px; }
.gatekeeper-list-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--panel) 97%, var(--brand) 3%); }
.gatekeeper-list-card.is-disabled { opacity: .62; }
.gatekeeper-list-card h4 { margin: 0 0 5px; font-size: .98rem; }
.gatekeeper-list-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.gatekeeper-list-card .toolbar-actions { justify-content: flex-end; }
.gatekeeper-list-card .mini-button { white-space: nowrap; }
.gatekeeper-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gatekeeper-card-badges span { padding: 4px 7px; border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--brand) 9%, transparent); font-size: .69rem; font-weight: 750; }
.gatekeeper-card-badges span.is-ok { color: #178f59; background: rgba(39, 199, 120, .1); }
.gatekeeper-card-badges span.is-error { color: #c34242; background: rgba(195, 66, 66, .1); }

.gatekeeper-source-panel, .gatekeeper-sync-history-panel { grid-column: 1 / -1; }
.gatekeeper-source-form code { padding: 2px 5px; border-radius: 5px; background: color-mix(in srgb, var(--brand) 9%, transparent); }
.gatekeeper-curl-paste, .gatekeeper-mapping-settings { padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.gatekeeper-curl-paste summary, .gatekeeper-mapping-settings summary { cursor: pointer; font-weight: 760; }
.gatekeeper-curl-paste textarea { width: 100%; margin: 12px 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; }
.gatekeeper-mapping-grid { margin-top: 14px; }
.gatekeeper-mapping-grid label { font-size: .75rem; }
.gatekeeper-mapping-grid label[hidden] { display: none; }
.gatekeeper-csv-panel .table-wrap { max-height: 300px; }
.gatekeeper-csv-panel #gatekeeper-run-import { justify-self: start; }

.gatekeeper-dashboard-panel { display: grid; gap: 18px; }
.gatekeeper-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gatekeeper-dashboard-grid article { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--panel) 96%, var(--brand) 4%); }
.gatekeeper-dashboard-grid h4, .gatekeeper-recent-admin h4 { margin: 0 0 14px; }
.gatekeeper-analytics-list { display: grid; gap: 8px; }
.gatekeeper-analytics-row { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(100px, 1.2fr) auto; gap: 9px; align-items: center; }
.gatekeeper-analytics-row > span { overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.gatekeeper-analytics-track { overflow: hidden; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.gatekeeper-analytics-track i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #27c778); }
.gatekeeper-analytics-row strong { min-width: 34px; text-align: right; }
.gatekeeper-recent-admin { padding: 16px; border: 1px solid var(--border); border-radius: 14px; }
.gatekeeper-admin-recent-list { display: grid; gap: 7px; max-height: 360px; overflow: auto; }
.gatekeeper-admin-recent-row { display: grid; grid-template-columns: 10px minmax(120px, 1fr) minmax(100px, .75fr) minmax(100px, .75fr) auto; gap: 9px; align-items: center; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 96%, var(--brand) 4%); font-size: .76rem; }
.gatekeeper-admin-recent-row i { width: 9px; height: 9px; border-radius: 50%; background: #cf4949; }
.gatekeeper-admin-recent-row.is-granted i { background: #27c778; }
.gatekeeper-admin-recent-row span, .gatekeeper-admin-recent-row time { color: var(--muted); }
.gatekeeper-admin-status { min-height: 20px; margin: 0; color: var(--muted); font-size: .8rem; }
.gatekeeper-admin-status.is-error { color: #c34242; }
.gatekeeper-admin-status.is-success { color: #178f59; }

@media (max-width: 1180px) {
  .gatekeeper-admin-header { flex-direction: column; }
  .gatekeeper-admin-header .toolbar-actions { justify-content: flex-start; }
  .gatekeeper-admin-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .gatekeeper-admin-grid, .gatekeeper-data-grid, .gatekeeper-dashboard-grid { grid-template-columns: 1fr; }
  .gatekeeper-source-panel, .gatekeeper-sync-history-panel { grid-column: auto; }
  .gatekeeper-admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gatekeeper-list-card { grid-template-columns: 1fr; }
  .gatekeeper-list-card .toolbar-actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .gatekeeper-admin-header { padding: 16px; }
  .gatekeeper-admin-header .toolbar-actions > * { flex: 1 1 100%; }
  .gatekeeper-admin-metrics { grid-template-columns: 1fr 1fr; }
  .gatekeeper-colour-grid, .gatekeeper-logo-grid, .gatekeeper-mapping-grid, .gatekeeper-inline-form { grid-template-columns: 1fr; }
  .gatekeeper-inline-form .toolbar-actions { grid-column: auto; }
  .gatekeeper-admin-recent-row { grid-template-columns: 10px 1fr auto; }
  .gatekeeper-admin-recent-row > span { display: none; }
}