@import url("/design-system.css?v=1.0.0");
:root {
  --nav: var(--vds-color-nav);
  --blue: var(--vds-color-primary);
  --aqua: var(--vds-color-accent);
  --ink: var(--vds-color-text);
  --muted: var(--vds-color-muted);
  --line: var(--vds-color-border);
  --canvas: var(--vds-color-canvas);
  --paper: var(--vds-color-surface);
  --platform-header: #003b7d;
  --platform-header-mid: #6689b1;
  --platform-header-accent: #99b1cb;
  --platform-header-shadow: rgba(0, 59, 125, 0.28);
}
html[data-platform-kind="development"] {
  --platform-header: #174a2e;
  --platform-header-mid: #4f765f;
  --platform-header-accent: #9bc5a8;
  --platform-header-shadow: rgba(23, 74, 46, 0.3);
}
[hidden] {
  display: none !important;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font:
    14px/1.5 Inter,
    "Segoe UI",
    Arial,
    sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.login {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  background:
    radial-gradient(circle at 20% 15%, #ddf4f3, transparent 30%),
    linear-gradient(135deg, #f8fbfc, #eaf1f3);
  text-align: center;
}
.login .logo,
.brand b {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--aqua), var(--blue));
  font-weight: 900;
}
.login .logo {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  font-size: 32px;
}
.login p {
  margin: 20px 0 0;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.login h1 {
  margin: 4px 0;
  font-size: 34px;
}
.login span {
  color: var(--muted);
}
.login a,
.primary {
  margin-top: 25px;
  border: 0;
  border-radius: 9px;
  padding: 11px 17px;
  color: #fff;
  background: var(--blue);
  font-weight: 750;
  text-decoration: none;
}
body > div#app > header {
  height: 70px;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 0 28px;
  color: #fff;
  background: var(--platform-header);
}
html[data-platform-kind="production"] body > div#app > header {
  background: #003b7d;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand b {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 20px;
}
.brand small,
.brand strong {
  display: block;
}
.brand small {
  color: #d5e2ef;
  font-size: 9px;
  text-transform: uppercase;
}
.brand strong {
  font-size: 16px;
}
#rootNav {
  display: flex;
  align-self: stretch;
  flex: 1;
  min-width: 0;
  overflow: visible;
}
#rootNav > button,
#rootNav .root-menu > button {
  border: 0;
  padding: 0 13px;
  color: #d5e2ef;
  background: transparent;
  white-space: nowrap;
}
#rootNav > button:hover,
#rootNav > button.active,
#rootNav .root-menu:hover > button,
#rootNav .root-menu:focus-within > button,
#rootNav .root-menu.active > button {
  color: #fff;
  background: rgba(153, 177, 203, 0.22);
  border-bottom: 3px solid var(--platform-header-accent);
}
#rootNav .root-menu {
  position: relative;
  display: flex;
  align-self: stretch;
}
#rootNav .root-menu > button {
  display: flex;
  align-items: center;
  gap: 6px;
}
#rootNav .root-menu > button span {
  color: var(--platform-header-accent);
  font-size: 12px;
}
.root-menu-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 100;
  display: none;
  width: max-content;
  min-width: 230px;
  max-width: 340px;
  overflow: visible;
  border: 1px solid var(--platform-header-mid);
  border-radius: 0 0 9px 9px;
  background: var(--platform-header);
  box-shadow: 0 16px 30px var(--platform-header-shadow);
}
.root-menu:hover .root-menu-panel,
.root-menu:focus-within .root-menu-panel {
  display: block;
}
.root-menu-panel a {
  display: block;
  padding: 11px 15px;
  color: #eef4fb;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
  white-space: normal;
}
.root-menu-panel a:first-child {
  border-top: 0;
}
.root-menu-panel a:hover,
.root-menu-panel a:focus {
  color: #fff;
  background: rgba(153, 177, 203, 0.30);
  outline: none;
}
.nav-submenu { position: relative; }
.nav-submenu-trigger { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:11px 15px;color:#eef4fb;border-top:1px solid rgba(255,255,255,.12);cursor:default; }
.nav-submenu-trigger > span { color:var(--platform-header-accent);font-size:18px;line-height:1; }
.nav-submenu-panel { position:absolute;top:-1px;left:100%;display:none;width:max-content;min-width:230px;max-width:340px;border:1px solid var(--platform-header-mid);border-radius:0 9px 9px 9px;background:var(--platform-header);box-shadow:0 16px 30px var(--platform-header-shadow); }
.nav-submenu:hover > .nav-submenu-panel,.nav-submenu:focus-within > .nav-submenu-panel { display:block; }
.nav-submenu:hover > .nav-submenu-trigger,.nav-submenu:focus-within > .nav-submenu-trigger { color:#fff;background:rgba(153,177,203,.30);outline:none; }
.env {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  padding: 5px 9px;
  color: #d5e2ef;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
main {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: auto 1fr;
}
#adminNav {
  width: 230px;
  padding: 25px 14px;
  background: #fff;
  border-right: 1px solid var(--line);
}
#adminNav h3 {
  padding: 0 10px;
}
#adminNav button {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 10px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}
#adminNav button:hover,
#adminNav button.active {
  color: #fff;
  background: var(--blue);
}
#workspace {
  min-width: 0;
  padding: 34px;
}
#adminNav[hidden] + #workspace {
  grid-column: 1 / -1;
  width: 100%;
}
.integrated-module-workspace {
  height: calc(100vh - 70px);
  overflow: hidden;
  padding: 0 !important;
}
.integrated-module-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--canvas);
}
.hero {
  min-height: 108px;
  padding: 18px 24px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(120deg, #0a647f, #11939c);
}
.home-welcome{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:28px;overflow:hidden;border-radius:16px;padding:30px;color:#fff;background:linear-gradient(120deg,#0b607d,#108d9d);box-shadow:0 14px 32px rgba(17,60,78,.16)}.home-welcome:after{position:absolute;right:24px;top:-90px;content:"V";color:rgba(255,255,255,.06);font-size:250px;font-weight:900}.home-welcome>div{position:relative;z-index:1}.home-welcome small,.dashboard-head small{font-size:11px;font-weight:850;letter-spacing:.11em}.home-welcome h1{margin:4px 0 7px;font-size:30px}.home-welcome p{margin:0;color:#d7f0f3}.home-date{min-width:250px;text-align:right}.home-date span,.home-date strong{display:block}.home-date span{color:#d7f0f3}.home-date strong{font-size:18px}.dashboard-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:28px 0 14px}.dashboard-head h2{margin:3px 0}.dashboard-head p{margin:0;color:var(--muted)}.dashboard-head .primary{margin:0}.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.dashboard-pin{display:flex;min-height:190px;flex-direction:column;border:1px solid var(--line);border-radius:13px;padding:19px;color:var(--ink);background:#fff;text-decoration:none;box-shadow:0 8px 20px rgba(17,60,78,.06);transition:transform .15s,border-color .15s}.dashboard-pin:hover{transform:translateY(-2px);border-color:#58beba}.dashboard-pin>span{color:var(--aqua);font-size:10px;font-weight:900;letter-spacing:.1em}.dashboard-pin h3{margin:7px 0 5px;font-size:18px}.dashboard-pin p{margin:0;color:var(--muted)}.dashboard-pin>strong{margin-top:auto;padding-top:14px;color:var(--blue)}.dashboard-empty{grid-column:1/-1;border:1px dashed #aac6cf;border-radius:13px;padding:34px;color:var(--muted);background:#f8fbfc;text-align:center}.dashboard-empty strong{display:block;color:var(--ink);font-size:20px}.dashboard-empty p{margin:5px 0 15px}.dashboard-empty button,.dashboard-customizer button{border:1px solid var(--line);border-radius:8px;padding:9px 13px;background:#fff;color:var(--blue);font-weight:750}.dashboard-customizer{scroll-margin-top:90px;margin-top:24px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 14px 30px rgba(17,60,78,.1)}.dashboard-customizer>header,.dashboard-customizer>footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;border-bottom:1px solid var(--line)}.dashboard-customizer>header h2{margin:0}.dashboard-customizer>header p{margin:3px 0 0;color:var(--muted)}.dashboard-customizer>#dashboardChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:22px}.dashboard-customizer section h3{margin:0 0 8px}.dashboard-customizer section>div{display:grid;gap:7px}.dashboard-customizer label{display:flex;gap:10px;border:1px solid var(--line);border-radius:9px;padding:10px;cursor:pointer}.dashboard-customizer label:has(input:checked){border-color:#48aaa6;background:#eef9f8}.dashboard-customizer input{width:auto;margin-top:3px}.dashboard-customizer label span,.dashboard-customizer label strong,.dashboard-customizer label small{display:block}.dashboard-customizer label small{margin-top:2px;color:var(--muted)}.dashboard-customizer>footer{justify-content:flex-end;border-top:1px solid var(--line);border-bottom:0}.dashboard-customizer>footer span{margin-right:auto;color:#a13a42}.dashboard-customizer>footer .primary{margin:0;color:#fff;background:var(--blue)}
@media(max-width:1050px){.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-customizer>#dashboardChoices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.home-welcome,.dashboard-head{align-items:flex-start;flex-direction:column}.home-date{min-width:0;text-align:left}.dashboard-grid,.dashboard-customizer>#dashboardChoices{grid-template-columns:1fr}}
.dashboard-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:5px}.dashboard-choice>div{display:grid;gap:3px}.dashboard-choice>div button{min-width:34px;padding:3px 7px}
#dashboardChoices>section{grid-column:1/-1}
.hero h1 {
  margin: 5px 0;
  font-size: 34px;
}
.hero p {
  margin: 0;
  color: #dff4f4;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}
.stats article,
.page,
.module-grid article,
.module-card,
.engineering-grid article,
.security-grid article {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(12, 48, 61, 0.06);
}
.stats article {
  padding: 22px;
}
.stats b,
.stats span {
  display: block;
}
.stats b {
  font-size: 24px;
}
.stats span {
  color: var(--muted);
}
.page {
  padding: 26px;
}
.page h1 {
  margin: 0;
}
.page-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
.page-head small {
  color: var(--blue);
  font-weight: 800;
  letter-spacing: 0.09em;
}
.page-head p {
  margin: 3px 0;
  color: var(--muted);
}
.page-head .primary {
  margin: 0;
}
.table {
  margin-top: 20px;
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}
.module-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 24px;
}
.module-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px) auto;
  gap: 14px;
  align-items: end;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.module-filters label { color: var(--muted); font-size: 12px; font-weight: 750; }
.module-filters input, .module-filters select { display: block; width: 100%; margin-top: 5px; }
.module-filters span { padding-bottom: 11px; color: var(--muted); white-space: nowrap; }
.module-record {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  padding: 14px 18px;
}
.module-record-main {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}
.module-record h2 {
  margin: 2px 0;
  font-size: 18px;
}
.module-record p {
  margin: 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 900px;
}
.module-record-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, auto)) minmax(240px, 1fr);
  gap: 18px;
}
.module-record-facts span {
  min-width: 0;
}
.module-record-facts small {
  display: block;
  color: var(--muted);
}
.module-record-facts strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.module-record-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.button-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue);
  font-weight: 750;
  text-decoration: none;
}
.status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf8fc;
  color: var(--blue);
  font-weight: 750;
  white-space: nowrap;
}
.readiness-ready-for-import { background: #e7f0f8; color: #003b7d; }
.readiness-imported { background: #edf3f8; color: #315f8f; }
.readiness-blocked, .readiness-changes-not-approved { background: #fff1f0; color: #9f2d24; }
@media (max-width: 900px) {
  .module-filters { grid-template-columns: 1fr; }
  .module-filters span { padding-bottom: 0; }
  .module-record-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.empty {
  grid-column: 1/-1;
  padding: 60px;
  text-align: center;
  color: var(--muted);
}
.health {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-top: 25px;
  padding: 20px;
  border: 1px solid #cce8da;
  border-radius: 12px;
  background: #f1fbf6;
}
.health i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #279067;
}
.health b,
.health span {
  display: block;
}
.health span {
  color: var(--muted);
}
dialog {
  width: min(850px, calc(100% - 30px));
  border: 0;
  border-radius: 17px;
  padding: 0;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
}
dialog::backdrop {
  background: rgba(5, 22, 29, 0.7);
}
dialog header,
dialog footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}
dialog header h2 {
  margin: 2px 0;
}
dialog header p {
  margin: 0;
  color: var(--muted);
}
dialog header button {
  border: 0;
  background: none;
  font-size: 25px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 25px;
}
.form-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.form-grid label small {
  color: #536b75;
  font-weight: 400;
  opacity: 1;
}
.form-grid label:focus-within small {
  opacity: 1;
}
.form-grid input::placeholder,
.form-grid textarea::placeholder {
  color: #b8c3c8;
  opacity: 1;
}
.permission-options,
.group-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}
.module-type-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.module-type-options legend {
  color: var(--ink);
  font-weight: 800;
}
.module-type-options > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}
.module-type-options > label {
  display: flex;
  grid-template-columns: none;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
  background: #fff;
}
.module-type-options input {
  width: auto;
  margin-top: 3px;
}
.module-type-options strong,
.module-type-options small {
  display: block;
}
.permission-options legend,
.group-options legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.permission-options label,
.group-options label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  color: var(--ink);
}
.permission-options input,
.group-options input {
  width: auto;
}
.table-action {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 10px;
  color: var(--blue);
  background: #fff;
}
.menu-preview {
  border: 1px solid #c9e3e5;
  border-radius: 12px;
  padding: 18px;
  background: #f4fbfb;
}
.menu-preview > small {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
}
.menu-preview > div {
  display: block;
  width: 240px;
  max-width: 100%;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--nav);
}
.menu-preview > div > span {
  display: block;
  padding: 13px 16px;
  color: #9fb6bf;
  font-weight: 750;
}
.menu-preview button {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 14px;
  color: #fff;
  background: rgba(22, 170, 168, 0.18);
  text-align: left;
}
.menu-preview button svg {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  padding: 6px;
  background: var(--aqua);
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.menu-preview button span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
  white-space: normal;
}
.menu-preview p,
.advanced-fields > p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.advanced-fields {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fafcfc;
}
.advanced-fields summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
}
.advanced-fields > .form-grid {
  padding: 18px 0 0;
}
.form-grid .wide {
  grid-column: 1/-1;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}
