:root {
  --ui-bg: #111426;
  --ui-bg-soft: #171b30;
  --ui-panel: rgba(27, 32, 53, .94);
  --ui-panel-strong: #20263d;
  --ui-border: rgba(148, 163, 184, .16);
  --ui-border-strong: rgba(96, 165, 250, .34);
  --ui-text: #f8fafc;
  --ui-muted: #94a3b8;
  --ui-primary: #2588e6;
  --ui-primary-hover: #1874ca;
  --ui-danger: #dc3f4c;
  --ui-danger-hover: #bd2f3b;
  --ui-warning: #f59e0b;
  --ui-success: #22c55e;
  --ui-radius: 18px;
  --ui-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}

html.modern-admin,
html.modern-admin body {
  min-height: 100%;
  background:
    radial-gradient(circle at 10% -10%, rgba(37, 136, 230, .20), transparent 34rem),
    radial-gradient(circle at 95% 10%, rgba(88, 80, 236, .12), transparent 30rem),
    var(--ui-bg);
  color: var(--ui-text);
}

html.modern-admin body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.modern-admin * { box-sizing: border-box; }
html.modern-admin [hidden] { display: none !important; }
html.modern-admin button,
html.modern-admin input,
html.modern-admin textarea,
html.modern-admin select { font: inherit; }
html.modern-admin a { color: inherit; }

.modern-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ui-bg);
  z-index: 1000000;
}
.modern-loader-ring {
  width: 46px;
  height: 46px;
  border: 4px solid rgba(148, 163, 184, .22);
  border-top-color: var(--ui-primary);
  border-radius: 50%;
  animation: modern-spin .8s linear infinite;
}
@keyframes modern-spin { to { transform: rotate(360deg); } }

.modern-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50000;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: rgba(15, 18, 34, .80);
  border-bottom: 1px solid var(--ui-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.modern-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text);
  text-decoration: none;
  padding: 0;
  cursor: pointer;
}
.modern-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 10px;
}
.modern-brand-copy { min-width: 0; }
.modern-brand-copy strong,
.modern-brand-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.modern-brand-copy strong { font-size: 15px; line-height: 1.1; }
.modern-brand-copy small { margin-top: 4px; color: var(--ui-muted); font-size: 11px; }
.modern-topbar-actions { display: flex; align-items: center; gap: 9px; }
.modern-icon-button,
.modern-avatar-button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: rgba(255, 255, 255, .055);
  color: var(--ui-text);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  padding: 0;
  transition: .16s ease;
}
.modern-icon-button:hover,
.modern-avatar-button:hover {
  background: rgba(37, 136, 230, .18);
  border-color: var(--ui-border-strong);
  transform: translateY(-1px);
}
.modern-avatar-button { border-radius: 50%; overflow: hidden; }
.modern-avatar-button img { width: 100%; height: 100%; object-fit: cover; }

