body.users-module-active #view-root {
  background: radial-gradient(circle at 96% 2%, rgba(184, 226, 211, .4), transparent 28%), #f8f7f1;
}
[data-permission][hidden],
body.module-home-active .module-hub-page .mh-card[hidden] {
  display: none !important;
}
.ua-page {
  width: min(1420px, calc(100% - 56px));
  margin: 0 auto;
  padding: 42px 0 70px;
  color: #143f37;
  font-family: Manrope, sans-serif;
}
.ua-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.ua-hero p, .ua-modal header p {
  margin: 0 0 7px;
  color: #137866;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .17em;
}
.ua-hero h1 {
  margin: 0;
  font: 400 clamp(42px, 5vw, 64px)/.98 "DM Serif Display", serif;
}
.ua-hero span { display: block; margin-top: 10px; color: #668079; }
.ua-primary, .ua-secondary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0 18px;
  font: 800 12px Manrope, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.ua-primary {
  border: 1px solid #096653;
  color: #fff;
  background: #096653;
  box-shadow: 0 10px 20px rgba(9, 102, 83, .16);
}
.ua-secondary { border: 1px solid #c7d9d3; color: #195d51; background: #fff; }
.ua-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.ua-summary article {
  min-height: 112px;
  padding: 20px;
  border: 1px solid #d3e0dc;
  border-radius: 19px;
  background: rgba(255, 255, 255, .83);
  box-shadow: 0 10px 24px rgba(24, 70, 60, .05);
}
.ua-summary span { display: block; color: #69817b; font-size: 11px; font-weight: 750; }
.ua-summary strong { display: block; margin-top: 9px; font: 400 35px "DM Serif Display", serif; }
.ua-panel {
  overflow: hidden;
  border: 1px solid #ceddd8;
  border-radius: 22px;
  background: #fffefa;
  box-shadow: 0 16px 35px rgba(25, 66, 57, .08);
}
.ua-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 24px;
  border-bottom: 1px solid #dce6e2;
}
.ua-panel-head h2 { margin: 0; font-size: 17px; }
.ua-panel-head p { margin: 4px 0 0; color: #758b85; font-size: 11px; }
.ua-panel-head input {
  width: min(360px, 42vw);
  min-height: 43px;
  border: 1px solid #cbdad5;
  border-radius: 12px;
  padding: 0 14px;
  outline: 0;
  font: 650 13px Manrope, sans-serif;
}
.ua-panel-head input:focus { border-color: #16816d; box-shadow: 0 0 0 4px rgba(22, 129, 109, .1); }
.ua-table-wrap { overflow-x: auto; }
.ua-table { width: 100%; border-collapse: collapse; }
.ua-table th {
  padding: 13px 18px;
  color: #718780;
  background: #f5f7f3;
  font-size: 9px;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
}
.ua-table td {
  padding: 17px 18px;
  border-top: 1px solid #e0e8e5;
  font-size: 12px;
  vertical-align: middle;
}
.ua-table td > strong, .ua-table td > small { display: block; }
.ua-table td > small { margin-top: 4px; color: #81938e; }
.ua-tags { display: flex; flex-wrap: wrap; gap: 5px; max-width: 340px; }
.ua-tags span {
  border-radius: 999px;
  padding: 5px 8px;
  color: #34675c;
  background: #e8f2ed;
  font-size: 8px;
  font-weight: 800;
}
.ua-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 850;
}
.ua-status.active { color: #14705e; background: #def1e9; }
.ua-status.inactive { color: #65736f; background: #e9eeec; }
.ua-status.locked { color: #ad3f2b; background: #ffe2da; }
.ua-status.temporary { color: #8a6500; background: #fff0bc; }
.ua-empty { height: 160px; color: #748983; text-align: center; }
.ua-modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 43, 36, .66);
  backdrop-filter: blur(7px);
}
.ua-modal {
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 24px;
  background: #fffefa;
  box-shadow: 0 32px 75px rgba(4, 31, 26, .28);
}
.ua-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 28px;
  border-bottom: 1px solid #dce5e2;
}
.ua-modal h2, .ua-access-result h2 { margin: 0; font: 400 32px "DM Serif Display", serif; }
.ua-modal header button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  color: #37665d;
  background: #ecf3f0;
  font-size: 24px;
  cursor: pointer;
}
.ua-modal form { padding: 24px 28px 28px; }
.ua-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ua-form-grid label { display: grid; gap: 7px; color: #31564e; font-size: 11px; font-weight: 800; }
.ua-form-grid label.wide { grid-column: 1 / -1; }
.ua-form-grid input, .ua-form-grid select {
  min-height: 47px;
  box-sizing: border-box;
  border: 1px solid #cbdad5;
  border-radius: 11px;
  padding: 0 13px;
  background: #fff;
  font: 700 13px Manrope, sans-serif;
}
.ua-form-grid input[readonly] { background: #edf2f0; color: #71837e; }
.ua-toggle { align-content: end; }
.ua-toggle input { width: 20px; min-height: 20px; }
.ua-modal fieldset { margin: 22px 0 0; border: 0; padding: 0; }
.ua-modal legend { margin-bottom: 11px; color: #224f46; font-size: 12px; font-weight: 900; }
.ua-permissions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ua-permission {
  display: flex;
  gap: 11px;
  min-height: 59px;
  align-items: center;
  border: 1px solid #d6e2de;
  border-radius: 13px;
  padding: 10px 12px;
  background: #fbfcf9;
  cursor: pointer;
}
.ua-permission:has(input:checked) { border-color: #69ac9d; background: #eaf6f1; }
.ua-permission input { width: 17px; height: 17px; accent-color: #08705c; }
.ua-permission strong, .ua-permission small { display: block; }
.ua-permission strong { font-size: 11px; }
.ua-permission small { margin-top: 3px; color: #7b8e88; font-size: 9px; }
.ua-modal footer, .ua-access-result footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.ua-modal footer span { flex: 1; }
.ua-form-error { min-height: 18px; margin: 14px 0 0; color: #c14c36; font-size: 11px; font-weight: 750; }
.ua-access-result {
  width: min(590px, 100%);
  box-sizing: border-box;
  border-radius: 24px;
  padding: 32px;
  background: #fffefa;
  box-shadow: 0 32px 75px rgba(4, 31, 26, .28);
}
.ua-access-result > span { color: #107865; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.ua-access-result > p { color: #6c827c; }
.ua-access-result > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-top: 22px;
  border: 1px solid #cfe0da;
  border-radius: 16px;
  padding: 18px;
  background: #edf7f2;
}
.ua-access-result small { color: #728982; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.ua-access-result strong { font-size: 15px; }
.ua-access-result footer { justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 900px) {
  .ua-summary { grid-template-columns: 1fr 1fr; }
  .ua-table th:nth-child(3), .ua-table td:nth-child(3),
  .ua-table th:nth-child(5), .ua-table td:nth-child(5) { display: none; }
}
@media (max-width: 650px) {
  .ua-page { width: calc(100% - 28px); padding-top: 25px; }
  .ua-hero { align-items: stretch; flex-direction: column; }
  .ua-summary { grid-template-columns: 1fr 1fr; }
  .ua-panel-head { align-items: stretch; flex-direction: column; }
  .ua-panel-head input { width: 100%; }
  .ua-form-grid, .ua-permissions { grid-template-columns: 1fr; }
  .ua-form-grid label.wide { grid-column: auto; }
  .ua-modal-backdrop { padding: 8px; }
  .ua-modal { max-height: calc(100vh - 16px); border-radius: 18px; }
  .ua-modal footer { flex-wrap: wrap; }
  .ua-modal footer span { display: none; }
}


/* Cybersecurity phase 1: active session administration */
.ua-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ua-session-modal {
  width: min(980px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 24px;
  background: #fffefa;
  box-shadow: 0 32px 75px rgba(4, 31, 26, .3);
}
.ua-session-modal > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #d9e4e0;
  padding: 25px 28px 20px;
}
.ua-session-modal > header p {
  margin: 0 0 5px;
  color: #08705c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}
.ua-session-modal > header h2 { margin: 0; color: #123f36; font-size: 27px; }
.ua-session-modal > header span { display: block; margin-top: 5px; color: #6f827d; font-size: 11px; }
.ua-session-modal > header > button {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  background: #edf3f0;
  color: #285f54;
  font-size: 22px;
  cursor: pointer;
}
.ua-session-list {
  display: grid;
  gap: 10px;
  max-height: 570px;
  overflow: auto;
  padding: 20px 28px 28px;
}
.ua-session-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.25fr) minmax(155px, 1fr) minmax(120px, .72fr) minmax(150px, .9fr) auto;
  align-items: center;
  gap: 15px;
  border: 1px solid #d7e2de;
  border-radius: 15px;
  padding: 15px;
  background: #fbfcfa;
}
.ua-session-row.current { border-color: #82b8ab; background: #edf7f2; }
.ua-session-row strong, .ua-session-row span, .ua-session-row small { display: block; }
.ua-session-row strong { color: #183f37; font-size: 11px; }
.ua-session-row span { margin-top: 4px; color: #748780; font-size: 9px; }
.ua-session-row span b { color: #08705c; }
.ua-session-row small {
  margin-bottom: 4px;
  color: #84958f;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ua-session-close {
  min-height: 38px;
  border: 1px solid #d2ded9;
  border-radius: 10px;
  padding: 0 13px;
  background: #fff;
  color: #b74e3b;
  font: 800 10px Manrope, sans-serif;
  cursor: pointer;
}
.ua-session-close:disabled { color: #67817a; cursor: default; opacity: .75; }
.ua-session-empty, .ua-session-loading {
  margin: 22px 28px 28px;
  border: 1px dashed #cbdad5;
  border-radius: 14px;
  padding: 28px;
  color: #687f78;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}
@media (max-width: 900px) {
  .ua-session-row { grid-template-columns: 1fr 1fr; }
  .ua-session-person { grid-column: 1 / -1; }
  .ua-session-close { justify-self: start; }
}
@media (max-width: 650px) {
  .ua-hero-actions { align-items: stretch; flex-direction: column; }
  .ua-session-modal { max-height: calc(100vh - 16px); border-radius: 18px; }
  .ua-session-modal > header { padding: 20px; }
  .ua-session-list { padding: 15px; }
  .ua-session-row { grid-template-columns: 1fr; }
  .ua-session-person { grid-column: auto; }
}