.form-grid textarea {
  min-height: 75px;
}
dialog footer {
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
dialog footer button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 14px;
  background: #fff;
}
dialog footer .primary {
  margin: 0;
  color: #fff;
  background: var(--blue);
}
#wizardStatus {
  margin-right: auto;
  color: #a13a42;
}
#toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  background: var(--ink);
  opacity: 0;
  transform: translateY(12px);
  transition: 0.2s;
}
#toast.show {
  opacity: 1;
  transform: none;
}
.module-page > header {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 0 28px;
  color: #fff;
  background: var(--nav);
}
.module-page > header a {
  color: #bfe2e4;
}
.module-page > header span {
  margin-left: auto;
  color: #8fe0dc;
  font-size: 10px;
  font-weight: 800;
}
.module-page main {
  display: block;
  padding: 32px;
}
.module-card {
  overflow: hidden;
}
.module-card > nav {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.module-card > nav button,
.module-card > nav .module-tab-link {
  border: 0;
  padding: 16px 22px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}
.module-card > nav button.active {
  color: var(--blue);
  border-bottom: 3px solid var(--aqua);
}
#moduleWorkspace {
  padding: 26px;
}
.status {
  border-radius: 99px;
  padding: 6px 10px;
  color: #176a4a;
  background: #e8f6ef;
  text-transform: capitalize;
}
.engineering-grid,
.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.engineering-grid article,
.security-grid article {
  padding: 17px;
}
.engineering-grid span,
.engineering-grid strong,
.security-grid span,
.security-grid strong {
  display: block;
}
.engineering-grid span,
.server-widget { margin-top:20px; padding:22px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.server-widget-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.server-widget-head h2 { margin:4px 0 0; font-size:22px; }
.server-widget-head h2 code { color:#075a8c; font-size:16px; font-weight:500; }
.server-widget-head p, .credential-panel p, .connection-layout section > p { margin:2px 0 10px; color:var(--muted); }
.server-widget-head > div:last-child, .credential-actions { display:flex; align-items:center; gap:10px; }
.server-health { display:inline-flex; padding:6px 12px; border-radius:999px; background:#fff0d5; color:#785000; }
.server-health.healthy { background:#d8fae8; color:#006a45; }
.server-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:12px 0 8px; }
.server-metrics > div { min-height:88px; padding:12px; border:1px solid var(--line); border-radius:7px; background:#f7f9f8; }
.server-metrics small, .server-metrics b, .server-metrics span { display:block; }
.server-metrics small, .connection-layout h3 { color:#075a8c; letter-spacing:.12em; }
.server-metrics b { margin-top:7px; font-size:15px; }
.server-metrics span { color:var(--muted); font-size:12px; }
#connectionDialog { width:min(1050px,calc(100% - 30px)); }
.connection-layout { display:grid; grid-template-columns:1.15fr 1fr; gap:16px; padding:20px; }
.connection-layout h3 { margin:0; font-size:12px; }
.account-table { max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:7px; }
.account-table table { width:100%; border-collapse:collapse; font-size:12px; }
.account-table th,.account-table td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.credential-panel { padding:14px; border:1px solid var(--line); border-radius:7px; background:#f7f9f8; }
.credential-panel form { display:grid; grid-template-columns:1fr auto; gap:8px; }
.credential-panel input { min-width:0; padding:10px; border:1px solid var(--line); border-radius:7px; }
.credential-panel .primary { margin:0; }
.credential-actions { margin-top:10px; }
#rootCredentialOutput { display:block; min-height:34px; margin-top:12px; padding:8px; overflow-wrap:anywhere; }
.revealed-secret { border:1px solid #c89019; border-radius:6px; background:#fff4d8; font-family:monospace; }
@media (max-width:900px) { .server-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .connection-layout { grid-template-columns:1fr; } }

.security-grid span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}
.engineering-grid strong,
.security-grid strong {
  margin-top: 6px;
}
.handoff-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.handoff-head small,
.instruction-panel small {
  color: var(--blue);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.handoff-head h1 {
  margin: 5px 0 7px;
}
.handoff-head p {
  margin: 0;
  color: var(--muted);
}
.module-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 24px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}
.module-ribbon > div {
  flex: 1 1 150px;
  padding: 12px 14px;
  background: #f7fafb;
}
.module-ribbon span,
.module-ribbon strong {
  display: block;
}
.module-ribbon span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.module-ribbon strong {
  margin-top: 4px;
  font-size: 13px;
}
.instruction-panel {
  overflow: hidden;
  border: 1px solid #b9dce4;
  border-radius: 13px;
  background: #f5fbfc;
}
.instruction-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 20px;
  border-bottom: 1px solid #cce4e9;
}
.instruction-panel h2 {
  margin: 3px 0 0;
}
#copyStatus {
  color: #176a4a;
  font-size: 13px;
  font-weight: 700;
}
#engineeringInstructions {
  max-height: 520px;
  margin: 0;
  padding: 22px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--ink);
  font:
    14px/1.65 "Segoe UI",
    sans-serif;
  background: #fff;
}
.supporting-info {
  margin-top: 28px;
}
.supporting-info h2 {
  font-size: 17px;
}
.new-group {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr) auto;
  align-items: center;
  gap: 14px;
  margin: 24px 0 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7fafb;
}
.new-group strong,
.new-group span {
  display: block;
}
.new-group span,
.security-help {
  color: var(--muted);
  font-size: 12px;
}
.new-group input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.security-help {
  margin-bottom: 14px;
}
.security-groups {
  display: grid;
  gap: 14px;
}
.security-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.security-group.assigned {
  border-color: var(--aqua);
  box-shadow: 0 0 0 2px rgba(22, 170, 168, 0.12);
}
.security-group > header {
  padding: 15px 18px;
  background: #f7fafb;
}
.group-toggle,
.action-grid label,
.user-picker label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.group-toggle strong,
.group-toggle small,
.user-picker strong,
.user-picker small {
  display: block;
}
.group-toggle small,
.user-picker small {
  color: var(--muted);
  font-weight: 400;
}
.security-card-body {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 18px;
}
.security-group.assigned .security-card-body {
  display: grid;
}
.security-card-body fieldset {
  margin: 0;
  border: 0;
  padding: 0;
}
.security-card-body legend {
  margin-bottom: 11px;
  font-weight: 800;
}
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(85px, 1fr));
  gap: 10px;
}
.user-picker {
  display: grid;
  gap: 9px;
  max-height: 210px;
  overflow: auto;
}
.form-status {
  min-height: 20px;
  margin-top: 12px;
  color: #176a4a;
  font-weight: 700;
}
.engineer-registry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.engineer-registry article {
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--engineer-color, var(--blue));
  border-radius: 12px;
  background: #fff;
}
.engineer-registry article > header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.engineer-registry h2 {
  margin: 0;
}
.engineer-registry header b {
  color: #176a4a;
  font-size: 11px;
  text-transform: uppercase;
}
.engineer-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  background: var(--engineer-color, var(--blue));
}
.engineer-registry dl {
  display: grid;
  grid-template-columns: 125px 1fr;
  gap: 7px 12px;
}
.engineer-registry dt {
  color: var(--muted);
}
.engineer-registry dd {
  margin: 0;
}
#engineerPackage {
  width: min(1050px, calc(100% - 30px));
}
.package-content {
  display: grid;
  gap: 18px;
  max-height: 68vh;
  padding: 22px 26px;
  overflow: auto;
}
.package-content section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.package-content section > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 15px 17px;
  background: #f7fafb;
}
.package-content h3,
.package-content p {
  margin: 0;
}
.package-content p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.package-content pre {
  max-height: 300px;
  margin: 0;
  padding: 18px;
  overflow: auto;
  white-space: pre-wrap;
  font:
    13px/1.55 Consolas,
    monospace;
  background: #fff;
}
@media (max-width: 900px) {
  body > div#app > header {
    height: auto;
    min-height: 70px;
    flex-wrap: wrap;
    padding: 10px 15px;
  }
  #rootNav {
    order: 3;
    width: 100%;
    overflow: auto;
  }
  main {
    grid-template-columns: 1fr;
  }
  #adminNav {
    width: auto;
  }
  .stats,
  .module-grid,
  .engineering-grid,
  .security-grid {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .module-type-options {
    grid-template-columns: 1fr;
  }
  .handoff-head,
  .new-group {
    display: grid;
    grid-template-columns: 1fr;
  }
  .security-card-body {
    grid-template-columns: 1fr;
  }
  .engineer-registry {
    grid-template-columns: 1fr;
  }
  .form-grid .wide {
    grid-column: auto;
  }
}
.field-action {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.field-action select {
  flex: 1;
}
.field-action button {
  white-space: nowrap;
}

/* Approved Impact Property Solutions palette for the integrated Platform. */
.home-welcome {
  background: linear-gradient(120deg, #003b7d, #6689b1);
  box-shadow: 0 14px 32px rgba(0, 59, 125, 0.16);
  min-height: 96px;
  padding: 14px 20px;
}
.home-welcome h1 {
  margin: 1px 0 3px;
  font-size: 26px;
  line-height: 1.05;
}
.home-welcome p {
  line-height: 1.25;
}
.hero h1 {
  line-height: 1.08;
}

@media (max-width: 650px) {
  .hero,
  .home-welcome {
    min-height: 0;
    padding: 16px 18px;
  }
}