.modern-page {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 104px 0 48px;
}
.modern-page.narrow { width: min(860px, calc(100% - 32px)); }
.modern-page.auth-page { width: min(470px, calc(100% - 30px)); padding-top: 105px; }
.modern-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.modern-page-header-copy { min-width: 0; }
.modern-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: #8bc4ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.modern-page h1,
.modern-page h2,
.modern-page h3,
.ui-modal h2,
.ui-modal h3 {
  text-align: left;
  margin: 0;
}
.modern-page h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.06; }
.modern-page-subtitle { max-width: 700px; margin: 9px 0 0; color: var(--ui-muted); line-height: 1.55; }
.modern-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.ui-card {
  position: relative;
  background: linear-gradient(160deg, rgba(35, 42, 68, .94), rgba(25, 30, 50, .94));
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
}
.ui-card-pad { padding: 18px; }
.ui-grid { display: grid; gap: 16px; }
.ui-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ui-dashboard-card {
  min-height: 184px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  text-decoration: none;
  transition: .18s ease;
  overflow: hidden;
}
.ui-dashboard-card::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -42px;
  bottom: -48px;
  border-radius: 50%;
  background: var(--card-accent, rgba(37, 136, 230, .18));
  filter: blur(1px);
}
.ui-dashboard-card:hover { transform: translateY(-3px); border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow); }
.ui-card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(37, 136, 230, .16);
  color: #8bc4ff;
  font-size: 19px;
  margin-bottom: 22px;
}
.ui-dashboard-card h2 { font-size: 18px; }
.ui-dashboard-card p { margin: 8px 0 0; color: var(--ui-muted); font-size: 13px; line-height: 1.5; }
.ui-card-link { margin-top: auto; padding-top: 18px; color: #a7d2ff; font-size: 12px; font-weight: 800; }

.ui-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 10px 15px;
  background: var(--ui-primary);
  color: white;
  text-decoration: none;
  font-weight: 750;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(37, 136, 230, .19);
  transition: .16s ease;
}
.ui-btn:hover { background: var(--ui-primary-hover); transform: translateY(-1px); }
.ui-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ui-btn.secondary { background: rgba(255,255,255,.065); border-color: var(--ui-border); box-shadow: none; }
.ui-btn.secondary:hover { background: rgba(255,255,255,.11); }
.ui-btn.danger { background: rgba(220, 63, 76, .13); border-color: rgba(220, 63, 76, .34); color: #fecdd3; box-shadow: none; }
.ui-btn.danger:hover { background: rgba(220, 63, 76, .23); }
.ui-btn.warning { background: rgba(245, 158, 11, .13); border-color: rgba(245, 158, 11, .34); color: #fde68a; box-shadow: none; }
.ui-btn.success { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .32); color: #bbf7d0; box-shadow: none; }
.ui-btn.icon-only { width: 42px; min-width: 42px; padding: 0; }
.ui-btn.small { min-height: 34px; padding: 7px 11px; border-radius: 10px; font-size: 12px; }
.ui-btn.full { width: 100%; }

.ui-segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
}
.ui-segmented button {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  padding: 7px 12px;
  background: transparent;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
  cursor: pointer;
}
.ui-segmented button:hover { background: rgba(255,255,255,.06); color: white; }
.ui-segmented button.active { background: rgba(37, 136, 230, .22); color: #cfe8ff; }
.ui-tab { display: none; }
.ui-tab.active { display: block; }

.ui-list { display: grid; gap: 11px; }
.ui-empty {
  padding: 28px;
  text-align: center;
  color: var(--ui-muted);
  border: 1px dashed var(--ui-border);
  border-radius: 16px;
}
.ui-user-card,
.ui-report-card,
.ui-audit-row {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  cursor: pointer;
  transition: .16s ease;
}
.ui-user-card { grid-template-columns: 52px minmax(0, 1fr) auto; }
.ui-user-card:hover,
.ui-report-card:hover,
.ui-audit-row:hover { background: rgba(37, 136, 230, .10); border-color: var(--ui-border-strong); transform: translateY(-1px); }
.ui-user-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(96, 165, 250, .45); }
.ui-list-title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-list-subtitle { margin-top: 4px; color: var(--ui-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-list-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 9px; color: #b5c0d3; font-size: 11px; }
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .12);
  border: 1px solid rgba(148, 163, 184, .18);
  color: #d6deec;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ui-badge.success { color: #bbf7d0; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.24); }
.ui-badge.danger { color: #fecdd3; background: rgba(220,63,76,.12); border-color: rgba(220,63,76,.25); }
.ui-badge.warning { color: #fde68a; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); }

.ui-modal {
  position: fixed;
  inset: 0;
  z-index: 1000005;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 88px 14px 30px;
  overflow-y: auto;
  background: rgba(4, 7, 16, .76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ui-modal.open,
.ui-modal[style*="display: flex"] { display: flex; }
.ui-modal-panel {
  width: min(760px, 100%);
  max-height: calc(100vh - 118px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(170deg, #232a44, #171c31);
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .54);
}
.ui-modal-panel.wide { width: min(980px, 100%); }
.ui-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(28, 34, 56, .96);
  border-bottom: 1px solid var(--ui-border);
}
.ui-modal-title-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ui-modal-title-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(37,136,230,.16); color: #91c9ff; }
.ui-modal-title-copy { min-width: 0; }
.ui-modal-title-copy h2 { font-size: 17px; }
.ui-modal-title-copy p { margin: 4px 0 0; color: var(--ui-muted); font-size: 11px; }
.ui-modal-close { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--ui-border); background: rgba(255,255,255,.05); color: white; cursor: pointer; box-shadow: none; padding: 0; }
.ui-modal-close:hover { background: rgba(255,255,255,.11); }
.ui-modal-body { overflow-y: auto; padding: 17px; }
.ui-modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 17px; border-top: 1px solid var(--ui-border); background: rgba(16, 20, 35, .74); }

.ui-accordion {
  margin-bottom: 11px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
}
.ui-accordion > summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  user-select: none;
}
.ui-accordion > summary::-webkit-details-marker { display: none; }
.ui-accordion > summary::after { content: "\f078"; margin-left: auto; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--ui-muted); font-size: 11px; transition: transform .16s ease; }
.ui-accordion[open] > summary::after { transform: rotate(180deg); }
.ui-accordion > summary i { color: #88c4ff; width: 20px; text-align: center; }
.ui-accordion-content { padding: 0 15px 15px; border-top: 1px solid rgba(148,163,184,.10); }
.ui-subaccordion { margin-top: 10px; border-radius: 13px; }
.ui-subaccordion > summary { min-height: 46px; padding: 11px 13px; font-size: 13px; }

.ui-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.ui-field { min-width: 0; }
.ui-field.full { grid-column: 1 / -1; }
.ui-field label { display: block; margin: 0 0 7px; color: #dbe5f4; font-size: 12px; font-weight: 760; }
.ui-field-hint { margin: -2px 0 8px; color: var(--ui-muted); font-size: 11px; line-height: 1.45; }
.modern-admin .ui-field input,
.modern-admin .ui-field textarea,
.modern-admin .ui-field select,
.modern-admin .ui-input {
  width: 100%;
  min-height: 43px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .17);
  border-radius: 12px;
  outline: none;
  background: rgba(8, 12, 24, .46);
  color: white;
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.modern-admin .ui-field textarea { min-height: 94px; resize: vertical; }
.modern-admin .ui-field input:focus,
.modern-admin .ui-field textarea:focus,
.modern-admin .ui-field select:focus,
.modern-admin .ui-input:focus { border-color: rgba(96, 165, 250, .68); box-shadow: 0 0 0 3px rgba(37, 136, 230, .12); }
.modern-admin input::placeholder,
.modern-admin textarea::placeholder { color: #68758c; }

.ui-profile-hero {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 16px 0 4px;
}
.ui-profile-avatar-wrap { position: relative; width: 138px; height: 138px; }
.ui-profile-avatar {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(96,165,250,.66);
  box-shadow: 0 0 0 7px rgba(37,136,230,.10);
}
.ui-profile-avatar-button {
  position: absolute;
  right: 2px;
  bottom: 5px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid #20263d;
  background: var(--ui-primary);
  color: white;
  cursor: pointer;
}
.ui-profile-copy h3 { font-size: 20px; }
.ui-profile-copy p { margin: 7px 0 0; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }

.ui-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.ui-info-tile { min-width: 0; padding: 12px; border-radius: 13px; background: rgba(8,12,24,.34); border: 1px solid rgba(148,163,184,.11); }
.ui-info-tile span { display: block; color: var(--ui-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ui-info-tile strong { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: 12px; }

.ui-permission-list { display: grid; gap: 8px; }
.ui-permission {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(148,163,184,.10);
  border-radius: 12px;
  background: rgba(8,12,24,.26);
  cursor: pointer;
}
.ui-permission input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ui-primary); }
.ui-permission strong { display: block; font-size: 12px; }
.ui-permission small { display: block; margin-top: 4px; color: var(--ui-muted); font-size: 10px; line-height: 1.4; }

.ui-status {
  display: none;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(148,163,184,.08);
  color: #dce6f4;
  font-size: 12px;
}
.ui-status.show { display: block; }
.ui-status.error { background: rgba(220,63,76,.12); border-color: rgba(220,63,76,.27); color: #fecdd3; }
.ui-status.success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); color: #bbf7d0; }

.ui-speech-card {
  position: relative;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}
.ui-speech-card::before {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: #20263d;
  border-right: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}
.ui-detail-row { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; align-items: start; padding: 11px 0; border-bottom: 1px solid rgba(148,163,184,.10); }
.ui-detail-row:last-child { border-bottom: 0; }
.ui-detail-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(37,136,230,.13); color: #8bc4ff; }
.ui-detail-label { color: var(--ui-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ui-detail-value { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }

.ui-filter-bar { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(130px, .8fr)) auto; gap: 10px; margin-bottom: 14px; }
.ui-filter-panel { display: none; margin-bottom: 14px; padding: 14px; }
.ui-filter-panel.open { display: block; }
.ui-audit-row { grid-template-columns: 46px minmax(150px, 1fr) minmax(200px, 1.4fr) minmax(140px, .8fr) 30px; }
.ui-audit-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.ui-audit-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(37,136,230,.13); color: #8bc4ff; }
.ui-audit-changes { display: grid; gap: 8px; }
.ui-change-row { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 9px; align-items: start; padding: 10px; border-radius: 12px; background: rgba(8,12,24,.26); }
.ui-change-value { min-height: 38px; padding: 8px; border-radius: 9px; background: rgba(8,12,24,.45); color: #d7e1ef; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-json { max-height: 340px; overflow: auto; margin: 0; padding: 12px; border-radius: 12px; background: rgba(8,12,24,.48); color: #d8e4f2; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

.ui-auth-card { padding: 24px; }
.ui-auth-logo { width: 68px; height: 68px; display: block; margin: 0 auto 18px; object-fit: contain; }
.ui-auth-card h1 { text-align: center; font-size: 28px; }
.ui-auth-card > p { text-align: center; color: var(--ui-muted); font-size: 12px; line-height: 1.5; margin: 8px 0 22px; }
.ui-inline-actions { display: flex; gap: 10px; align-items: center; }
.ui-inline-actions > * { flex: 1; }
.ui-check-row { display: flex; gap: 9px; align-items: flex-start; color: #d6deec; font-size: 12px; line-height: 1.45; }
.ui-check-row input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ui-primary); }
.ui-password-meter { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.ui-password-meter span { display: block; width: 0; height: 100%; background: var(--ui-danger); transition: .2s ease; }

@media (max-width: 900px) {
  .ui-dashboard-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ui-filter-bar { grid-template-columns: 1fr 1fr; }
  .ui-filter-bar > :first-child { grid-column: 1 / -1; }
  .ui-audit-row { grid-template-columns: 46px minmax(0,1fr) 28px; }
  .ui-audit-row .audit-object,
  .ui-audit-row .audit-result { grid-column: 2; }
}

@media (max-width: 640px) {
  .modern-topbar { height: 64px; }
  .modern-brand-copy small { display: none; }
  .modern-page { width: min(100% - 22px, 1240px); padding-top: 86px; }
  .modern-page-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .modern-header-actions { width: 100%; }
  .ui-dashboard-grid,
  .ui-grid.two,
  .ui-grid.three,
  .ui-form-grid,
  .ui-security-grid { grid-template-columns: 1fr; }
  .ui-field.full { grid-column: auto; }
  .ui-dashboard-card { min-height: 158px; }
  .ui-segmented { width: 100%; }
  .ui-segmented button { flex: 1; padding-inline: 8px; }
  .ui-user-card { grid-template-columns: 46px minmax(0,1fr); }
  .ui-user-avatar { width: 46px; height: 46px; }
  .ui-user-card > .ui-list-arrow { display: none; }
  .ui-modal { padding: 64px 0 0; align-items: stretch; }
  .ui-modal-panel,
  .ui-modal-panel.wide { width: 100%; max-height: calc(100dvh - 64px); min-height: calc(100dvh - 64px); border-radius: 20px 20px 0 0; }
  .ui-modal-footer { flex-wrap: wrap; }
  .ui-modal-footer .ui-btn { flex: 1 1 calc(50% - 6px); }
  .ui-profile-hero { grid-template-columns: 1fr; text-align: center; }
  .ui-profile-avatar-wrap { margin: 0 auto; }
  .ui-profile-copy h3 { text-align: center; }
  .ui-filter-bar { grid-template-columns: 1fr; }
  .ui-filter-bar > :first-child { grid-column: auto; }
  .ui-audit-row { grid-template-columns: 42px minmax(0,1fr) 24px; }
  .ui-audit-avatar { width: 42px; height: 42px; }
  .ui-change-row { grid-template-columns: 1fr; }
  .ui-inline-actions { flex-direction: column; }
  .ui-inline-actions > * { width: 100%; }
}


/* === UI refinement patch 2026-07-30b === */
.ui-profile-avatar-button {
  width: 46px !important;
  height: 46px !important;
  right: 3px !important;
  bottom: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.ui-profile-avatar-button i {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}
.ui-audit-row .ui-list-title,
.ui-audit-row .ui-list-subtitle,
.ui-audit-row .ui-list-meta { display: block; }
.ui-audit-row .ui-list-subtitle { margin-top: 7px; line-height: 1.45; }
.ui-audit-row .ui-list-meta { margin-top: 10px; }
.ui-audit-row .ui-list-meta > span { display: inline-flex; align-items: center; margin: 0 12px 4px 0; }
.ui-audit-row .audit-object {
  padding-left: 18px;
  border-left: 1px solid rgba(148, 163, 184, .12);
}
.ui-audit-row .audit-object .ui-list-subtitle { margin-top: 8px; }
.ui-dashboard-card { position: relative; }
.ui-count-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #dc3f4c;
  border: 2px solid rgba(255,255,255,.14);
  color: white;
  box-shadow: 0 8px 20px rgba(220,63,76,.28);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.ui-count-badge.empty {
  background: rgba(148,163,184,.18);
  border-color: rgba(148,163,184,.22);
  color: #cbd5e1;
  box-shadow: none;
}
@media (max-width: 720px) {
  .ui-audit-row .audit-object { padding-left: 0; border-left: 0; }
}


/* === Cruise UI polish 2026-07-30d === */
/* Compact tabs sit directly above the user entries, like browser/portal tabs. */
.ui-user-tabs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -2px 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.modern-admin .ui-page-tabs.panelTabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 0;
  margin: 0;
  padding: 3px;
  overflow: visible;
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 999px;
  background: rgba(8, 12, 24, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.modern-admin .ui-page-tabs.panelTabs button {
  min-width: 0;
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8f9db5 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1;
  transform: none !important;
}
.modern-admin .ui-page-tabs.panelTabs button:hover {
  background: rgba(255, 255, 255, .055) !important;
  color: #e2e8f0 !important;
}
.modern-admin .ui-page-tabs.panelTabs button.active {
  background: rgba(37, 136, 230, .16) !important;
  color: #a9d5ff !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .20) !important;
}
.modern-admin .ui-page-tabs.panelTabs button::after { display: none !important; }
.modern-admin .ui-page-tabs.panelTabs button i {
  width: 13px;
  font-size: 12px;
  text-align: center;
}
.modern-admin .ui-add-user-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .17) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #a9b6ca !important;
  box-shadow: none !important;
  font-size: 13px;
  transform: none !important;
}
.modern-admin .ui-add-user-button:hover {
  border-color: rgba(96, 165, 250, .34) !important;
  background: rgba(37, 136, 230, .12) !important;
  color: #d8ecff !important;
}

/* User spots: exact map type icon/color, no cramped type label after the title. */
.ui-user-spot-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  color: #f8fafc;
  text-decoration: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ui-border);
  border-radius: 15px;
  transition: .16s ease;
}
.ui-user-spot-card:hover {
  background: rgba(37, 136, 230, .09);
  border-color: var(--ui-border-strong);
  transform: translateY(-1px);
}
.ui-map-pin-mini {
  --spot-color: #2563eb;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px 13px 13px 4px;
  background: var(--spot-color);
  box-shadow: 0 7px 16px rgba(0, 0, 0, .24), inset 0 0 0 2px rgba(255, 255, 255, .18);
  transform: rotate(-45deg);
}
.ui-map-pin-mini i {
  color: #fff;
  font-size: 13px;
  transform: rotate(45deg);
}
.ui-user-spot-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 850;
}
.ui-user-spot-open {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #b9c7da;
  background: rgba(255, 255, 255, .04);
}
.ui-user-spot-card:hover .ui-user-spot-open {
  color: #fff;
  background: rgba(37, 136, 230, .16);
}

/* Audit list: compact vertical rhythm, but explicit icon-to-value spacing. */
.ui-audit-row .ui-audit-actor .ui-list-title {
  display: block;
  line-height: 1.2;
}
.ui-audit-row .ui-audit-actor .ui-list-subtitle {
  display: block;
  margin-top: 2px;
  line-height: 1.25;
}
.ui-audit-row .ui-audit-actor .ui-list-meta {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 15px !important;
  margin-top: 5px !important;
  line-height: 1.25;
}
.ui-audit-row .ui-list-meta > .ui-audit-meta-item {
  display: inline-flex !important;
  align-items: center;
  gap: 7px !important;
  margin: 0 !important;
  white-space: nowrap;
}
.ui-audit-row .ui-audit-meta-item i {
  width: 13px;
  min-width: 13px;
  margin: 0 !important;
  text-align: center;
}
.ui-audit-row .ui-audit-meta-item > span {
  display: inline-block;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .ui-user-tabs-toolbar { gap: 8px; }
  .modern-admin .ui-page-tabs.panelTabs {
    flex: 1;
    min-width: 0;
  }
  .modern-admin .ui-page-tabs.panelTabs button {
    flex: 1;
    padding-inline: 8px;
  }
  .modern-admin .ui-page-tabs.panelTabs button span { display: none; }
  .modern-admin .ui-add-user-button { flex: 0 0 34px; }
}

/* === Cruise unified surfaces and interaction patch 2026-07-30e === */
:root {
  --ui-surface: linear-gradient(160deg, rgba(35, 42, 68, .96), rgba(25, 30, 50, .96));
  --ui-entry-surface: rgba(8, 12, 24, .34);
}

html.modern-admin,
html.modern-admin body {
  background:
    radial-gradient(circle at 10% -10%, rgba(37, 136, 230, .20), transparent 34rem),
    radial-gradient(circle at 95% 10%, rgba(88, 80, 236, .12), transparent 30rem),
    #111426 !important;
}

.ui-card,
.ui-modal-panel,
.modern-page > .ui-accordion {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18) !important;
}
.ui-accordion.ui-subaccordion,
.ui-modal-panel .ui-accordion {
  background: var(--ui-entry-surface) !important;
  box-shadow: none !important;
}
.ui-user-card,
.ui-report-card,
.ui-audit-row,
.ui-user-spot-card {
  background: var(--ui-entry-surface) !important;
}
.ui-user-card:hover,
.ui-report-card:hover,
.ui-audit-row:hover,
.ui-user-spot-card:hover {
  background: rgba(37, 136, 230, .10) !important;
}

.modern-page-header-copy > h1 { margin: 0 !important; }
.modern-page-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  color: #8bc4ff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.modern-page-subtitle { margin-top: 7px !important; }

.ui-tabs-toolbar,
.ui-user-tabs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -2px 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.modern-admin .ui-page-tabs,
.modern-admin .ui-page-tabs.panelTabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 0;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 999px;
  background: rgba(8, 12, 24, .42);
}
.modern-admin .ui-page-tabs button,
.modern-admin .ui-page-tabs.panelTabs button {
  min-width: 0;
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8f9db5 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1;
  transform: none !important;
}
.modern-admin .ui-page-tabs button:hover { background: rgba(255,255,255,.055) !important; color: #e2e8f0 !important; }
.modern-admin .ui-page-tabs button.active { background: rgba(37,136,230,.16) !important; color: #a9d5ff !important; box-shadow: inset 0 0 0 1px rgba(96,165,250,.20) !important; }
.modern-admin .ui-page-tabs button em {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(148,163,184,.12);
  color: #c9d4e5;
  font-size: 10px;
  font-style: normal;
}
.modern-admin .ui-page-tabs button.active em { background: rgba(37,136,230,.20); color: #d7ebff; }
.modern-admin .ui-toolbar-icon-button,
.modern-admin .ui-add-user-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148,163,184,.17) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.045) !important;
  color: #a9b6ca !important;
  box-shadow: none !important;
  font-size: 13px;
  transform: none !important;
}
.modern-admin .ui-toolbar-icon-button:hover { border-color: rgba(96,165,250,.34) !important; background: rgba(37,136,230,.12) !important; color: #d8ecff !important; }

.ui-security-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ui-info-tile {
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 11px;
  align-items: center;
  padding: 12px !important;
  background: rgba(8,12,24,.34) !important;
}
.ui-info-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(37,136,230,.13);
  color: #8bc4ff;
}
.ui-info-icon.green { background: rgba(34,197,94,.13); color:#86efac; }
.ui-info-icon.violet { background: rgba(139,92,246,.14); color:#c4b5fd; }
.ui-info-icon.cyan { background: rgba(6,182,212,.13); color:#67e8f9; }
.ui-info-icon.amber { background: rgba(245,158,11,.13); color:#fde68a; }
.ui-info-icon.rose { background: rgba(244,63,94,.13); color:#fda4af; }
.ui-info-tile > div { min-width: 0; }
.ui-info-tile strong { overflow-wrap:anywhere; }
.ui-ip-type {
  display: inline-flex !important;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(148,163,184,.12);
  color: #b8c3d5;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .04em;
}

.ui-avatar-preview-button {
  width: 138px;
  height: 138px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: zoom-in;
}
.ui-avatar-preview-button:hover { transform: scale(1.015) !important; }
.ui-image-viewer-panel {
  width: min(92vw, 900px);
  max-height: calc(100dvh - 110px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.58);
}
.ui-image-viewer-header { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:rgba(28,34,56,.96);border-bottom:1px solid var(--ui-border); }
.ui-image-viewer-body { min-height:0;display:grid;place-items:center;padding:18px;overflow:auto;background:rgba(8,12,24,.30); }
.ui-image-viewer-body img { max-width:100%;max-height:calc(100dvh - 190px);object-fit:contain;border-radius:16px;box-shadow:0 18px 55px rgba(0,0,0,.45); }

.ui-confirm-panel { width: min(540px,100%) !important; }
.ui-modal-title-icon.danger { background:rgba(220,63,76,.14);color:#fda4af; }
.ui-confirm-target { display:flex;flex-direction:column;gap:4px;padding:13px 14px;margin-bottom:14px;border:1px solid rgba(148,163,184,.14);border-radius:14px;background:rgba(8,12,24,.34); }
.ui-confirm-target strong { font-size:14px; }
.ui-confirm-target span { color:var(--ui-muted);font-size:11px;overflow-wrap:anywhere; }
.ui-confirm-copy { color:#b8c4d7;line-height:1.55;font-size:12px; }

.ui-audit-row .ui-audit-actor .ui-list-subtitle { margin-top:2px !important; }
.ui-audit-row .ui-audit-actor .ui-list-meta { margin-top:4px !important; gap:4px 15px !important; }
.ui-audit-row .ui-audit-meta-item { gap:8px !important; }
.ui-audit-row .ui-audit-meta-item i { margin-right:0 !important; }

@media (max-width:640px) {
  .ui-tabs-toolbar,.ui-user-tabs-toolbar { gap:8px; }
  .modern-admin .ui-page-tabs { flex:1;min-width:0; }
  .modern-admin .ui-page-tabs button { flex:1;padding-inline:8px; }
  .ui-security-grid { grid-template-columns:1fr; }
  .ui-image-viewer-panel { width:100%;max-height:calc(100dvh - 64px);min-height:calc(100dvh - 64px);border-radius:20px 20px 0 0; }
}


/* === Cruise UI consistency round 5: reversed container/entry surfaces === */
:root {
  --ui-container-surface: rgba(8, 12, 24, .46);
  --ui-entry-surface-light: linear-gradient(160deg, rgba(35, 42, 68, .96), rgba(25, 30, 50, .96));
  --ui-field-surface: rgba(8, 12, 24, .58);
}

html.modern-admin,
html.modern-admin body {
  background-color: #111426 !important;
  background-image:
    radial-gradient(circle at 10% -10%, rgba(37, 136, 230, .20), transparent 34rem),
    radial-gradient(circle at 95% 10%, rgba(88, 80, 236, .12), transparent 30rem) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Darker containers, lighter entries everywhere. */
.modern-admin .ui-card,
.modern-admin .ui-modal-panel,
.modern-admin .modern-page > .ui-accordion {
  background: var(--ui-container-surface) !important;
  border-color: var(--ui-border) !important;
}
.modern-admin .ui-user-card,
.modern-admin .ui-report-card,
.modern-admin .ui-audit-row,
.modern-admin .ui-user-spot-card,
.modern-admin .ui-dashboard-card,
.modern-admin .ui-info-tile,
.modern-admin .ui-accordion.ui-subaccordion,
.modern-admin .ui-modal-panel .ui-accordion,
.modern-admin .ui-filter-panel.ui-card,
.modern-admin .ui-speech-card,
.modern-admin .ui-detail-row {
  background: var(--ui-entry-surface-light) !important;
  border-color: rgba(148, 163, 184, .16) !important;
}
.modern-admin .ui-user-card:hover,
.modern-admin .ui-report-card:hover,
.modern-admin .ui-audit-row:hover,
.modern-admin .ui-user-spot-card:hover,
.modern-admin .ui-dashboard-card:hover {
  background: linear-gradient(160deg, rgba(42, 53, 88, .98), rgba(28, 35, 60, .98)) !important;
}

/* The Users tabs now use the exact Reports tab component. */
.modern-admin #userTabsWrapper .ui-page-tabs {
  overflow: visible !important;
  border-radius: 999px !important;
}
.modern-admin #userTabsWrapper .ui-page-tabs button {
  border-radius: 999px !important;
}

/* One form-field language throughout Profile, Users, Reports and Audit Logs. */
.modern-admin .ui-field input,
.modern-admin .ui-field textarea,
.modern-admin .ui-field select,
.modern-admin .ui-input {
  min-height: 43px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 12px !important;
  background: var(--ui-field-surface) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018) !important;
}
.modern-admin .ui-field input:focus,
.modern-admin .ui-field textarea:focus,
.modern-admin .ui-field select:focus,
.modern-admin .ui-input:focus {
  border-color: rgba(96, 165, 250, .68) !important;
  box-shadow: 0 0 0 3px rgba(37, 136, 230, .12) !important;
}

/* =====================================================================
   Cruise UI consistency round 6 — shared surfaces, modal chrome and mobile
   ===================================================================== */
:root {
  --ui-bg: #101426;
  --ui-page-surface: #151a2d;
  --ui-panel: #181e33;
  --ui-panel-elevated: #1b2238;
  --ui-entry: #202840;
  --ui-entry-hover: #252f4a;
  --ui-field: #11172a;
  --ui-modal-surface: #181e33;
  --ui-border: rgba(148, 163, 184, .17);
  --ui-border-soft: rgba(148, 163, 184, .11);
}

html.modern-admin,
html.modern-admin body {
  background-color: var(--ui-bg) !important;
  background-image:
    radial-gradient(circle at 8% -8%, rgba(37, 136, 230, .18), transparent 34rem),
    radial-gradient(circle at 95% 4%, rgba(88, 80, 236, .11), transparent 31rem) !important;
}

/* One exact topbar across all non-map pages. */
.modern-topbar {
  height: 70px !important;
  background: linear-gradient(90deg, rgba(13, 17, 31, .98), rgba(20, 24, 43, .97)) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16) !important;
}
.modern-brand img { width: 38px !important; height: 38px !important; }
.modern-page { padding-top: 116px !important; }
.modern-page-header { margin-bottom: 25px !important; }

/* Profile is the visual reference: dark containers with subtly lighter content. */
.modern-admin .ui-card,
.modern-admin .modern-page > .ui-accordion,
.modern-admin .ui-filter-panel.ui-card {
  background: var(--ui-panel) !important;
  background-image: none !important;
  border-color: var(--ui-border) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16) !important;
}
.modern-admin .ui-user-card,
.modern-admin .ui-report-card,
.modern-admin .ui-audit-row,
.modern-admin .ui-user-spot-card,
.modern-admin .ui-dashboard-card,
.modern-admin .ui-info-tile,
.modern-admin .ui-speech-card,
.modern-admin .ui-modal-panel .ui-card,
.modern-admin .ui-modal-panel .ui-speech-card,
.modern-admin .ui-modal-panel .ui-confirm-target {
  background: var(--ui-entry) !important;
  background-image: none !important;
  border-color: var(--ui-border-soft) !important;
  box-shadow: none !important;
}
.modern-admin .ui-user-card:hover,
.modern-admin .ui-report-card:hover,
.modern-admin .ui-audit-row:hover,
.modern-admin .ui-user-spot-card:hover,
.modern-admin .ui-dashboard-card:hover {
  background: var(--ui-entry-hover) !important;
  border-color: rgba(96, 165, 250, .28) !important;
}

/* Shared form language with a deliberate label-to-field gap. */
.modern-admin .ui-field { display: flex; flex-direction: column; gap: 9px; }
.modern-admin .ui-field label { margin: 0 !important; line-height: 1.25; }
.modern-admin .ui-field-hint { margin: 0 0 9px !important; }
.modern-admin .ui-field input,
.modern-admin .ui-field textarea,
.modern-admin .ui-field select,
.modern-admin .ui-input {
  background: var(--ui-field) !important;
  border-color: rgba(148, 163, 184, .19) !important;
}

/* Modal shell: header touches the rounded top, body is opaque, footer is quiet. */
.modern-admin .ui-modal {
  background: rgba(5, 8, 18, .78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.modern-admin .ui-modal-panel,
.modern-admin .user-modal-content {
  width: min(780px, 100%);
  max-width: none !important;
  padding: 0 !important;
  margin: 0 0 30px !important;
  overflow: hidden !important;
  background: var(--ui-modal-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .52) !important;
}
.modern-admin .ui-modal-panel.wide,
.modern-admin #userModal .ui-modal-panel { width: min(1040px, 100%) !important; }
.modern-admin .ui-modal-header,
.modern-admin .user-modal-header,
.modern-admin .ui-image-viewer-header {
  width: 100% !important;
  min-height: 70px;
  margin: 0 !important;
  padding: 15px 18px !important;
  background: var(--ui-modal-surface) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
}
.modern-admin .ui-modal-body {
  padding: 18px !important;
  background: var(--ui-modal-surface) !important;
  background-image: none !important;
}
.modern-admin .ui-modal-footer {
  min-height: 66px;
  align-items: flex-end;
  padding: 8px 18px 18px !important;
  background: var(--ui-modal-surface) !important;
  background-image: none !important;
  border: 0 !important;
}
.modern-admin .ui-modal-close,
.modern-admin .closeUserModal {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(37, 99, 235, .92) !important;
  color: white !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
.modern-admin .ui-modal-close:hover,
.modern-admin .closeUserModal:hover { background: #1d6fe0 !important; }

/* Accordions should read as sections, not modal-inside-modal cards. */
.modern-admin .ui-modal-panel .ui-accordion,
.modern-admin .modern-page > .ui-accordion {
  background: var(--ui-panel-elevated) !important;
  background-image: none !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}
.modern-admin .ui-accordion > summary {
  background: transparent !important;
  border: 0 !important;
}
.modern-admin .ui-accordion-content {
  padding: 14px 15px 16px !important;
  border-top: 1px solid var(--ui-border-soft) !important;
}
.modern-admin .ui-subaccordion {
  background: var(--ui-panel) !important;
  margin-top: 11px !important;
}
.modern-admin .ui-subaccordion .ui-accordion-content {
  padding-top: 13px !important;
}
.modern-admin .ui-permission-list { padding-top: 0 !important; }
.modern-admin .ui-permission { background: var(--ui-entry) !important; }

/* Security information: compact colored icon directly beside the label. */
.modern-admin .ui-security-grid { gap: 10px !important; }
.modern-admin .ui-info-tile {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  min-height: 76px;
  padding: 12px 13px !important;
}
.modern-admin .ui-info-icon {
  width: 18px !important;
  height: 18px !important;
  margin-top: 1px;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
}
.modern-admin .ui-info-tile > div > span {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  min-height: 18px;
  color: #9ecfff !important;
  font-weight: 800;
}
.modern-admin .ui-info-tile:has(.green) > div > span { color: #86efac !important; }
.modern-admin .ui-info-tile:has(.violet) > div > span { color: #c4b5fd !important; }
.modern-admin .ui-info-tile:has(.cyan) > div > span { color: #67e8f9 !important; }
.modern-admin .ui-info-tile:has(.amber) > div > span { color: #fde68a !important; }
.modern-admin .ui-info-tile:has(.rose) > div > span { color: #fda4af !important; }
.modern-admin .ui-info-tile strong {
  margin-top: 7px !important;
  color: #f3f7ff;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.modern-admin .ui-ip-type { display: none !important; }

/* Audit list and detail use the same controlled contrast as Profile. */
.modern-admin #auditList { gap: 9px !important; }
.modern-admin .ui-audit-row { padding: 12px 13px !important; }
.modern-admin #auditDetailModal .ui-card { background: var(--ui-panel-elevated) !important; }
.modern-admin #auditDetailModal .ui-detail-row {
  background: var(--ui-entry) !important;
  border-bottom-color: rgba(148, 163, 184, .12) !important;
  padding: 12px !important;
}
.modern-admin #auditDetailModal .ui-detail-row:first-child { border-radius: 12px 12px 0 0; }
.modern-admin #auditDetailModal .ui-detail-row:last-child { border-radius: 0 0 12px 12px; }
.modern-admin #auditDetailModal .ui-empty,
.modern-admin #auditDetailModal .ui-json,
.modern-admin #auditDetailModal .ui-change-row { background: var(--ui-entry) !important; }
.modern-admin .ui-filter-bar {
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(130px, .8fr)) 42px 42px !important;
}

/* Compact section actions on Profile; buttons retain the established button size. */
.profile-section-actions,
.modern-admin .profile-section-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
}
.profile-section-actions .ui-btn { width: auto !important; flex: 0 0 auto !important; }

/* Keep the user editor as one continuous modal shell. */
.modern-admin #userModal .ui-modal-body { padding: 16px 18px 20px !important; }
.modern-admin #userModal .ui-accordion:last-child { margin-bottom: 0; }
.modern-admin #newUserModal .ui-modal-panel { width: min(760px, 100%) !important; }

@media (max-width: 760px) {
  .modern-page { width: min(100% - 24px, 1240px); padding-top: 101px !important; padding-bottom: 30px !important; }
  .modern-page-header { margin-bottom: 19px !important; }
  .modern-admin .ui-modal { padding: 64px 0 0 !important; }
  .modern-admin .ui-modal-panel,
  .modern-admin .ui-modal-panel.wide,
  .modern-admin .user-modal-content,
  .modern-admin #userModal .ui-modal-panel {
    width: 100% !important;
    max-height: calc(100dvh - 64px) !important;
    min-height: calc(100dvh - 64px) !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .modern-admin .ui-modal-header { min-height: 64px; padding: 13px 14px !important; }
  .modern-admin .ui-modal-body { padding: 14px !important; }
  .modern-admin .ui-modal-footer { padding: 8px 14px 14px !important; }
  .modern-admin .ui-filter-bar { grid-template-columns: 1fr 42px 42px !important; }
  .modern-admin .ui-filter-bar #auditAction,
  .modern-admin .ui-filter-bar #auditObjectType,
  .modern-admin .ui-filter-bar #auditResult { grid-column: 1 / -1; }
  .modern-admin .ui-filter-bar #auditSearch { grid-column: 1 / 2; }
  .modern-admin .ui-security-grid { grid-template-columns: 1fr !important; }
  .profile-section-actions { flex-wrap: wrap; }
}

/* Round 6 viewer modal follows the same shell. */
.modern-admin .ui-image-viewer-panel {
  background: var(--ui-modal-surface) !important;
  background-image: none !important;
  border-color: var(--ui-border) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}
.modern-admin .ui-image-viewer-body {
  background: var(--ui-modal-surface) !important;
  padding: 18px !important;
}

/* =====================================================================
   Cruise UI alignment round 7 — left actions, shared avatar and spacing
   ===================================================================== */
:root {
  --ui-modal-header: #202840;
  --ui-modal-body: #181e33;
}

/* The map and admin brands now use the same weight instead of relying on
   different browser defaults for <strong>. */
.modern-brand-copy strong {
  font-weight: 700 !important;
}

/* Give every page heading a clearer visual break below the fixed topbar. */
.modern-page {
  padding-top: 134px !important;
}
.modern-page-header {
  margin-bottom: 26px !important;
}

/* The profile control is identical in every topbar. */
.modern-avatar-button {
  border: 2px solid rgba(96, 165, 250, .72) !important;
  box-shadow: 0 0 0 3px rgba(37, 136, 230, .11) !important;
  background: #11172a !important;
}
.modern-avatar-button:hover {
  border-color: rgba(125, 190, 255, .92) !important;
  box-shadow: 0 0 0 4px rgba(37, 136, 230, .15) !important;
}

/* Icon actions are rounded squares, not circles. Tabs remain pills. */
.modern-admin .ui-toolbar-icon-button,
.modern-admin .ui-add-user-button,
.modern-admin .ui-btn.icon-only {
  border-radius: 11px !important;
}

/* Buttons are left-aligned unless a component explicitly overrides it. */
.profile-section-actions,
.modern-admin .profile-section-actions,
.modern-admin #userModal .ui-inline-actions,
.modern-admin #userModal .ui-accordion-content > .ui-btn,
.modern-admin .ui-modal-footer {
  justify-content: flex-start !important;
}
.profile-section-actions .ui-btn,
.modern-admin #userModal .ui-inline-actions > *,
.modern-admin #userModal .ui-accordion-content > .ui-btn,
.modern-admin #savePermBtn {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
.modern-admin #userModal .ui-inline-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 9px !important;
}
.modern-admin #savePermBtn {
  display: inline-flex !important;
}
.modern-admin #banUserBtn,
.modern-admin #deleteUserBtn {
  background: #c92d3b !important;
  border-color: #e24b58 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(201, 45, 59, .18) !important;
}
.modern-admin #banUserBtn:hover,
.modern-admin #deleteUserBtn:hover {
  background: #ad202e !important;
}

/* Modal headers are deliberately lighter than their opaque body. */
.modern-admin .ui-modal-panel,
.modern-admin .user-modal-content,
.modern-admin .ui-image-viewer-panel {
  background: var(--ui-modal-body) !important;
}
.modern-admin .ui-modal-header,
.modern-admin .user-modal-header,
.modern-admin .ui-image-viewer-header {
  background: var(--ui-modal-header) !important;
}
.modern-admin .ui-modal-body,
.modern-admin .ui-modal-footer,
.modern-admin .ui-image-viewer-body {
  background: var(--ui-modal-body) !important;
}

/* Keep action buttons compact even on mobile; wrap instead of stretching. */
@media (max-width: 760px) {
  .modern-page {
    padding-top: 116px !important;
  }
  .profile-section-actions,
  .modern-admin #userModal .ui-inline-actions,
  .modern-admin .ui-modal-footer {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  .profile-section-actions .ui-btn,
  .modern-admin #userModal .ui-inline-actions > *,
  .modern-admin .ui-modal-footer .ui-btn {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

/* =====================================================================
   Cruise UI polish round 8 — page spacing and mobile avatar geometry
   ===================================================================== */

/* Keep a clearly visible content gap beneath the fixed 70px topbar. */
.modern-page {
  padding-top: 158px !important;
}

/* Mobile still receives breathing room beneath its 64px topbar without
   wasting excessive vertical space. */
@media (max-width: 640px) {
  .modern-page {
    padding-top: 118px !important;
  }

  /* Profile controls always stay circular, even when the other topbar
     actions become compact rounded squares. */
  .modern-avatar-button,
  .modern-avatar-button img,
  #topAvatar {
    border-radius: 50% !important;
  }
}

/* =====================================================================
   Cruise UI polish round 9 — uniform modal gutters and mobile alignment
   ===================================================================== */
:root {
  /* Exact field shade used by the User Management profile form. */
  --ui-field: #0f172a;
  --ui-field-surface: #0f172a;
}

/* Create an unmistakable gap between the fixed topbar and every page title. */
html.modern-admin main.modern-page,
html.modern-admin #app.modern-page {
  padding-top: 184px !important;
}

/* Keep the same dark input surface throughout Profile and User Management. */
.modern-admin .ui-field input,
.modern-admin .ui-field textarea,
.modern-admin .ui-field select,
.modern-admin .ui-input {
  background-color: #0f172a !important;
  background-image: none !important;
}

/* Profile identity stays left-aligned. On normal mobile widths the text sits
   beside the avatar; only very narrow screens move it underneath. */
@media (max-width: 640px) {
  html.modern-admin main.modern-page,
  html.modern-admin #app.modern-page {
    padding-top: 134px !important;
  }

  .modern-admin .profile-hero-layout,
  .modern-admin .ui-profile-hero.profile-hero-layout {
    grid-template-columns: 156px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
    text-align: left !important;
  }
  .modern-admin .profile-main-wrap,
  .modern-admin .ui-profile-avatar-wrap.profile-main-wrap {
    margin: 0 !important;
    justify-self: start !important;
  }
  .modern-admin .ui-profile-copy,
  .modern-admin .ui-profile-copy h3,
  .modern-admin .ui-profile-copy p {
    min-width: 0 !important;
    text-align: left !important;
  }
  .modern-admin .ui-profile-copy p {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Every admin modal retains equal breathing room on all four sides. */
  .modern-admin .ui-modal,
  .modern-admin .user-modal {
    padding: 84px 14px 14px !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }
  .modern-admin .ui-modal-panel,
  .modern-admin .ui-modal-panel.wide,
  .modern-admin .user-modal-content,
  .modern-admin #userModal .ui-modal-panel,
  .modern-admin #newUserModal .ui-modal-panel,
  .modern-admin .ui-image-viewer-panel {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 98px) !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 420px) {
  .modern-admin .profile-hero-layout,
  .modern-admin .ui-profile-hero.profile-hero-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .modern-admin .ui-profile-copy {
    justify-self: stretch !important;
  }
}

/* =====================================================================
   Cruise UI polish round 10 — balanced headings, exact fields and gutters
   ===================================================================== */
:root {
  --ui-shared-field: #0f172a;
}

/* Round 9 created too much empty space. Keep a clear but restrained gap
   below the fixed topbar on every standard page. */
html.modern-admin main.modern-page,
html.modern-admin #app.modern-page,
html.modern-admin .modern-page {
  padding-top: 168px !important;
}

/* Profile is the field reference for the entire administration interface. */
.modern-admin .ui-field input,
.modern-admin .ui-field textarea,
.modern-admin .ui-field select,
.modern-admin .ui-input {
  background: var(--ui-shared-field) !important;
  background-color: var(--ui-shared-field) !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, .19) !important;
  color: #f8fafc !important;
  color-scheme: dark;
  opacity: 1 !important;
}

/* Equal outer spacing on all sides. Short dialogs remain vertically centred;
   tall dialogs scroll inside the available viewport instead of gaining a
   larger top gap than bottom gap. */
.modern-admin .ui-modal,
.modern-admin .user-modal {
  padding: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.modern-admin .ui-modal-panel,
.modern-admin .ui-modal-panel.wide,
.modern-admin .user-modal-content,
.modern-admin #userModal .ui-modal-panel,
.modern-admin #newUserModal .ui-modal-panel,
.modern-admin .ui-image-viewer-panel {
  max-height: calc(100dvh - 48px) !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  html.modern-admin main.modern-page,
  html.modern-admin #app.modern-page,
  html.modern-admin .modern-page {
    padding-top: 120px !important;
  }

  .modern-admin .ui-modal,
  .modern-admin .user-modal {
    padding: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .modern-admin .ui-modal-panel,
  .modern-admin .ui-modal-panel.wide,
  .modern-admin .user-modal-content,
  .modern-admin #userModal .ui-modal-panel,
  .modern-admin #newUserModal .ui-modal-panel,
  .modern-admin .ui-image-viewer-panel {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }
}


/* =====================================================================
   Cruise administration polish round 11 — filters and checkbox parity
   ===================================================================== */

/* Audit toolbar contains only the two adjacent icon controls. All search and
   select fields live inside the collapsed filter panel on every screen size. */
.modern-admin .audit-filter-actions.ui-filter-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
}
.modern-admin .audit-filter-actions.ui-filter-bar > * {
  grid-column: auto !important;
}
.modern-admin .audit-filter-actions .ui-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border-radius: 11px !important;
}
.modern-admin .audit-filter-actions .ui-btn.active {
  border-color: rgba(96, 165, 250, .38) !important;
  background: rgba(37, 136, 230, .17) !important;
  color: #d8ecff !important;
}
.modern-admin #auditFilters.ui-filter-panel {
  margin: 0 0 14px !important;
}
.modern-admin .audit-primary-filters .ui-field.full {
  grid-column: 1 / -1 !important;
}
.modern-admin .audit-filter-footer {
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 12px !important;
}

/* Match map checkboxes in all administration pages, including permissions. */
.modern-admin input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 18px !important;
  border: 1.5px solid rgba(226, 232, 240, .95) !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28) !important;
  color-scheme: light !important;
  cursor: pointer !important;
}
.modern-admin input[type="checkbox"]:checked {
  border-color: #2588e6 !important;
  background-color: #2588e6 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.3' d='M3.1 8.2 6.4 11.3 13 4.7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}
.modern-admin input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(37, 136, 230, .25) !important;
  outline-offset: 2px !important;
}

@media (max-width: 640px) {
  .modern-admin .audit-filter-actions.ui-filter-bar {
    display: flex !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
  }
  .modern-admin .audit-primary-filters.ui-form-grid {
    grid-template-columns: 1fr !important;
  }
  .modern-admin .audit-primary-filters .ui-field,
  .modern-admin .audit-primary-filters .ui-field.full {
    grid-column: 1 !important;
  }
}

/* ---------------------------------------------------------
   FLOATING NOTIFICATIONS
---------------------------------------------------------- */
.cruise-toast-stack {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  z-index: 2147483647;
  display: grid;
  width: min(420px, calc(100vw - 28px));
  gap: 10px;
  pointer-events: none;
}

.cruise-toast {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 9px 9px 11px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 15px;
  background: #20283c;
  color: #eef5ff;
  box-shadow: 0 16px 42px rgba(2, 6, 23, .48);
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto;
  overflow: hidden;
}

.cruise-toast.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cruise-toast.leaving {
  opacity: 0;
  transform: translateY(-8px) scale(.98);
}

.cruise-toast-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(96, 165, 250, .14);
  color: #93c5fd;
  font-size: 15px;
}

.cruise-toast.success { border-color: rgba(34, 197, 94, .35); }
.cruise-toast.success .cruise-toast-icon { background: rgba(34, 197, 94, .14); color: #86efac; }
.cruise-toast.error { border-color: rgba(244, 63, 94, .38); }
.cruise-toast.error .cruise-toast-icon { background: rgba(244, 63, 94, .15); color: #fda4af; }
.cruise-toast.warning { border-color: rgba(245, 158, 11, .38); }
.cruise-toast.warning .cruise-toast-icon { background: rgba(245, 158, 11, .15); color: #fcd34d; }

.cruise-toast-message {
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cruise-toast-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
}

.cruise-toast-close:hover {
  background: rgba(255, 255, 255, .10);
  color: #fff;
}

@media (max-width: 600px) {
  .cruise-toast-stack {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 12px;
    right: 12px;
    width: auto;
    gap: 8px;
  }

  .cruise-toast {
    grid-template-columns: 32px minmax(0, 1fr) 30px;
    min-height: 52px;
    border-radius: 14px;
  }
}


/* =====================================================================
   Cruise UI polish round 13 — compact headings and mobile subtitle parity
   ===================================================================== */

/* Keep only a small, deliberate gap below the fixed topbar. Earlier rounds
   accumulated progressively larger padding values, so this final rule is the
   single source of truth for standard page positioning. */
html.modern-admin main.modern-page,
html.modern-admin #app.modern-page,
html.modern-admin .modern-page {
  padding-top: 98px !important;
}

/* The page subtitle in the brand is part of the shared topbar on every page,
   including phones. Let the text column shrink and ellipsize instead of
   hiding the subtitle. */
.modern-topbar .modern-brand-copy {
  min-width: 0 !important;
  max-width: 150px;
}
.modern-topbar .modern-brand-copy small {
  display: block !important;
}

@media (max-width: 640px) {
  html.modern-admin main.modern-page,
  html.modern-admin #app.modern-page,
  html.modern-admin .modern-page {
    padding-top: 84px !important;
  }

  .modern-topbar .modern-brand-copy {
    max-width: 112px !important;
  }
  .modern-topbar .modern-brand-copy strong {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }
  .modern-topbar .modern-brand-copy small {
    display: block !important;
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 370px) {
  .modern-topbar .modern-brand-copy {
    max-width: 92px !important;
  }
}

/* Round 14 report decision controls. */
.report-notify-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 13px;
  background: rgba(15, 23, 42, .72);
  cursor: pointer;
}
.report-notify-choice span { display: grid; gap: 3px; }
.report-notify-choice strong { font-size: 14px; color: #f8fafc; }
.report-notify-choice small { color: #94a3b8; font-size: 12px; line-height: 1.35; }
.ui-modal-title-icon.danger { color: #fb7185; background: rgba(239, 68, 68, .12); }

/* User Management: keep the exact shared topbar/page system and modernise only
   the existing account-specific controls. */
.modern-admin #umMainTabs.um-main-tabs{max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important}
.modern-admin #userTabsWrapper{margin-top:0!important}
.modern-admin #userListActive,.modern-admin #userListPending{margin-top:14px!important}
.modern-admin .permission-category-tabs{display:flex!important;overflow-x:auto!important;gap:5px!important;padding:5px!important}
.modern-admin .permission-category-tabs button{white-space:nowrap!important;flex:0 0 auto!important}
.modern-admin #userModal .permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.modern-admin #userPinsList{display:grid;gap:8px}
.user-delete-options-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.76);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.user-delete-options-panel{width:min(500px,100%);padding:20px;border:1px solid rgba(148,163,184,.18);border-radius:20px;background:var(--ui-modal-body,#151a2d);box-shadow:0 30px 90px rgba(0,0,0,.55);color:#f8fafc}.user-delete-options-icon{width:44px;height:44px;display:grid;place-items:center;margin-bottom:12px;border-radius:14px;background:rgba(239,68,68,.13);color:#fda4af}.user-delete-options-panel h3{margin:0 0 7px}.user-delete-options-panel>p{margin:0 0 15px;color:#aeb8cc;font-size:12px;line-height:1.55}.user-delete-options-panel>label{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;margin-top:8px;padding:11px;border:1px solid rgba(148,163,184,.13);border-radius:13px;background:rgba(255,255,255,.035);cursor:pointer}.user-delete-options-panel label input{width:18px;height:18px;accent-color:#2563eb}.user-delete-options-panel label strong,.user-delete-options-panel label small{display:block}.user-delete-options-panel label small{margin-top:3px;color:#94a3b8;font-size:10px}.user-delete-options-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
@media(max-width:700px){.modern-admin #userModal .permission-grid{grid-template-columns:1fr!important}.user-delete-options-actions{flex-wrap:wrap}}

/* =====================================================================
   iOS Home Screen / standalone safe-area support — shared across Cruise
   ===================================================================== */
@supports (padding-top: env(safe-area-inset-top)) {
  html.cruise-standalone,
  html.cruise-standalone body {
    background-color: #0f1222 !important;
  }

  /* The dark bar itself covers the camera/Dynamic Island area. Its normal
     70px control row remains intact below the safe-area inset. */
  html.cruise-standalone .modern-topbar {
    height: calc(70px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(70px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
  }

  /* Preserve the existing visual gap below the fixed topbar, but move the
     page by the same safe-area amount so content can never sit underneath it. */
  html.cruise-standalone.modern-admin main.modern-page,
  html.cruise-standalone.modern-admin #app.modern-page,
  html.cruise-standalone.modern-admin .modern-page {
    padding-top: calc(98px + env(safe-area-inset-top, 0px)) !important;
  }

  @media (max-width: 640px) {
    html.cruise-standalone .modern-topbar {
      height: calc(64px + env(safe-area-inset-top, 0px)) !important;
      min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
      padding-top: env(safe-area-inset-top, 0px) !important;
      padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
      padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    }

    html.cruise-standalone.modern-admin main.modern-page,
    html.cruise-standalone.modern-admin #app.modern-page,
    html.cruise-standalone.modern-admin .modern-page {
      padding-top: calc(84px + env(safe-area-inset-top, 0px)) !important;
    }

    /* Full-screen mobile admin modals start below the enlarged standalone
       topbar instead of underneath the camera area. */
    html.cruise-standalone.modern-admin .ui-modal {
      padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    }

    html.cruise-standalone.modern-admin .ui-modal-panel,
    html.cruise-standalone.modern-admin .ui-modal-panel.wide,
    html.cruise-standalone.modern-admin .user-modal-content,
    html.cruise-standalone.modern-admin #userModal .ui-modal-panel {
      max-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)) !important;
      min-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)) !important;
    }
  }
}

@supports (padding-top: env(safe-area-inset-top)) {
  /* Live Support uses its own .support-main spacing instead of .modern-page. */
  html.cruise-standalone body.support-user-page .support-main {
    padding-top: calc(82px + env(safe-area-inset-top, 0px)) !important;
  }
  html.cruise-standalone body.support-user-page #chatView.chat-card {
    height: calc(var(--support-visible-height, 100dvh) - 94px - env(safe-area-inset-top, 0px)) !important;
  }

  @media (max-width: 760px) {
    html.cruise-standalone body.support-user-page .support-main {
      padding-top: calc(74px + env(safe-area-inset-top, 0px)) !important;
    }
    html.cruise-standalone body.support-user-page #chatView.chat-card {
      height: calc(var(--support-visible-height, 100dvh) - 82px - env(safe-area-inset-top, 0px)) !important;
    }
  }
}