/* Guestrax workspace polish */
.ugp-workspace {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #17315f;
}

.ugp-workspace-nav {
  display: none;
}

.ugp-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
}

.ugp-hero__eyebrow,
.ugp-section-label,
.ugp-card__eyebrow,
.ugp-empty__eyebrow,
.ugp-table-card__eyebrow {
  display: block;
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7e91b6;
}

.ugp-hero__title,
.ugp-workspace h1 {
  margin: 0;
  font-size: clamp(2.1rem, 3.2vw, 3.25rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #17315f;
}

.ugp-hero__body,
.ugp-workspace > p {
  max-width: 860px;
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #58719c;
}

.ugp-action-row,
.ugp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.ugp-button,
.ugp-actions .btn,
.ugp-preview .btn,
.btn.btn-secondary,
.btn.btn-primary,
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-success,
.btn.btn-outline-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.8rem 1.15rem;
  border: 1px solid #d7deea;
  border-radius: 14px;
  background: #ffffff;
  color: #17315f;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.ugp-button:hover,
.ugp-actions .btn:hover,
.ugp-preview .btn:hover,
.btn.btn-secondary:hover,
.btn.btn-primary:hover,
.btn.btn-outline-primary:hover,
.btn.btn-outline-secondary:hover,
.btn.btn-outline-success:hover,
.btn.btn-outline-danger:hover {
  transform: translateY(-1px);
  border-color: #c6d4ea;
  box-shadow: 0 10px 24px rgba(22, 48, 95, 0.08);
}

.ugp-button--primary,
.ugp-actions .btn.btn-primary,
.btn.btn-primary,
.btn.btn-outline-primary,
.btn.btn-outline-success {
  background: #296de9;
  border-color: #296de9;
  color: #ffffff;
}

.ugp-button--soft,
.ugp-actions .btn.btn-secondary,
.btn.btn-secondary,
.btn.btn-outline-secondary {
  background: #f5f8fd;
  border-color: #d7deea;
  color: #17315f;
}

.ugp-button--danger,
.btn.btn-outline-danger {
  background: #fff6f6;
  border-color: #f1d0d0;
  color: #9c2f2f;
}

.ugp-metric-grid,
.ugp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 28px;
}

.ugp-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ugp-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ugp-stat,
.ugp-card {
  min-width: 0;
  border: 1px solid #dfe7f4;
  border-radius: 26px;
  background: #ffffff;
  padding: 24px 28px;
  box-shadow: 0 8px 24px rgba(17, 44, 86, 0.03);
}

.ugp-stat__value,
.ugp-card strong {
  display: block;
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #17315f;
}

.ugp-stat__label,
.ugp-card span {
  display: block;
  margin-top: 14px;
  font-size: 0.94rem;
  line-height: 1.4;
  color: #58719c;
}

.ugp-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.85fr);
  gap: 18px;
  margin: 0 0 28px;
}

.ugp-panel,
.ugp-empty,
.ugp-table-card {
  border: 1px solid #dfe7f4;
  border-radius: 30px;
  background: #ffffff;
  padding: 28px 30px;
  box-shadow: 0 8px 24px rgba(17, 44, 86, 0.03);
}

.ugp-panel__title,
.ugp-table-card__title,
.ugp-empty__title,
.ugp-workspace h2,
.ugp-workspace h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 2.05rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #17315f;
}

.ugp-panel__body,
.ugp-empty__body,
.ugp-note,
.ugp-card p,
.ugp-panel p {
  margin: 14px 0 0;
  color: #58719c;
  line-height: 1.65;
}

.ugp-info-list {
  display: grid;
  gap: 14px;
  margin: 0;
}

.ugp-info-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #edf2fa;
}

.ugp-info-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ugp-info-row dt {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #7e91b6;
}

.ugp-info-row dd {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: #17315f;
}

.ugp-site-chip,
.ugp-badge,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #d7deea;
  background: #f5f8fd;
  color: #17315f;
  font-size: 0.85rem;
  font-weight: 700;
}

.ugp-badge--success,
.badge.bg-success-subtle {
  border-color: #cfe7d1;
  background: #eef8ef;
  color: #1f6b39 !important;
}

.ugp-badge--warning {
  border-color: #f1e0b4;
  background: #fff8e6;
  color: #8a6410;
}

.ugp-badge--danger {
  border-color: #f3d0d0;
  background: #fff4f4;
  color: #a03030;
}

.ugp-badge--muted {
  color: #58719c;
}

.ugp-version-list {
  display: grid;
  gap: 16px;
}

.ugp-version-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid #edf2fa;
}

.ugp-version-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.ugp-version-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}

.ugp-version-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ugp-table-wrap {
  overflow-x: auto;
  border: 1px solid #e7eef8;
  border-radius: 22px;
}

.table.ugp-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.table.ugp-table thead th {
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid #e7eef8;
  background: #f8fbff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7e91b6;
}

.table.ugp-table tbody td {
  padding: 16px 18px;
  border: 0;
  border-top: 1px solid #edf2fa;
  vertical-align: middle;
  color: #17315f;
}

.table.ugp-table tbody tr:first-child td {
  border-top: 0;
}

.ugp-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  font-size: 0.92rem;
}

.ugp-empty {
  text-align: left;
}

.ugp-empty__body {
  max-width: 620px;
}

.ugp-stack {
  display: grid;
  gap: 18px;
}

.ugp-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ugp-toolbar-spacer {
  flex: 1 1 auto;
}

@media (max-width: 1200px) {
  .ugp-metric-grid,
  .ugp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ugp-panel-grid,
  .ugp-split,
  .ugp-grid--two,
  .ugp-grid--three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ugp-hero {
    flex-direction: column;
  }

  .ugp-metric-grid,
  .ugp-grid {
    grid-template-columns: 1fr;
  }

  .ugp-stat,
  .ugp-card,
  .ugp-panel,
  .ugp-empty,
  .ugp-table-card {
    padding: 22px 20px;
    border-radius: 24px;
  }

  .ugp-info-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ugp-version-item {
    grid-template-columns: 1fr;
  }

  .ugp-version-actions {
    justify-content: flex-start;
  }
}


.ugp-split--balanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ugp-panel--feature { background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%); }
.ugp-panel-grid--feature { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:start; }
.ugp-form-stack { display:grid; gap:14px; margin-top:16px; }
.ugp-form-grid { display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ugp-form-stack label { display:grid; gap:6px; font-size:.94rem; color:#334155; }
.ugp-form-stack input, .ugp-form-stack select, .ugp-form-stack textarea { width:100%; border:1px solid #d7deea; border-radius:14px; padding:10px 12px; background:#fff; box-sizing:border-box; }
.ugp-form-section h3 { margin:0 0 10px; font-size:1rem; }
.ugp-choice-list { display:grid; gap:10px; }
.ugp-choice-item { display:flex; gap:10px; align-items:flex-start; border:1px solid #e2e8f0; border-radius:16px; padding:12px 14px; background:#fff; }
.ugp-choice-item strong, .ugp-assignment-item strong { display:block; font-size:.96rem; color:#0f172a; }
.ugp-choice-item small, .ugp-assignment-item small { display:block; color:#64748b; margin-top:4px; }
.ugp-assignment-list { display:grid; gap:10px; }
.ugp-assignment-item { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px 14px; border:1px solid #e2e8f0; border-radius:16px; background:#fff; }
@media (max-width: 960px) { .ugp-split--balanced, .ugp-form-grid, .ugp-panel-grid--feature { grid-template-columns: 1fr; } }

.ugp-assignment-list--stack {
  display: grid;
  gap: 14px;
}

.ugp-assignment-item--actionable {
  align-items: center;
  gap: 18px;
}

.ugp-inline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.ugp-button--small {
  min-height: 38px;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .ugp-assignment-item--actionable {
    flex-direction: column;
    align-items: flex-start;
  }

  .ugp-inline-actions {
    justify-content: flex-start;
  }
}


.ugp-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ugp-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ugp-design-metrics {
  margin-bottom: 18px;
}

.ugp-design-editor-bridge {
  margin-bottom: 18px;
}

.ugp-card--subtle,
.ugp-card--compact {
  background: #f8fbff;
  border: 1px solid #e7eef8;
  box-shadow: none;
}

.ugp-card--compact {
  padding: 16px 14px;
  border-radius: 18px;
}

.ugp-design-lanes {
  margin-top: 18px;
}

.ugp-block-card {
  min-height: 96px;
  display: grid;
  align-content: center;
}

.ugp-design-builder-starter {
  margin-bottom: 18px;
}

.ugp-block-palette {
  align-items: stretch;
}

@media (max-width: 1200px) {
  .ugp-grid--four,
  .ugp-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ugp-grid--four,
  .ugp-grid--five {
    grid-template-columns: 1fr;
  }
}


.ugp-builder-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ugp-builder-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.ugp-builder-sidebar,
.ugp-builder-inspector {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 24px;
}

.ugp-builder-panel,
.ugp-builder-canvas-panel {
  background: #fff;
  border: 1px solid #e7eef8;
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.ugp-builder-library {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.ugp-builder-library__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  background: #f8fbff;
}

.ugp-builder-library__item strong,
.ugp-builder-outline__item strong {
  display: block;
  color: #0f172a;
  font-size: 0.96rem;
}

.ugp-builder-library__item small,
.ugp-builder-outline__item span {
  display: block;
  color: #64748b;
  margin-top: 4px;
}

.ugp-builder-library__item.is-active,
.ugp-builder-outline__item.is-active {
  border-color: #bfd3ff;
  background: #eef4ff;
}

.ugp-builder-roadmap {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #475569;
}

.ugp-builder-canvas-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ugp-builder-canvas-stage {
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%);
  border: 1px solid #e2e8f0;
}

.ugp-builder-outline {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.ugp-builder-outline__item {
  border: 1px dashed #d6e0ee;
  border-radius: 18px;
  padding: 12px 14px;
  background: #fff;
}

.ugp-builder-form {
  display: grid;
  gap: 18px;
}

.ugp-builder-field {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 0.94rem;
}

.ugp-builder-field > span {
  font-weight: 600;
  color: #0f172a;
}

.ugp-builder-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ugp-builder-toggles {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.ugp-builder-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px 14px;
  background: #f8fbff;
}

.ugp-builder-actions {
  display: flex;
  justify-content: flex-end;
}

.ugp-design-builder-foundation {
  margin-bottom: 18px;
}

@media (max-width: 1350px) {
  .ugp-builder-shell {
    grid-template-columns: 1fr;
  }

  .ugp-builder-sidebar,
  .ugp-builder-inspector {
    position: static;
  }
}

@media (max-width: 767px) {
  .ugp-builder-topbar,
  .ugp-builder-canvas-toolbar,
  .ugp-builder-grid-two {
    grid-template-columns: 1fr;
    display: grid;
  }

  .ugp-builder-panel,
  .ugp-builder-canvas-panel {
    padding: 20px;
    border-radius: 22px;
  }

  .ugp-builder-canvas-stage {
    padding: 10px;
  }
}


.ugp-builder-shell {
  align-items: start;
}

.ugp-builder-library__item {
  text-decoration: none;
}

.ugp-builder-library__item.is-selected,
.ugp-builder-outline__item.is-selected,
.ugp-builder-selectable.is-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
  background: #eef4ff;
}

.ugp-builder-library__actions,
.ugp-builder-outline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ugp-builder-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  font-size: .82rem;
  text-decoration: none;
  cursor: pointer;
}

.ugp-builder-chip:hover {
  border-color: #2563eb;
  color: #2563eb;
}

.ugp-builder-chip.is-danger:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.ugp-builder-help {
  margin-top: 12px;
  font-size: .88rem;
  color: #64748b;
}

.ugp-builder-outline {
  display: grid;
  gap: 10px;
}

.ugp-builder-outline__item {
  display: grid;
  gap: 8px;
}

.ugp-builder-outline__item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ugp-builder-outline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ugp-builder-outline__body {
  display: grid;
  gap: 8px;
}

.ugp-builder-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  color: #64748b;
  background: #f8fafc;
  font-weight: 600;
}

.ugp-builder-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: #64748b;
}

.ugp-builder-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2563eb;
}

.ugp-builder-selected-block {
  display: grid;
  gap: 14px;
}

.ugp-builder-selected-block[hidden] {
  display: none !important;
}

.ugp-builder-selected-block__title {
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 0;
  color: #0f172a;
}

.ugp-builder-inline-note {
  font-size: .88rem;
  color: #64748b;
}

.ugp-canvas-block {
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.ugp-canvas-block.is-selected {
  box-shadow: 0 0 0 3px rgba(37,99,235,.16);
  border-color: rgba(37,99,235,.55) !important;
  transform: translateY(-1px);
}


/* v0.8.6 builder content editing + action sync */
.ugp-builder-canvas-area{min-width:0;}
.ugp-builder-actions--sticky{
  position:sticky;
  bottom:18px;
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.92);
  border:1px solid #e2e8f0;
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.ugp-builder-canvas-stage .btn{font-weight:700;}
.ugp-builder-canvas-stage .d-none{display:none !important;}


/* v0.8.6.1 builder contrast pass */
.ugp-builder-canvas-stage{
  border:1px solid #dbe4f0;
}
#ugp-preview-card{
  border:1px solid #dbe4f0;
  box-shadow:0 16px 40px rgba(15,23,42,.08);
}
.ugp-builder-library__item.is-selected,
.ugp-builder-outline__item.is-selected,
.ugp-builder-selectable.is-selected,
.ugp-canvas-block.is-selected{
  box-shadow:0 0 0 3px rgba(37,99,235,.18), 0 14px 30px rgba(37,99,235,.08);
}


/* v0.8.6.2 builder remove edit-mode dimming */
.ugp-preview-surface{background-color:#f8fbff;}
.ugp-builder-canvas-stage{background:linear-gradient(180deg,#ffffff 0%,#f6faff 100%);}
#ugp-preview-card{background:#ffffff;}


/* v0.8.8 / v0.4.17 decluttered builder workspace */
.ugp-builder-shell {
  grid-template-columns: 240px minmax(0, 1fr) 320px;
  gap: 24px;
}
.ugp-builder-topbar {
  align-items: end;
  margin-bottom: 18px;
}
.ugp-builder-topbar .ugp-hero__title {
  margin-bottom: 8px;
}
.ugp-builder-sidebar,
.ugp-builder-inspector {
  gap: 14px;
}
.ugp-builder-panel,
.ugp-builder-canvas-panel {
  border-radius: 28px;
  padding: 24px;
}
.ugp-builder-panel > .ugp-panel__body {
  max-width: 28rem;
}
.ugp-builder-library,
.ugp-builder-outline {
  gap: 12px;
}
.ugp-builder-library__item,
.ugp-builder-outline__item {
  padding: 16px;
  border-radius: 20px;
}
.ugp-builder-library__item {
  grid-template-columns: minmax(0,1fr) auto;
}
.ugp-builder-outline__item header {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.ugp-builder-library__actions,
.ugp-builder-outline__actions {
  display:none;
}
.ugp-builder-help {
  color:#64748b;
  font-size:.92rem;
  margin:14px 0 0;
}
.ugp-builder-canvas-toolbar {
  gap: 20px;
  margin-bottom: 20px;
}
.ugp-builder-canvas-toolbar__actions {
  gap: 10px;
}
.ugp-builder-canvas-stage {
  padding: 32px;
  min-height: 760px;
}
.ugp-preview-frame.is-desktop { max-width: 980px; }
.ugp-preview-frame.is-tablet { max-width: 760px; }
.ugp-preview-frame.is-mobile { max-width: 410px; }
.ugp-preview-frame{width:100%;margin-inline:auto;}
.ugp-preview-shell{width:min(100%, var(--ugp-content-width));margin:0 auto;padding:var(--ugp-page-padding);background:var(--ugp-page-bg);border-radius:28px;transition:width .18s ease,padding .18s ease,background .18s ease;}
.ugp-preview-shell > :first-child{margin-top:0;}
.ugp-builder-form {
  gap: 14px;
}
.ugp-builder-tabbar {
  gap: 10px;
}
.ugp-builder-selected-block,
.ugp-builder-toggle {
  border-radius: 20px;
}
.ugp-builder-inline-note {
  color:#64748b;
  font-size:.92rem;
  margin:0;
}
.ugp-builder-shell--focus {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}
.ugp-builder-shell--focus .ugp-builder-sidebar,
.ugp-builder-shell--focus .ugp-builder-inspector {
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}
.ugp-builder-shell--focus .ugp-builder-canvas-stage {
  min-height: calc(100vh - 250px);
}
@media (min-width: 1360px) {
  .ugp-builder-sidebar,
  .ugp-builder-inspector {
    max-height: calc(100vh - 120px);
    overflow: auto;
    padding-right: 4px;
  }
  .ugp-builder-canvas-panel {
    min-height: calc(100vh - 120px);
  }
}
@media (max-width: 1350px) {
  .ugp-builder-shell {
    grid-template-columns: 1fr;
  }
  .ugp-builder-shell--focus {
    grid-template-columns: 1fr;
  }
}

/* v0.9.1 builder interaction shell */
.ugp-builder-shell--wysiwyg{
  grid-template-columns: 280px minmax(0,1fr) 330px;
  gap:18px;
  align-items:start;
}
.ugp-builder-dock{
  position:sticky;
  top:24px;
}
.ugp-builder-dock__tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:14px;
  background:#ffffff;
  border:1px solid #dbe5f3;
  border-radius:20px;
  padding:8px;
}
.ugp-builder-dock__tab{
  appearance:none;
  border:0;
  background:transparent;
  border-radius:14px;
  padding:10px 12px;
  font-weight:800;
  color:#264272;
}
.ugp-builder-dock__tab.is-active{background:#2563eb;color:#fff;box-shadow:0 8px 24px rgba(37,99,235,.24);}
.ugp-builder-dock__panel{display:none;}
.ugp-builder-dock__panel.is-active{display:block;}
.ugp-builder-tile-grid{display:grid;gap:10px;}
.ugp-builder-tile{
  width:100%;text-align:left;background:#fff;border:1px solid #d8e3f2;border-radius:18px;padding:14px 16px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:800;color:#0f2b61;
}
.ugp-builder-tile__meta{font-size:.82rem;font-weight:700;color:#5f7aa8;}
.ugp-builder-tile.is-selected,.ugp-builder-tile:hover,.ugp-builder-outline__item:hover{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.ugp-builder-outline__item{width:100%;text-align:left;background:#fff;border:1px solid #d8e3f2;border-radius:18px;}
.ugp-builder-outline__meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#7a92bb;}
.ugp-builder-page-nav__item small{display:none;}
.ugp-builder-canvas-panel--wysiwyg{padding:20px 20px 24px;border-radius:30px;}
.ugp-builder-workbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px;}
.ugp-builder-workbar__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.ugp-builder-canvas-stage--wysiwyg{position:relative;padding:28px;min-height:820px;background:linear-gradient(180deg,#f9fbff 0%,#edf4ff 100%);}
.ugp-builder-canvas-stage__hint{position:absolute;top:18px;left:22px;font-size:.9rem;color:#6d84ab;z-index:2;}
.ugp-preview-frame{margin-top:28px;}
.ugp-builder-inspector{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;}
.ugp-builder-form>.ugp-builder-tabbar{position:sticky;top:0;background:linear-gradient(180deg,#edf4ff 0%,rgba(237,244,255,.95) 65%,rgba(237,244,255,0) 100%);padding-bottom:12px;z-index:3;}
.ugp-builder-chip--primary{background:#2563eb;color:#fff;border-color:#2563eb;}
.ugp-canvas-block{position:relative;transition:transform .15s ease, box-shadow .15s ease;}
.ugp-canvas-block:hover{transform:translateY(-1px);}
.ugp-canvas-block__toolbar{
  position:absolute;left:16px;top:-16px;display:inline-flex;gap:6px;align-items:center;opacity:0;transform:translateY(-4px);
  transition:all .15s ease;z-index:8;padding:6px 8px;border-radius:999px;background:rgba(30,41,59,.94);box-shadow:0 12px 32px rgba(15,23,42,.18);
}
.ugp-canvas-block:hover .ugp-canvas-block__toolbar,
.ugp-canvas-block.is-selected .ugp-canvas-block__toolbar{opacity:1;transform:none;}
.ugp-canvas-tool{
  appearance:none;border:0;background:rgba(255,255,255,.96);color:#17356d;border-radius:999px;min-width:34px;height:34px;padding:0 10px;font-size:.8rem;font-weight:800;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.ugp-canvas-tool--primary{background:#2563eb;color:#fff;}
.ugp-canvas-tool--handle{width:34px;padding:0;font-size:.9rem;letter-spacing:-0.08em;}
.ugp-canvas-tool--more{width:34px;padding:0;font-size:1rem;}
.ugp-builder-modal[hidden]{display:none !important;}
.ugp-builder-modal{position:fixed;inset:0;z-index:9999;}
.ugp-builder-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(3px);}
.ugp-builder-modal__dialog{position:relative;max-width:720px;margin:8vh auto 0;background:#fff;border-radius:28px;box-shadow:0 32px 80px rgba(15,23,42,.22);padding:24px;}
.ugp-builder-modal__header,.ugp-builder-modal__footer{display:flex;justify-content:space-between;align-items:center;gap:14px;}
.ugp-builder-modal__body{padding:18px 0;}
.ugp-builder-modal__close{appearance:none;border:0;background:#eef4ff;color:#17356d;width:42px;height:42px;border-radius:50%;font-size:1.5rem;line-height:1;}
.ugp-builder-modal textarea,.ugp-builder-modal input{font-size:1rem;}
@media (max-width: 1500px){
  .ugp-builder-shell--wysiwyg{grid-template-columns:240px minmax(0,1fr) 300px;}
}
@media (max-width: 1280px){
  .ugp-builder-shell--wysiwyg{grid-template-columns:1fr;}
  .ugp-builder-dock,.ugp-builder-inspector{position:static;max-height:none;overflow:visible;}
}


/* v0.9.3 builder menu rail mode */
.ugp-builder-shell--rail{grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;}
.ugp-builder-shell--rail .ugp-builder-sidebar{display:none !important;}
.ugp-builder-shell--rail .ugp-builder-canvas-panel{padding:22px 24px 28px;border-radius:32px;}
.ugp-builder-shell--rail .ugp-builder-canvas-stage{padding:24px;min-height:820px;background:linear-gradient(180deg,#f9fbff 0%,#edf4ff 100%);}
.ugp-builder-rail-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin-bottom:16px;background:#fff;border:1px solid #d8e3f2;border-radius:18px;color:#4a6594;}
.ugp-builder-rail-note strong{display:block;min-width:68px;color:#0f2b61;}
.ugp-builder-rail-note span{display:block;font-size:.94rem;line-height:1.45;}
.gx-submenu__nav--builder{display:grid;gap:10px;}
.gx-submenu__nav--builder .gx-submenu-link{display:flex;align-items:center;justify-content:flex-start;min-height:54px;padding:0 18px;border-radius:18px;}
@media (max-width: 1500px){.ugp-builder-shell--rail{grid-template-columns:minmax(0,1fr) 320px;}}
@media (max-width: 1280px){.ugp-builder-shell--rail{grid-template-columns:1fr;}}

.ugp-builder-foundation-actions{display:flex;flex-wrap:wrap;gap:10px;}
.ugp-builder-foundation-actions .ugp-builder-chip{white-space:nowrap;}
.ugp-builder-section{padding-top:34px;}
.ugp-canvas-block.is-selected{box-shadow:0 0 0 2px rgba(37,99,235,.55), 0 12px 30px rgba(37,99,235,.10);}


/* v0.10.1 / v0.4.31 builder visual cleanup + navigator polish */
.ugp-builder-topbar .ugp-hero__title{margin-bottom:2px;font-size:3.6rem;line-height:.95;}
.ugp-builder-topbar .ugp-section-label{margin-bottom:10px;display:block;}
.ugp-builder-shell--rail{gap:16px;}
.ugp-builder-shell--rail .ugp-builder-canvas-panel{padding:18px 18px 24px;background:#f8fbff;border:1px solid #dce6f2;box-shadow:none;}
.ugp-builder-shell--rail .ugp-builder-canvas-stage{padding:18px;background:#f2f7fc;border:1px solid #dde7f3;min-height:720px;}
.ugp-builder-workpanes{margin-bottom:14px;}
.ugp-builder-workpane{display:none;}
.ugp-builder-workpane.is-active{display:block;}
.ugp-builder-pane-intro,
.ugp-builder-foundation-card{background:#fff;border:1px solid #dde6f2;border-radius:18px;padding:16px 18px;box-shadow:none;}
.ugp-builder-pane-intro strong{display:block;color:#0f2d62;font-size:1.05rem;font-weight:800;margin-bottom:4px;}
.ugp-builder-pane-intro .ugp-builder-help,
.ugp-builder-foundation-card .ugp-builder-help{margin-top:6px;font-size:.9rem;}
.ugp-builder-layer-tree--navigator{display:grid;gap:8px;margin-top:10px;}
.ugp-builder-layer-item{position:relative;padding:10px 12px 10px 16px;background:#fff;border:1px solid #dde6f2;border-radius:14px;color:#264272;font-weight:700;box-shadow:none;}
.ugp-builder-layer-item::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:999px;background:#89a4d6;}
.ugp-builder-layer-item.is-root{background:#eef4ff;border-color:#d4e0f1;}
.ugp-builder-layer-item.is-section{margin-left:14px;}
.ugp-builder-layer-item.is-row{margin-left:28px;}
.ugp-builder-layer-item.is-column{margin-left:42px;font-weight:600;color:#5c7399;}
.ugp-builder-foundation-actions{gap:8px;}
.ugp-builder-foundation-actions .ugp-builder-chip{padding:9px 14px;font-size:.94rem;}
.ugp-builder-canvas-toolbar{margin-bottom:12px;}
.ugp-builder-canvas-toolbar .ugp-panel__title{font-size:3rem;line-height:.96;margin-bottom:6px;}
.ugp-builder-canvas-toolbar__actions .ugp-builder-tab,
.ugp-builder-canvas-toolbar__actions .ugp-builder-chip{min-height:44px;padding:0 18px;}
.ugp-builder-section{padding-top:24px;}
.ugp-builder-section .ugp-builder-chip{padding:9px 16px;min-height:42px;}
.ugp-canvas-block{position:relative;padding-top:12px;}
.ugp-canvas-block__toolbar{left:14px;top:-12px;gap:4px;padding:4px 6px;background:#ffffff;border:1px solid #d7e2f1;border-radius:999px;box-shadow:0 8px 22px rgba(15,23,42,.10);}
.ugp-canvas-tool{height:30px;min-width:30px;padding:0 9px;font-size:.78rem;border:1px solid #d8e2ef;background:#fff;color:#163972;box-shadow:none;}
.ugp-canvas-tool--primary{background:#2563eb;border-color:#2563eb;color:#fff;}
.ugp-canvas-tool--handle,.ugp-canvas-tool--more{width:30px;padding:0;}
.ugp-canvas-tool--handle{font-size:.82rem;}
.ugp-canvas-block.is-selected{box-shadow:0 0 0 2px rgba(37,99,235,.45),0 10px 26px rgba(37,99,235,.08);}
.ugp-builder-modal__dialog{max-width:560px;margin:6vh 24px 0 auto;border-radius:24px;padding:22px;}
.ugp-builder-modal__header .ugp-panel__title{font-size:2.2rem;line-height:1;}
.ugp-builder-modal__body{padding:14px 0;}
.ugp-builder-modal__footer{justify-content:flex-end;}
body.option-com_unifiguestportal.view-builder .gx-submenu__section-title{margin-bottom:14px;}
body.option-com_unifiguestportal.view-builder .gx-submenu__nav--builder{gap:8px;}
body.option-com_unifiguestportal.view-builder .gx-submenu__nav--builder .gx-submenu-link{min-height:46px;padding:0 16px;border-radius:16px;font-weight:700;}
body.option-com_unifiguestportal.view-builder .gx-submenu__intro{display:none;}
body.option-com_unifiguestportal.view-builder .ugapp-main{gap:16px;}
@media (max-width: 1400px){
  .ugp-builder-canvas-toolbar .ugp-panel__title{font-size:2.6rem;}
  .ugp-builder-topbar .ugp-hero__title{font-size:3.1rem;}
}
@media (max-width: 900px){
  .ugp-builder-canvas-toolbar .ugp-panel__title{font-size:2.2rem;}
  .ugp-builder-modal__dialog{margin:16px;max-width:none;}
}

/* v0.11.3 drag/drop foundations */
.ugp-builder-chip--handle{cursor:grab}
.ugp-builder-chip--handle:active{cursor:grabbing}
.ugp-builder-section[draggable="true"], .ugp-canvas-block[draggable="true"]{cursor:grab}
.ugp-builder-section.is-dragging, .ugp-canvas-block.is-dragging{opacity:.45}
.ugp-builder-dropzone{display:none;align-items:center;justify-content:center;border:1px dashed rgba(37,99,235,.28);border-radius:14px;background:rgba(37,99,235,.04);color:#33527a;font-size:12px;font-weight:600;letter-spacing:.01em;transition:.18s ease}
.is-dragging-section .ugp-builder-dropzone--section,.is-dragging-block .ugp-builder-dropzone--block,.is-dragging-library-module .ugp-builder-dropzone--block{display:flex}
.ugp-builder-dropzone.is-over{border-color:#2563eb;background:rgba(37,99,235,.12);color:#163f95}
.ugp-builder-dropzone--section{min-height:40px;margin:10px 0}
.ugp-builder-dropzone--block{min-height:44px;margin:10px 0}
.ugp-builder-dropzone--block-end{margin-top:12px}
.ugp-builder-col{position:relative;min-height:120px;padding:8px;border-radius:18px;transition:.18s ease}
.ugp-builder-col.is-selected{box-shadow:inset 0 0 0 2px rgba(37,99,235,.18);background:rgba(37,99,235,.03)}
.ugp-builder-col::before{content:attr(data-column-label);display:block;margin:0 0 8px;color:#64748b;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ugp-builder-layer-item{display:block;width:100%;text-align:left;background:transparent;border:0;padding:6px 8px;border-radius:10px}
.ugp-builder-layer-item:hover{background:#eef4ff}
.ugp-builder-layer-item.is-element{padding-left:24px}
.ugp-builder-layer-item.is-column{padding-left:16px}
.ugp-builder-foundation-actions{display:flex;flex-wrap:wrap;gap:8px}


/* v0.11.5.4 toolbar polish + CPB content grouping */
.ugp-builder-foundation-card--content-panel{display:grid;gap:14px}
.ugp-builder-content-group{border-top:1px solid #e6edf7;padding-top:14px}
.ugp-builder-content-group:first-of-type{border-top:0;padding-top:0}
.ugp-builder-content-group__header{display:grid;gap:3px;margin-bottom:10px}
.ugp-builder-content-group__header strong{font-size:.96rem;color:#11315f}
.ugp-builder-content-group__header span{font-size:.82rem;color:#6880a7;line-height:1.45}
.ugp-builder-module-grid{display:grid;grid-template-columns:1fr;gap:8px}
.ugp-builder-module-card{display:grid;gap:3px;text-align:left;border:1px solid #dce6f2;border-radius:16px;background:#fff;padding:12px 14px;color:#183566;transition:.16s ease}
.ugp-builder-module-card:hover{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.ugp-builder-module-card strong{font-size:.95rem}
.ugp-builder-module-card span{font-size:.8rem;color:#6680a7;line-height:1.4}
.ugp-builder-pagezone{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin:0 0 12px;border:1px dashed #cfdbeb;border-radius:16px;background:linear-gradient(180deg,#fbfdff 0%,#f4f8fd 100%)}
.ugp-builder-pagezone__label{font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#295189}
.ugp-builder-pagezone__hint{font-size:.84rem;color:#6b81a5}
.ugp-builder-pagezone--body{margin-bottom:16px}
.ugp-preview-layout--connect .ugp-builder-section + .ugp-builder-pagezone--footer{margin-top:12px}
.ugp-builder-col.is-selected{box-shadow:inset 0 0 0 2px rgba(37,99,235,.22),0 0 0 4px rgba(37,99,235,.05);background:rgba(37,99,235,.035)}
.ugp-builder-layer-item.is-active{background:#eef4ff;color:#123c81;box-shadow:inset 0 0 0 1px #d5e2f6}
.ugp-builder-dropzone--block.is-over,.ugp-builder-col.is-drop-target{border-color:#2563eb;background:rgba(37,99,235,.10)}
.ugp-builder-dropzone--block{min-height:52px}
.ugp-builder-dropzone--block span{pointer-events:none}
.ugp-canvas-block__toolbar{top:-14px;left:12px;padding:4px 6px;gap:4px;border:1px solid #d8e3f1;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.10)}
.ugp-canvas-tool{font-weight:700}
.ugp-canvas-tool--danger{color:#8f1d1d;border-color:#efcdcd;background:#fff7f7}
@media (max-width:900px){.ugp-builder-pagezone{display:grid;justify-content:stretch}}

/* v0.11.5.7 design mode foundations */
.ugp-builder-section{padding-top:16px;background:rgba(255,255,255,.82)}
.ugp-builder-section__toolbar{min-height:36px}
.ugp-builder-section__label{padding:.22rem .6rem;font-size:.74rem;opacity:.78}
.ugp-builder-section__actions{opacity:0;pointer-events:none;transition:opacity .16s ease}
.ugp-builder-section:hover .ugp-builder-section__actions,.ugp-builder-section.is-selected .ugp-builder-section__actions{opacity:1;pointer-events:auto}
.ugp-builder-col{padding:10px 10px 12px;border-radius:20px;border:1px solid transparent;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.ugp-builder-col::before{font-size:11px;color:#8aa0bf;letter-spacing:.08em;margin-bottom:6px}
.ugp-builder-col:hover{border-color:#d9e5f4;background:rgba(255,255,255,.56)}
.ugp-builder-col.is-selected{box-shadow:inset 0 0 0 2px rgba(37,99,235,.16),0 0 0 4px rgba(37,99,235,.04);background:rgba(37,99,235,.03)}
.ugp-builder-dropzone{border-style:dashed;border-radius:16px;background:rgba(255,255,255,.78);color:#53709a}
.is-dragging-block .ugp-builder-dropzone--block,.is-dragging-library-module .ugp-builder-dropzone--block{display:flex}
.ugp-builder-dropzone--block{min-height:46px}
.ugp-builder-dropzone--block.is-empty{min-height:64px}
.ugp-builder-dropzone--block span{font-size:12px}
.ugp-builder-col:not(.is-selected) > .ugp-builder-dropzone--block.is-empty{display:flex;opacity:.9}
.ugp-builder-col.is-selected > .ugp-builder-dropzone--block.is-empty{display:flex;border-color:rgba(37,99,235,.34);background:rgba(37,99,235,.06)}
.ugp-canvas-block{position:relative}
.ugp-canvas-block.is-selected{box-shadow:0 0 0 2px rgba(37,99,235,.22),0 14px 30px rgba(15,23,42,.05)}
.ugp-canvas-block__toolbar{left:14px;top:-18px;right:auto;max-width:none;padding:3px 5px;gap:4px;background:rgba(255,255,255,.96);border:1px solid #d9e4f2;box-shadow:0 10px 24px rgba(15,23,42,.12);opacity:0;transform:translateY(4px)}
.ugp-canvas-block:hover>.ugp-canvas-block__toolbar,.ugp-canvas-block.is-selected>.ugp-canvas-block__toolbar{opacity:1;transform:translateY(0)}
.ugp-canvas-tool{color:#17305a;background:transparent;padding:.42rem .58rem;font-weight:700}
.ugp-canvas-tool:hover{background:#eef4ff;color:#173b8f}
.ugp-canvas-tool--primary{background:#2563eb;color:#fff}
.ugp-canvas-tool--primary:hover{background:#1d4ed8;color:#fff}
.ugp-canvas-tool--danger{background:#fff1f2;color:#b42318}
.ugp-canvas-tool--danger:hover{background:#ffe4e6;color:#991b1b}

/* presets foundations */
.ugp-builder-content-group--presets{margin-bottom:12px}
.ugp-builder-preset-grid{display:grid;gap:10px;grid-template-columns:1fr}
.ugp-builder-preset-card{appearance:none;border:1px solid #cfe0fb;border-radius:18px;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);padding:14px 14px 12px;display:grid;gap:6px;text-align:left;color:#15325b;cursor:pointer;box-shadow:0 10px 24px rgba(15,23,42,.04);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ugp-builder-preset-card strong{font-size:.96rem;line-height:1.2}
.ugp-builder-preset-card span{font-size:.84rem;line-height:1.4;color:#587298}
.ugp-builder-preset-card:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(15,23,42,.08);border-color:#7ea7ee}
body.option-com_unifiguestportal.view-builder .gx-submenu__modules--builder-dock .ugp-builder-preset-card{padding:11px 12px;border-radius:16px;box-shadow:none}
body.option-com_unifiguestportal.view-builder .gx-submenu__modules--builder-dock .ugp-builder-preset-card strong{font-size:.92rem}
body.option-com_unifiguestportal.view-builder .gx-submenu__modules--builder-dock .ugp-builder-preset-card span{font-size:.78rem}


/* v0.11.6.4.1 toolbar chrome reclaim */
.ugp-builder-page.container-fluid{max-width:none;}
.ugp-builder-toolbar-nav{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.ugp-builder-chip--icon{width:44px;min-width:44px;padding:0;font-size:1.1rem;line-height:1;}
.ugp-builder-canvas-toolbar__actions{display:flex;align-items:flex-start;justify-content:flex-end;gap:12px;flex-wrap:wrap;}
.ugp-builder-canvas-toolbar{align-items:center;}
@media (max-width: 767px){.ugp-builder-toolbar-nav{order:-1;width:100%;justify-content:flex-end;}}

/* SSID profile pages readability */
.ugp-list-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid #dfe7f4;border-radius:20px;background:#fff;box-shadow:none;}
.ugp-list-card__content{min-width:0;}
.ugp-list-card__content strong{display:block;margin:0 0 6px;font-size:1.2rem;line-height:1.15;font-weight:800;color:#17315f;letter-spacing:-0.02em;word-break:break-word;}
.ugp-list-card__content p{margin:0;font-size:0.98rem;line-height:1.45;color:#58719c;}
.ugp-list-card__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.view-ssidprofiles .ugp-grid--two{align-items:start;}
.view-ssidprofiles .ugp-card__title{font-size:clamp(1.8rem,2.4vw,2.3rem);line-height:1.08;margin-bottom:14px;}
.view-ssidprofiles .ugp-hero__title,.view-ssidprofile .ugp-hero__title{font-size:clamp(2.2rem,3.2vw,3rem);}
.view-ssidprofile .ugp-panel__title{font-size:clamp(1.45rem,2vw,1.8rem);line-height:1.12;}
.view-ssidprofile .ugp-info-row dd,.view-ssidprofile .ugp-info-row dt{font-size:1rem;}
@media (max-width:900px){.ugp-list-card{flex-direction:column;align-items:flex-start}.ugp-list-card__actions{width:100%}.ugp-list-card__actions .ugp-button{width:100%}}


/* v0.11.6.4.5 SSID details expansion */
.ugp-panel-grid--ssid-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;}
.view-ssidprofile .ugp-panel-grid--ssid-detail .ugp-panel{height:100%;}
.view-ssidprofile .ugp-info-list{margin-top:10px;}
.view-ssidprofile .ugp-hero__body{max-width:64ch;}
@media (max-width: 960px){.ugp-panel-grid--ssid-detail{grid-template-columns:1fr;}}


/* v0.11.6.4.5.5.9.3 profile grids */
.ugp-profile-grid{align-items:stretch;}
.ugp-profile-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:220px;padding:26px 28px;}
.ugp-profile-card__body{min-width:0;}
.ugp-profile-card__title{margin:0 0 10px;font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1.02;font-weight:800;letter-spacing:-0.03em;color:#17315f;word-break:break-word;}
.ugp-profile-card__meta{margin:0;color:#58719c;font-size:1.02rem;line-height:1.6;}
.ugp-profile-card__actions{display:flex;justify-content:flex-end;align-items:flex-end;margin-top:auto;}
.view-ssidprofiles .ugp-profile-switcher,.view-vlanprofiles .ugp-profile-switcher{justify-content:flex-end;}
.view-ssidprofiles .ugp-profile-grid,.view-vlanprofiles .ugp-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:1100px){.view-ssidprofiles .ugp-profile-grid,.view-vlanprofiles .ugp-profile-grid{grid-template-columns:1fr;}.ugp-profile-card{min-height:0;}}


.ugp-profile-table-card{padding:20px 22px;}
.ugp-profile-table td strong{font-size:1rem;font-weight:800;color:#163262;}
.ugp-profile-table .ugp-button{white-space:nowrap;}
@media (max-width: 900px){
  .ugp-profile-table-card{padding:16px;}
  .ugp-profile-table th:nth-child(3),
  .ugp-profile-table td:nth-child(3),
  .ugp-profile-table th:nth-child(4),
  .ugp-profile-table td:nth-child(4),
  .ugp-profile-table th:nth-child(5),
  .ugp-profile-table td:nth-child(5),
  .ugp-profile-table th:nth-child(6),
  .ugp-profile-table td:nth-child(6){display:none;}
}


/* v0.11.6.4.5.5.9.5 profile tables closer to UniFi */
.ugp-profile-table-card{padding:0;border-radius:28px;overflow:hidden;background:#fff;}
.ugp-profile-table{margin:0;}
.ugp-profile-table thead th{font-size:.9rem;letter-spacing:.08em;text-transform:none;color:#2b3f66;background:#fff;border-bottom:1px solid #dfe5ee;padding:14px 18px;}
.ugp-profile-table tbody td{padding:14px 18px;vertical-align:middle;border-top:1px solid #e7edf5;color:#28446f;}
.ugp-profile-table tbody tr:first-child td{border-top:none;}
.ugp-profile-namecell{display:flex;align-items:center;gap:10px;min-width:0;}
.ugp-status-dot{display:inline-block;width:10px;height:10px;border-radius:999px;flex:0 0 10px;background:#cbd5e1;box-shadow:0 0 0 2px rgba(255,255,255,.8);}
.ugp-status-dot--enabled{background:#2dbb63;}
.ugp-status-dot--disabled{background:#e25555;}
.ugp-status-dot--unknown{background:#c8d2df;}
.ugp-profile-table td strong{font-size:1rem;font-weight:700;color:#163262;}
.ugp-profile-table .ugp-button--small{padding:.6rem .95rem;border-radius:16px;}
.ugp-profile-table--ssid th:nth-child(1){width:24%;}
.ugp-profile-table--ssid th:nth-child(2){width:24%;}
.ugp-profile-table--ssid th:nth-child(3){width:18%;}
.ugp-profile-table--ssid th:nth-child(4){width:14%;}
.ugp-profile-table--ssid th:nth-child(5){width:10%;}
.ugp-profile-table--ssid th:nth-child(6){width:10%;}
@media (max-width: 900px){
  .ugp-profile-table th:nth-child(3),
  .ugp-profile-table td:nth-child(3),
  .ugp-profile-table th:nth-child(5),
  .ugp-profile-table td:nth-child(5){display:none;}
}


.ugp-design-summary-strip {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.ugp-design-summary-strip__item {
  border: 1px solid #e7eef8;
  border-radius: 18px;
  padding: 14px 16px;
  background: #f8fbff;
}

.ugp-design-summary-strip__item span {
  display:block;
  margin:0 0 6px;
  font-size: .78rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:#7e91b6;
}

.ugp-design-summary-strip__item strong {
  display:block;
  color:#17315f;
  font-size:1rem;
  line-height:1.3;
}

.ugp-design-builder-starter--tidy .ugp-panel__body {
  max-width: 980px;
}

.ugp-block-palette--status {
  gap: 12px;
}

.ugp-block-palette--status .ugp-block-card {
  min-height: 0;
  padding: 14px 16px;
  border-radius: 20px;
}

.ugp-block-palette--status .ugp-card__eyebrow {
  margin-bottom: 8px;
}

.ugp-block-palette--status .ugp-card__title,
.ugp-block-palette--status strong {
  font-size: 1.05rem;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.ugp-choice-item--stacked {
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
}

.ugp-choice-item__check {
  width: 18px;
  height: 18px;
  margin: 0;
}

.ugp-inline-empty {
  border: 1px dashed #d6e0ee;
  border-radius: 18px;
  padding: 14px 16px;
  color: #58719c;
  background: #f8fbff;
}

.ugp-assignment-list {
  display:grid;
  gap: 10px;
  margin-top: 18px;
}

.ugp-assignment-item {
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items:center;
  border:1px solid #e7eef8;
  border-radius:18px;
  padding: 14px 16px;
  background:#f8fbff;
}

.ugp-version-item {
  padding: 18px 0;
}

.ugp-version-item h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.7rem);
}

.ugp-version-actions .ugp-button {
  min-width: 0;
}

@media (max-width: 1200px) {
  .ugp-design-summary-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ugp-choice-item--stacked,
  .ugp-assignment-item,
  .ugp-version-item {
    grid-template-columns: 1fr;
  }

  .ugp-choice-item__check {
    justify-self: start;
  }
}

/* Dashboard mockup refresh */
.ugp-workspace--dashboard {
  padding: 0;
}

.ugp-dash {
  display: grid;
  gap: 18px;
}

.ugp-dash__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 6px;
}

.ugp-dash__eyebrow {
  display: block;
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7e91b6;
}

.ugp-dash__title {
  margin: 0;
  font-size: clamp(2.35rem, 3.5vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #16315f;
}

.ugp-dash__subtitle {
  margin: 10px 0 0;
  color: #6e82aa;
  font-size: 1.02rem;
}

.ugp-dash__header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ugp-dash__pill-button,
.ugp-dash__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.8rem 1.2rem;
  border-radius: 16px;
  text-decoration: none !important;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.ugp-dash__pill-button {
  background: #0d2a63;
  color: #ffffff;
  border: 1px solid #0d2a63;
  box-shadow: 0 10px 24px rgba(13, 42, 99, 0.12);
}

.ugp-dash__pill-button:hover,
.ugp-dash__cta:hover {
  transform: translateY(-1px);
}

.ugp-dash__top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr);
  grid-template-areas:
    "showcase overview"
    "showcase sessions";
  gap: 18px;
}

.ugp-dash-showcase {
  grid-area: showcase;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  align-items: start;
  gap: 28px;
  min-height: 458px;
  padding: 38px 38px 34px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  background: #071f5b url('../images/dashboard-hero-backdrop-wide.webp') no-repeat center center / 100% 100%;
  box-shadow: 0 20px 44px rgba(8, 24, 63, 0.20);
  overflow: hidden;
}

.ugp-dash-showcase::after {display: none;}

.ugp-dash-showcase__copy,
.ugp-dash-showcase__preview-wrap {
  position: relative;
  z-index: 1;
}

.ugp-dash-showcase__copy {
  align-self: start;
}

.ugp-dash-showcase__preview-wrap {
  align-self: center;
}

.ugp-dash-card__eyebrow {
  display: block;
  margin: 0 0 16px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4e9dff;
}

.ugp-dash-showcase__title {
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  line-height: .92;
  letter-spacing: -0.06em;
  color: #ffffff;
}

.ugp-dash-showcase__title span {
  color: #4c93ff;
}

.ugp-dash-showcase__body {
  max-width: 430px;
  margin: 22px 0 0;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(237, 244, 255, 0.82);
}

.ugp-dash-progress {
  max-width: 380px;
  margin-top: 28px;
}

.ugp-dash-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: 700;
}

.ugp-dash-progress__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.ugp-dash-progress__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f8cff 0%, #4e8fff 100%);
}

.ugp-dash-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.ugp-dash__cta--primary {
  min-width: 248px;
  background: linear-gradient(180deg, #2b78ff 0%, #2167eb 100%);
  border: 1px solid #2167eb;
  color: #ffffff;
  box-shadow: 0 14px 26px rgba(33, 103, 235, 0.24);
}

.ugp-dash__cta--ghost {
  min-width: 248px;
  background: rgba(9, 21, 55, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.ugp-dash__cta--soft {
  background: #eef3fb;
  border: 1px solid #e0e8f5;
  color: #16315f;
}

.ugp-dash-showcase__preview-wrap {
  display: grid;
  justify-items: end;
  gap: 14px;
}

.ugp-dash-device-switcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 19, 51, 0.42);
  backdrop-filter: blur(8px);
}

.ugp-dash-device-switcher span {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ugp-dash-device-switcher span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1.5px solid rgba(255,255,255,0.68);
}

.ugp-dash-device-switcher .is-active {
  background: #2b78ff;
  border-color: #2b78ff;
}

.ugp-dash-portal-preview {
  width: 100%;
  max-width: 370px;
  padding: 12px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 40px rgba(4, 17, 51, 0.30);
  backdrop-filter: blur(10px);
}

.ugp-dash-portal-preview__frame {
  position: relative;
  min-height: 390px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(32, 38, 58, 0.25), rgba(22, 25, 34, 0.42));
}

.ugp-dash-portal-preview__image {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(10,16,33,0.34)),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.68), rgba(255,255,255,0) 26%),
    linear-gradient(160deg, #b6b2b2 0%, #c6bbb6 18%, #8d8d8b 40%, #6d726f 55%, #304d60 100%);
}

.ugp-dash-portal-preview__overlay {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 390px;
  padding: 28px 24px;
  text-align: center;
  color: #ffffff;
}

.ugp-dash-portal-preview__overlay strong {
  font-size: 2rem;
  line-height: 1.08;
  font-weight: 700;
}

.ugp-dash-portal-preview__overlay small,
.ugp-dash-portal-preview__overlay em {
  display: block;
  margin-top: 10px;
  font-size: .82rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.82);
  font-style: normal;
}

.ugp-dash-portal-preview__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.06);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ugp-dash-portal-preview__overlay button {
  margin-top: 24px;
  width: min(100%, 220px);
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  color: #17315f;
  font-weight: 700;
}

.ugp-dash-portal-preview__frame.has-live-preview {
  background: var(--ugp-dash-preview-bg, linear-gradient(180deg, rgba(32,38,58,.25), rgba(22,25,34,.42)));
  background-size: cover;
  background-position: center;
}

.ugp-dash-portal-preview__frame.has-live-preview .ugp-dash-portal-preview__image {
  display: none;
}

.ugp-dash-portal-preview__overlay--live {
  margin: 16px;
  min-height: calc(390px - 32px);
  padding: 0;
  border-radius: var(--ugp-dash-preview-radius, 22px);
  background: var(--ugp-dash-preview-surface, rgba(255,255,255,.92));
  color: var(--ugp-dash-preview-text, #163972);
  box-shadow: 0 18px 34px rgba(15, 23, 42, .16);
  overflow: hidden;
  align-content: stretch;
  grid-template-rows: auto 1fr;
}

.ugp-dash-portal-preview__overlay--iframe {
  display: block;
  background: #f4f7fb;
  color: inherit;
}

.ugp-dash-portal-preview__iframe-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #f4f7fb;
}

.ugp-dash-portal-preview__iframe {
  display: block;
  width: 390px;
  height: 720px;
  border: 0;
  background: #ffffff;
  transform: scale(.80);
  transform-origin: top left;
  pointer-events: none;
}

.ugp-dash-portal-preview__overlay--live strong {
  color: var(--ugp-dash-preview-text, #163972);
}

.ugp-dash-portal-preview__overlay--live small,
.ugp-dash-portal-preview__overlay--live em {
  color: var(--ugp-dash-preview-muted, #7285ad);
}

.ugp-dash-portal-preview__overlay--live button {
  background: var(--ugp-dash-preview-button-bg, #2563eb);
  color: var(--ugp-dash-preview-button-text, #ffffff);
  border-radius: var(--ugp-dash-preview-button-radius, 14px);
}

.ugp-dash-portal-preview__hero {
  width: 100%;
  min-height: 118px;
  background: var(--ugp-dash-preview-hero-bg, linear-gradient(135deg, #dbeafe, #93c5fd));
  background-size: cover;
  background-position: center;
}

.ugp-dash-portal-preview__hero-shade {
  min-height: 118px;
  display: grid;
  place-items: center;
  padding: 16px;
  background: linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.18));
}

.ugp-dash-portal-preview__content {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  min-height: 220px;
  padding: 22px 22px 24px;
  text-align: center;
}

.ugp-dash-portal-preview__logo {
  display: block;
  max-width: min(72%, 164px);
  max-height: 86px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto 16px;
}

.ugp-dash-portal-preview__logo--hero {
  max-width: min(70%, 150px);
  max-height: 72px;
  margin: 0;
  filter: drop-shadow(0 4px 10px rgba(15,23,42,.20));
}

.ugp-dash-portal-preview__brand--hero {
  margin-top: 0;
  background: rgba(255,255,255,.14);
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(15,23,42,.24);
}

.ugp-dash-card {
  border: 1px solid #dfe7f4;
  border-radius: 30px;
  background: #ffffff;
  padding: 26px 28px;
  box-shadow: 0 8px 24px rgba(17, 44, 86, 0.03);
}

.ugp-dash-card--overview { grid-area: overview; }
.ugp-dash-card--sessions { grid-area: sessions; }

.ugp-dash-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e8eef7;
}

.ugp-dash-card__heading h3 {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #17315f;
}

.ugp-dash-card__link {
  color: #17315f;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.ugp-dash-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #39a35f;
  font-weight: 700;
  font-size: .92rem;
}

.ugp-dash-status span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #35c26e;
}

.ugp-dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.ugp-dash-metric {
  min-width: 0;
  padding: 8px 12px 0 0;
  border-right: 1px solid #e8eef7;
}

.ugp-dash-metric:last-child {
  border-right: 0;
  padding-right: 0;
}

.ugp-dash-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: #f2f6fd;
  color: #2b78ff;
  font-size: 0.95rem;
  font-weight: 700;
}

.ugp-dash-metric__label,
.ugp-dash-metric small,
.ugp-dash-band-chip,
.ugp-dash-chip,
.ugp-dash-site-row__meta span,
.ugp-dash-site-row__stat,
.ugp-dash-funnel span,
.ugp-dash-campaign p,
.ugp-dash-campaign__stats span,
.ugp-dash-session-row small,
.ugp-dash-session-row time {
  color: #6c80a8;
}

.ugp-dash-metric__label {
  display: block;
  margin-top: 14px;
  font-size: 0.92rem;
  font-weight: 600;
}

.ugp-dash-metric strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: #17315f;
}

.ugp-dash-metric small {
  display: block;
  margin-top: 10px;
  font-size: .88rem;
}

.ugp-dash-metric__site {
  font-size: clamp(1.1rem, 1.5vw, 1.45rem) !important;
  line-height: 1.18 !important;
}

.ugp-dash-session-list {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.ugp-dash-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #eef3fb;
}

.ugp-dash-session-row:last-child { border-bottom: 0; }

.ugp-dash-session-row__device {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ugp-dash-session-row__icon {
  width: 18px;
  color: #264d92;
  font-size: 1rem;
}

.ugp-dash-session-row strong {
  display: block;
  color: #17315f;
  font-size: .95rem;
  word-break: break-word;
}

.ugp-dash-session-row__meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.ugp-dash-band-chip,
.ugp-dash-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid #e3ebf8;
  background: #f6f9fe;
  font-size: .8rem;
  font-weight: 700;
}

.ugp-dash-chip--success {
  background: #ecf8f1;
  border-color: #d3eadb;
  color: #2a9154;
}

.ugp-dash-empty-state {
  padding: 18px 0 4px;
}

.ugp-dash-empty-state strong {
  display: block;
  color: #17315f;
  font-size: 1rem;
}

.ugp-dash-empty-state p {
  margin: 8px 0 0;
  color: #6e82aa;
}

.ugp-dash__bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ugp-dash-site-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.ugp-dash-site-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef3fb;
}

.ugp-dash-site-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ugp-dash-site-row__thumb {
  width: 68px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(145deg, #d8e4ff, #aac7ff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}

.ugp-dash-site-row__thumb--mountain {
  background: linear-gradient(160deg, #88abd8 0%, #5f83ae 32%, #3d597b 50%, #d6d8de 52%, #8da1b6 100%);
}

.ugp-dash-site-row__thumb--harbor {
  background: linear-gradient(160deg, #698fb9 0%, #3b6386 40%, #d6dbe7 50%, #6f7982 100%);
}

.ugp-dash-site-row__thumb--workspace {
  background: linear-gradient(160deg, #d7dde8 0%, #f3f5f9 48%, #a8b2c1 100%);
}

.ugp-dash-site-row__meta strong,
.ugp-dash-campaign__content strong,
.ugp-dash-funnel strong {
  color: #17315f;
}

.ugp-dash-site-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ugp-dash-site-row__stat {
  justify-self: end;
  font-size: .92rem;
  text-align: right;
}

.ugp-dash-site-row__stat a {
  color: #17315f;
  font-weight: 700;
  text-decoration: none;
}

.ugp-dash-funnel {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(170px, .8fr) minmax(0, .85fr);
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

.ugp-dash-funnel__stats,
.ugp-dash-funnel__outcomes {
  display: grid;
  gap: 20px;
}

.ugp-dash-funnel__stats strong,
.ugp-dash-funnel__outcomes strong,
.ugp-dash-campaign__stats strong {
  display: block;
  margin-top: 6px;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.ugp-dash-funnel__stats small,
.ugp-dash-funnel__outcomes small {
  display: block;
  margin-top: 8px;
  color: #6c80a8;
  font-size: .88rem;
}

.ugp-dash-funnel__graphic {
  position: relative;
  width: 100%;
  min-height: 220px;
}

.ugp-dash-funnel__graphic span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  clip-path: polygon(10% 0, 90% 0, 74% 100%, 26% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

.ugp-dash-funnel__graphic .is-top {
  top: 0;
  width: 78%;
  height: 58px;
  background: linear-gradient(180deg, #336bff 0%, #4b7dff 100%);
}

.ugp-dash-funnel__graphic .is-mid {
  top: 56px;
  width: 62%;
  height: 46px;
  background: linear-gradient(180deg, #e7eefb 0%, #f4f7fd 100%);
}

.ugp-dash-funnel__graphic .is-low {
  top: 100px;
  width: 48%;
  height: 46px;
  background: linear-gradient(180deg, #8db0ff 0%, #6f95ff 100%);
}

.ugp-dash-funnel__graphic .is-base {
  top: 144px;
  width: 35%;
  height: 54px;
  background: linear-gradient(180deg, #7cddaa 0%, #4fcf8b 100%);
}

.ugp-dash-campaign {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.ugp-dash-campaign__visual {
  min-height: 172px;
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(19, 26, 41, 0.15), rgba(19, 26, 41, 0.45)), linear-gradient(145deg, #917047 0%, #3b3529 100%);
  color: #ffffff;
  display: grid;
  align-content: end;
}

.ugp-dash-campaign__offer {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.ugp-dash-campaign__visual small {
  display: block;
  margin-top: 8px;
  font-size: .9rem;
  color: rgba(255,255,255,0.86);
}

.ugp-dash-campaign__content {
  display: grid;
  gap: 16px;
}

.ugp-dash-campaign__content strong {
  display: block;
  font-size: 1.8rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.ugp-dash-campaign__content p {
  margin: 8px 0 0;
}

.ugp-dash-campaign__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ugp-dash-campaign__stats .is-positive {
  color: #2da35a;
}

@media (max-width: 1450px) {
  .ugp-dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .ugp-dash-metric {
    border-right: 0;
    padding-right: 0;
  }

  .ugp-dash__bottom-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ugp-dash__bottom-grid > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1200px) {
  .ugp-dash__top-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "showcase"
      "overview"
      "sessions";
  }

  .ugp-dash-showcase {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ugp-dash-showcase__preview-wrap {
    justify-items: start;
  }

  .ugp-dash__bottom-grid {
    grid-template-columns: 1fr;
  }

  .ugp-dash-funnel,
  .ugp-dash-campaign {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ugp-dash__header,
  .ugp-dash-card__heading,
  .ugp-dash-session-row,
  .ugp-dash-site-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .ugp-dash__title {
    font-size: 2.25rem;
  }

  .ugp-dash-showcase,
  .ugp-dash-card {
    padding: 22px 20px;
    border-radius: 24px;
  }

  .ugp-dash-metrics,
  .ugp-dash-campaign__stats {
    grid-template-columns: 1fr;
  }

  .ugp-dash-site-row {
    display: grid;
    grid-template-columns: 68px 1fr;
  }

  .ugp-dash-site-row__stat {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }

  .ugp-dash-showcase__actions,
  .ugp-dash__header-actions {
    width: 100%;
  }

  .ugp-dash__cta,
  .ugp-dash__pill-button {
    width: 100%;
  }
}


/* NOC / operational page compatibility pass for floating navigation shell */
body.option-com_unifiguestportal .gx-surface-redesign .ugp-page,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-workspace--noc,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-workspace--apibrowser,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-workspace--connection,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-workspace--sessions {
  width: 100%;
  max-width: none;
  margin: 0;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-page {
  display: grid;
  gap: 16px;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-hero,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-hero--workspace,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-hero--compact {
  margin: 0 0 6px !important;
  padding: 0;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-hero__title {
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-hero__eyebrow {
  margin-bottom: 6px;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-hero__actions,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px !important;
  flex-wrap: wrap;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-inline-actions {
  margin: 0 0 10px !important;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-profile-switcher {
  justify-content: flex-start !important;
  padding: 8px;
  border: 1px solid #dfe8f6;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-button--small {
  min-height: 34px;
  padding: .45rem .75rem;
  border-radius: 12px;
  font-size: 13px;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-card,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-panel,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-table-card,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-profile-table-card,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-noc-summary-card,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-pulse-card,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-noc-hero {
  border-color: #dfe7f4;
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(17,44,86,.035);
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-table-card,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-profile-table-card {
  width: 100%;
  max-width: 100%;
  padding: 16px 18px;
  overflow: hidden;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border-radius: 16px;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-table {
  width: 100%;
  min-width: 980px;
  table-layout: auto;
}

body.option-com_unifiguestportal.view-aps .gx-surface-redesign .ugp-table,
body.option-com_unifiguestportal.view-clients .gx-surface-redesign .ugp-table,
body.option-com_unifiguestportal.view-vlanprofiles .gx-surface-redesign .ugp-table,
body.option-com_unifiguestportal.view-ssidprofiles .gx-surface-redesign .ugp-table {
  min-width: 1160px;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-table th,
body.option-com_unifiguestportal .gx-surface-redesign .ugp-table td {
  padding-top: 11px;
  padding-bottom: 11px;
  vertical-align: middle;
}

body.option-com_unifiguestportal .gx-surface-redesign .ugp-profile-namecell {
  min-width: 210px;
}

body.option-com_unifiguestportal.view-noc .gx-surface-redesign .ugp-grid,
body.option-com_unifiguestportal.view-noc .gx-surface-redesign .ugp-panel-grid {
  gap: 14px;
}

body.option-com_unifiguestportal.view-noc .gx-surface-redesign .ugp-noc-hero {
  margin-top: 0;
}

body.option-com_unifiguestportal.view-noc .gx-surface-redesign .ugp-noc-summary {
  gap: 14px;
}

body.option-com_unifiguestportal.view-noc .gx-surface-redesign .ugp-noc-summary-card {
  padding: 18px;
}

body.option-com_unifiguestportal.view-noc .gx-surface-redesign .ugp-ap-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

body.option-com_unifiguestportal.view-apibrowser .gx-surface-redesign .ugp-workspace--apibrowser .ugp-api-shell {
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 14px;
}

body.option-com_unifiguestportal.view-apibrowser .gx-surface-redesign .ugp-workspace--apibrowser .ugp-api-top {
  grid-template-columns: minmax(220px,1.1fr) minmax(180px,.8fr) minmax(180px,.8fr) auto;
  gap: 12px;
}

body.option-com_unifiguestportal.view-apibrowser .gx-surface-redesign .ugp-workspace--apibrowser .ugp-api-helpers {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

body.option-com_unifiguestportal.view-apibrowser .gx-surface-redesign .ugp-workspace--apibrowser .ugp-json {
  max-height: calc(100vh - 360px);
  overflow: auto;
}

@media (max-width: 1500px) {
  body.option-com_unifiguestportal.view-apibrowser .gx-surface-redesign .ugp-workspace--apibrowser .ugp-api-shell,
  body.option-com_unifiguestportal.view-apibrowser .gx-surface-redesign .ugp-workspace--apibrowser .ugp-api-top {
    grid-template-columns: 1fr;
  }
}


/* API Browser event probing pass */
.ugp-workspace--apibrowser .ugp-endpoint-btn[data-endpoint-id^="events_"],
.ugp-workspace--apibrowser .ugp-endpoint-btn[data-endpoint-id^="alarms_"],
.ugp-workspace--apibrowser .ugp-endpoint-btn[data-endpoint-id="ids_events"] {
  border-color: #cfe0ff;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.ugp-workspace--apibrowser .ugp-endpoint-btn[data-endpoint-id^="events_"] strong,
.ugp-workspace--apibrowser .ugp-endpoint-btn[data-endpoint-id^="alarms_"] strong {
  color: #17315f;
}


/* API Browser Unpoller-style events probe */
.ugp-workspace--apibrowser .ugp-endpoint-btn[data-endpoint-id="events_unpoller_probe"] {
  border-color: rgba(46, 111, 242, .36);
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}


/* API Browser event endpoint discovery probe */
.ugp-workspace--apibrowser .ugp-endpoint-btn[data-endpoint-id="events_discovery_probe"] {
  border-color: rgba(12, 186, 140, .35);
  background: linear-gradient(180deg, #f7fffc 0%, #eefbf7 100%);
}


/* Official API client movement snapshot */
.ugp-workspace--apibrowser .ugp-endpoint-btn[data-endpoint-id="client_movement_snapshot_official"] {
  border-color: rgba(88, 132, 255, .36);
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

/* Component-level dashboard layout overrides 1.0.0.5.2.180: loaded after template.css */
/* Dashboard stronger layout overrides component 1.0.0.5.2.180 */

/* Live network overview: equal columns, equal separators, consistent vertical rhythm */
.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 24px !important;
  align-items: stretch !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-rows: 48px 58px 38px auto !important;
  align-content: start !important;
  justify-items: start !important;
  min-height: 168px !important;
  padding: 0 22px !important;
  border-right: 0 !important;
  border-left: 1px solid rgba(220,230,245,.9) !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric:first-child {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric:last-child {
  padding-right: 0 !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric__icon {
  align-self: start !important;
  margin: 0 !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric__label {
  display: block !important;
  align-self: end !important;
  min-height: 45px !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric strong {
  align-self: start !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: clamp(1.45rem, 1.75vw, 2.15rem) !important;
  line-height: 1 !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric small {
  align-self: start !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Guest engagement funnel: force mock-style 3-column layout on desktop/tablet */
.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock {
  display: grid !important;
  grid-template-columns: minmax(96px, .72fr) minmax(220px, 1.18fr) minmax(96px, .72fr) !important;
  gap: 14px !important;
  align-items: center !important;
  margin-top: 16px !important;
  padding-top: 0 !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock .ugp-dash-funnel__stats,
.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock .ugp-dash-funnel__outcomes {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock .ugp-dash-funnel__stats > div,
.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock .ugp-dash-funnel__outcomes > div {
  min-height: 78px !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock span {
  font-size: .82rem !important;
  line-height: 1.22 !important;
  font-weight: 720 !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock strong {
  margin-top: 7px !important;
  font-size: 2.05rem !important;
  line-height: .95 !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock small {
  margin-top: 8px !important;
  max-width: 112px !important;
  font-size: .82rem !important;
  line-height: 1.34 !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__graphic--mock {
  width: 100% !important;
  max-width: 250px !important;
  min-height: 184px !important;
  justify-self: center !important;
  align-self: center !important;
  transform: translateY(0) !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__graphic--mock::before {
  top: 34px !important;
  bottom: 30px !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__graphic--mock .is-top {
  top: 0 !important;
  width: 92% !important;
  height: 54px !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__graphic--mock .is-mid {
  top: 52px !important;
  width: 74% !important;
  height: 42px !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__graphic--mock .is-low {
  top: 92px !important;
  width: 58% !important;
  height: 44px !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__graphic--mock .is-base {
  top: 134px !important;
  width: 42% !important;
  height: 50px !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__node {
  width: 28px !important;
  height: 28px !important;
}

.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__node.is-users { top: 27px !important; }
.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__node.is-check { top: 114px !important; }
.ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__node.is-mail { top: 159px !important; }

/* Override earlier max-width:1450 rules that collapsed the funnel to one column too soon */
@media (max-width: 1450px) {
  .ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock {
    grid-template-columns: minmax(86px, .7fr) minmax(190px, 1.15fr) minmax(86px, .7fr) !important;
    gap: 10px !important;
  }

  .ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock .ugp-dash-funnel__stats,
  .ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock .ugp-dash-funnel__outcomes {
    grid-template-columns: 1fr !important;
  }

  .ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel__graphic--mock {
    max-width: 228px !important;
  }
}

@media (max-width: 900px) {
  .ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock {
    grid-template-columns: 1fr !important;
  }

  .ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock .ugp-dash-funnel__stats,
  .ugp-workspace--dashboard .ugp-dash-card .ugp-dash-funnel--mock .ugp-dash-funnel__outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 22px !important;
  }

  .ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric {
    border-left: 0 !important;
    padding: 0 !important;
  }
}


/* Dashboard overview safe columns 1.0.0.5.2.181
   Fixes v180 overlap where Data transferred and Uptime values collide on narrower dashboard cards. */
.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 24px !important;
  align-items: stretch !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: auto !important;
  display: grid !important;
  grid-template-rows: 48px 58px 34px auto !important;
  min-height: 158px !important;
  padding: 0 11px !important;
  border-right: 0 !important;
  border-left: 1px solid rgba(220,230,245,.9) !important;
  overflow: hidden !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric:first-child {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric:last-child {
  padding-right: 0 !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric__icon {
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric__label {
  display: block !important;
  min-height: 42px !important;
  margin: 0 !important;
  align-self: end !important;
  font-size: .86rem !important;
  line-height: 1.35 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric strong {
  display: block !important;
  align-self: start !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(1.22rem, 1.45vw, 1.55rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric small {
  display: block !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  font-size: .82rem !important;
  line-height: 1.38 !important;
  overflow-wrap: break-word !important;
}

/* On genuinely tight panels, use a tidy 2x2 layout instead of overlapping. */
@container (max-width: 520px) {
  .ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 0 !important;
  }
}

/* Fallback for browsers/container contexts where the overview card is narrow. */
@media (max-width: 1180px) {
  .ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 0 !important;
  }
  .ugp-workspace--dashboard .ugp-dash-card--overview .ugp-dash-metric:nth-child(odd) {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
}


/* AP operations view 1.0.0.5.2.183 */
.ugp-ap-ops {
  display: grid;
  gap: 18px;
}

.ugp-ap-ops__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.ugp-ap-ops__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ugp-ap-hero {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  border-radius: 18px;
  padding: 28px 34px;
  background:
    radial-gradient(circle at 82% 50%, rgba(255,255,255,.35) 0 0, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 78% 45%, rgba(255,255,255,.08) 0 0, rgba(255,255,255,0) 20%),
    linear-gradient(115deg, #061b55 0%, #0e3c93 48%, #57b8ff 100%);
  box-shadow: 0 18px 42px rgba(8,35,92,.12);
  color: #fff;
}

.ugp-ap-hero::before,
.ugp-ap-hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -120% auto;
  width: 720px;
  height: 720px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
}

.ugp-ap-hero::after {
  width: 560px;
  height: 560px;
  inset: auto 4% -95% auto;
}

.ugp-ap-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.ugp-ap-hero h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.65rem, 2.1vw, 2.2rem);
  letter-spacing: -.045em;
}

.ugp-ap-hero h2 span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 999px;
  vertical-align: middle;
}

.ugp-ap-hero h2 .is-ok { background: #36d282; }
.ugp-ap-hero h2 .is-warn { background: #ffbd45; }

.ugp-ap-hero p {
  margin: 10px 0 0;
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

.ugp-ap-hero small {
  display: block;
  margin-top: 20px;
  color: rgba(255,255,255,.78);
}

.ugp-ap-hero__device {
  position: absolute;
  right: 15%;
  bottom: -34px;
  width: 180px;
  height: 120px;
  transform: rotate(-12deg);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #e8f0fb 100%);
  box-shadow:
    inset 0 -12px 22px rgba(60,92,136,.12),
    0 24px 40px rgba(4,22,65,.24);
}

.ugp-ap-hero__device span {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 64px;
  height: 42px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 3px solid #93d7ff;
  box-shadow: 0 0 0 10px rgba(147,215,255,.12);
}

.ugp-ap-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid #dfe8f7;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 34px rgba(16,43,84,.055);
}

.ugp-ap-kpis article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value"
    "icon meta";
  gap: 2px 12px;
  align-items: center;
  min-height: 92px;
  padding: 18px 20px;
  border-left: 1px solid #e7eef8;
}

.ugp-ap-kpis article:first-child {
  border-left: 0;
}

.ugp-ap-kpis small {
  grid-area: label;
  color: #667ca7;
  font-weight: 800;
}

.ugp-ap-kpis strong {
  grid-area: value;
  color: #092b66;
  font-size: 1.55rem;
  line-height: 1;
}

.ugp-ap-kpis em {
  grid-area: meta;
  color: #667ca7;
  font-size: .82rem;
  font-style: normal;
  font-weight: 700;
}

.ugp-ap-kpi__icon,
.ugp-ap-kpi__dot {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f3f7ff;
  color: #2b73ff;
}

.ugp-ap-kpi__icon.is-safe {
  background: #eaf8ef;
  color: #1da45a;
}

.ugp-ap-kpi__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.ugp-ap-kpi__dot.is-online::before { background: #2ac776; }
.ugp-ap-kpi__dot.is-offline::before { background: #f1434b; }

.ugp-ap-board {
  border: 1px solid #dfe8f7;
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16,43,84,.045);
}

.ugp-ap-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ugp-ap-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 330px;
}

.ugp-ap-search i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8194bd;
}

.ugp-ap-search input,
.ugp-ap-toolbar select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #dce6f5;
  border-radius: 10px;
  background: #f9fbff;
  color: #092b66;
  font-weight: 700;
}

.ugp-ap-search input {
  padding: 0 42px 0 14px;
}

.ugp-ap-toolbar select {
  width: auto;
  padding: 0 36px 0 12px;
}

.ugp-ap-table-wrap {
  overflow: auto;
  border: 1px solid #e1e9f5;
  border-radius: 14px;
}

.ugp-ap-table {
  min-width: 1260px;
  margin: 0;
}

.ugp-ap-table thead th {
  background: #f7faff;
  color: #7a8bb1;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid #e1e9f5;
}

.ugp-ap-table td,
.ugp-ap-table th {
  padding: 13px 14px;
  vertical-align: middle;
}

.ugp-ap-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ugp-ap-name a {
  color: #1747ff;
  text-decoration: none;
}

.ugp-ap-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #95a5c4;
  flex: 0 0 auto;
}

.ugp-ap-status-dot.is-online { background: #2bc978; }
.ugp-ap-status-dot.is-offline { background: #f24752; }

.ugp-ap-status-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 .55rem;
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 900;
}

.ugp-ap-status-pill.is-online {
  background: #e9f8ef;
  color: #149152;
}

.ugp-ap-status-pill.is-offline {
  background: #ffecee;
  color: #cf2632;
}

.ugp-ap-update-chip {
  display: inline-flex;
  margin-left: 6px;
  min-height: 24px;
  align-items: center;
  padding: 0 .55rem;
  border-radius: 999px;
  background: #edf3ff;
  color: #2f65c8;
  font-size: .72rem;
  font-weight: 900;
}

.ugp-ap-row-menu {
  color: #7c8eb6;
  font-size: 1.25rem;
}

.ugp-ap-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px 0;
  color: #667ca7;
  font-weight: 700;
}

.ugp-ap-insights {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr 1.1fr;
  gap: 14px;
}

.ugp-ap-insight {
  min-height: 220px;
  border: 1px solid #dfe8f7;
  border-radius: 18px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16,43,84,.045);
}

.ugp-ap-insight header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ugp-ap-insight h3 {
  margin: 0;
  color: #092b66;
  font-size: 1.05rem;
}

.ugp-ap-insight header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 999px;
  background: #f1f5fc;
  color: #3f5a91;
  font-weight: 900;
}

.ugp-ap-insight-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.ugp-ap-insight-list div {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 10px;
  color: #61769f;
}

.ugp-ap-insight-list strong {
  color: #42609a;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ugp-ap-ring {
  width: 142px;
  height: 142px;
  margin: 24px auto 12px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(#129c9b calc(var(--value) * 1%), #e8eef8 0);
}

.ugp-ap-ring strong {
  color: #092b66;
  font-size: 1.2rem;
}

.ugp-ap-ring span {
  color: #667ca7;
  font-size: .8rem;
  font-weight: 800;
}

.ugp-ap-legend {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.ugp-ap-legend li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #667ca7;
}

.ugp-ap-legend span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
}

.ugp-ap-legend .is-ok { background: #2bc978; }
.ugp-ap-legend .is-warn { background: #ffbd45; }

.ugp-ap-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 24px;
  height: 160px;
  margin-top: 22px;
  border-bottom: 1px solid #e5edf8;
}

.ugp-ap-bars div {
  display: grid;
  justify-items: center;
  align-items: end;
  gap: 7px;
}

.ugp-ap-bars span {
  width: 44px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #8fb4ff, #6490eb);
}

.ugp-ap-bars strong,
.ugp-ap-bars small {
  color: #315286;
  font-weight: 900;
}

@media (max-width: 1500px) {
  .ugp-ap-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ugp-ap-kpis article:nth-child(5) {
    border-left: 0;
  }
  .ugp-ap-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ugp-ap-ops__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .ugp-ap-kpis,
  .ugp-ap-insights {
    grid-template-columns: 1fr;
  }
  .ugp-ap-hero__device {
    display: none;
  }
}


/* AP banner asset + 5-row AP table 1.0.0.5.2.184 */
.ugp-ap-hero {
  min-height: 160px !important;
  background:
    linear-gradient(90deg, rgba(6,27,85,.96) 0%, rgba(9,39,105,.84) 38%, rgba(22,92,190,.24) 68%, rgba(87,184,255,.04) 100%),
    url('../images/ap-hero-banner.webp') no-repeat center center / cover !important;
}

.ugp-ap-hero::before,
.ugp-ap-hero::after {
  display: none !important;
}

.ugp-ap-hero__device {
  display: none !important;
}

.ugp-ap-table tbody tr[hidden] {
  display: none !important;
}

.ugp-ap-table td,
.ugp-ap-table th {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.ugp-ap-table-foot {
  min-height: 44px;
}

.ugp-ap-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ugp-ap-pager button {
  min-width: 34px;
  height: 34px;
  border: 1px solid #dce6f5;
  border-radius: 9px;
  background: #fff;
  color: #092b66;
  font-weight: 900;
  cursor: pointer;
}

.ugp-ap-pager button.is-active {
  background: #edf4ff;
  border-color: #b9cff6;
  color: #246bff;
}

.ugp-ap-pager button:disabled {
  opacity: .42;
  cursor: default;
}

.ugp-ap-pager__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  color: #7c8eb6;
  font-weight: 900;
}


/* AP table column cleanup 1.0.0.5.2.185 */
.ugp-ap-table {
  min-width: 1040px;
}


/* AP real radio channel card 1.0.0.5.2.186 */
.ugp-ap-insight-empty {
  display: grid;
  align-content: center;
  min-height: 150px;
  color: #667ca7;
}
.ugp-ap-insight-empty strong {
  color: #092b66;
  font-size: 1rem;
}
.ugp-ap-insight-empty p {
  margin: 8px 0 0;
  line-height: 1.45;
}


/* AP radio band toggle and tidy chart 1.0.0.5.2.187 */
.ugp-ap-insight--radio {
  overflow: hidden;
}

.ugp-ap-insight--radio header {
  align-items: flex-start;
}

.ugp-ap-radio-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #f4f7fc;
  border: 1px solid #dfe8f7;
}

.ugp-ap-radio-toggle button {
  min-height: 26px;
  padding: 0 .62rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #58709f;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}

.ugp-ap-radio-toggle button.is-active {
  background: #ffffff;
  color: #246bff;
  box-shadow: 0 4px 10px rgba(20,60,120,.08);
}

.ugp-ap-radio-charts {
  margin-top: 16px;
}

.ugp-ap-radio-chart {
  display: none;
}

.ugp-ap-radio-chart.is-active {
  display: block;
}

.ugp-ap-insight--radio .ugp-ap-bars {
  height: 158px;
  margin-top: 0;
  grid-template-columns: repeat(var(--bar-count, 3), minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  overflow: hidden;
}

.ugp-ap-insight--radio .ugp-ap-bars div {
  min-width: 0;
}

.ugp-ap-insight--radio .ugp-ap-bars span {
  width: min(44px, 70%);
}

.ugp-ap-insight--radio .ugp-ap-bars strong {
  font-size: .92rem;
}

.ugp-ap-insight--radio .ugp-ap-bars small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ugp-ap-insight--radio .ugp-ap-insight-empty {
  min-height: 158px;
  padding: 6px 2px;
}


/* AP firmware upgrade button 1.0.0.5.2.188 */
.ugp-ap-upgrade-form {
  display: inline-flex;
  margin: 0 0 0 6px;
  vertical-align: middle;
}
.ugp-ap-upgrade-form .ugp-ap-update-chip {
  border: 0;
  cursor: pointer;
}
.ugp-ap-upgrade-form .ugp-ap-update-chip:hover {
  background: #dfeaff;
  color: #1747c7;
}
.ugp-ap-upgrade-form .ugp-ap-update-chip:disabled {
  opacity: .45;
  cursor: not-allowed;
}


/* AP page upgrade via proven API Browser route 1.0.0.5.2.196 */
.ugp-ap-update-chip.is-requested {
  background: #e9f8ef;
  color: #149152;
}


/* AP firmware request quiet success state 1.0.0.5.2.198 */
.ugp-ap-update-chip.is-requested {
  pointer-events: none;
}


/* Clients operations view 1.0.0.5.2.201 */
.ugp-clients-ops {
  display: grid;
  gap: 18px;
}

.ugp-clients-ops__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.ugp-clients-ops__actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.ugp-clients-hero {
  min-height: 132px;
  border-radius: 18px;
  padding: 28px 34px;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5,24,77,.96) 0%, rgba(7,45,128,.82) 45%, rgba(22,103,216,.25) 100%),
    radial-gradient(circle at 78% 48%, rgba(255,255,255,.24) 0 0, rgba(255,255,255,0) 22%),
    linear-gradient(115deg, #061b55 0%, #0d45ad 55%, #46c2ff 100%);
  box-shadow: 0 18px 42px rgba(8,35,92,.12);
  position: relative;
}

.ugp-clients-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  background:
    linear-gradient(26deg, transparent 0 28%, rgba(255,255,255,.18) 29% 29.4%, transparent 30% 100%),
    linear-gradient(154deg, transparent 0 35%, rgba(255,255,255,.16) 36% 36.4%, transparent 37% 100%),
    radial-gradient(circle at 12% 40%, rgba(127,202,255,.75) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 58%, rgba(127,202,255,.75) 0 2px, transparent 3px),
    radial-gradient(circle at 54% 35%, rgba(127,202,255,.75) 0 2px, transparent 3px);
}

.ugp-clients-hero h2,
.ugp-clients-hero p {
  position: relative;
  z-index: 2;
}

.ugp-clients-hero h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 2vw, 2.1rem);
  letter-spacing: -.04em;
}

.ugp-clients-hero p {
  margin: 10px 0 0;
  max-width: 620px;
  color: rgba(255,255,255,.9);
  font-weight: 700;
}

.ugp-client-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.ugp-client-kpis article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 104px;
  padding: 20px 22px;
  border: 1px solid #dfe8f7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16,43,84,.045);
}

.ugp-client-kpis small {
  display: block;
  color: #526a9a;
  font-weight: 900;
}

.ugp-client-kpis strong {
  display: block;
  margin-top: 8px;
  color: #092b66;
  font-size: 1.65rem;
  line-height: 1;
}

.ugp-client-kpis span {
  display: block;
  margin-top: 8px;
  color: #667ca7;
  font-size: .86rem;
  font-weight: 700;
}

.ugp-client-kpis i {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f0f6ff;
  color: #2b73ff;
  font-size: 1.25rem;
}

.ugp-client-kpis i.is-green {
  background: #e9f8ef;
  color: #20a865;
}

.ugp-client-kpis i.is-purple {
  background: #f0ebff;
  color: #8364e8;
}

.ugp-client-board {
  border: 1px solid #dfe8f7;
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16,43,84,.045);
  min-width: 0;
}

.ugp-client-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.ugp-client-search {
  position: relative;
  flex: 1 1 360px;
  min-width: 260px;
}

.ugp-client-search i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #8194bd;
}

.ugp-client-search input,
.ugp-client-toolbar select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #dce6f5;
  border-radius: 10px;
  background: #f9fbff;
  color: #092b66;
  font-weight: 700;
}

.ugp-client-search input {
  padding: 0 14px 0 42px;
}

.ugp-client-toolbar select {
  padding: 0 34px 0 12px;
  flex: 1 1 180px;
  min-width: 160px;
}

.ugp-client-mode {
  display: grid;
  grid-template-columns: auto minmax(105px, 1fr);
  gap: 8px;
  align-items: center;
  flex: 1 1 220px;
  min-width: 180px;
}

.ugp-client-toolbar .ugp-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ugp-client-mode span {
  color: #667ca7;
  font-size: .82rem;
  font-weight: 900;
}

.ugp-client-table-wrap {
  overflow: auto;
  border: 1px solid #e1e9f5;
  border-radius: 14px;
}

.ugp-client-table {
  min-width: 1420px;
  margin: 0;
}

.ugp-client-table thead th {
  background: #f7faff;
  color: #7a8bb1;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid #e1e9f5;
}

.ugp-client-table td,
.ugp-client-table th {
  padding: 12px 14px;
  vertical-align: middle;
}

.ugp-client-namecell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ugp-client-namecell strong {
  display: block;
  color: #092b66;
}

.ugp-client-namecell small {
  display: block;
  margin-top: 3px;
  color: #667ca7;
  font-size: .78rem;
}

.ugp-client-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2bc978;
  flex: 0 0 auto;
}

.ugp-client-connection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #092b66;
  font-weight: 700;
}

.ugp-client-connection i {
  color: #19a85a;
}

.ugp-client-network {
  color: #1c55ff;
}

.ugp-client-sparkline {
  display: inline-block;
  width: 52px;
  height: 18px;
  margin-right: 7px;
  vertical-align: middle;
  background:
    linear-gradient(135deg, transparent 0 18%, #6aa0ff 19% 22%, transparent 23% 38%, #6aa0ff 39% 42%, transparent 43% 58%, #6aa0ff 59% 62%, transparent 63% 100%),
    linear-gradient(0deg, transparent 0 50%, rgba(106,160,255,.22) 51% 53%, transparent 54% 100%);
  border-bottom: 1px dashed rgba(106,160,255,.45);
}

.ugp-client-row-menu {
  color: #7c8eb6;
  font-size: 1.25rem;
}

.ugp-client-insights {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.1fr;
  gap: 14px;
}

.ugp-client-insight {
  min-height: 220px;
  border: 1px solid #dfe8f7;
  border-radius: 18px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16,43,84,.045);
}

.ugp-client-insight h3 {
  margin: 0 0 18px;
  color: #092b66;
  font-size: 1.05rem;
}

.ugp-client-donut {
  width: 142px;
  height: 142px;
  margin: 8px auto 14px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(circle at center, #fff 0 50%, transparent 51%),
    conic-gradient(#276dff 0 calc(var(--mobile) * 1%), #8ab1ff 0 calc((var(--mobile) + var(--laptops)) * 1%), #a7c7ff 0 calc((var(--mobile) + var(--laptops) + var(--iot)) * 1%), #d9e6ff 0);
}

.ugp-client-donut strong {
  color: #092b66;
  font-size: 1.4rem;
}

.ugp-client-donut span {
  color: #667ca7;
  font-size: .82rem;
  font-weight: 800;
}

.ugp-client-legend {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ugp-client-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  color: #667ca7;
  font-weight: 700;
}

.ugp-client-legend li span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #276dff;
}

.ugp-client-legend li:nth-child(2) span { background: #8ab1ff; }
.ugp-client-legend li:nth-child(3) span { background: #a7c7ff; }
.ugp-client-legend li:nth-child(4) span { background: #d9e6ff; }

.ugp-client-active-list,
.ugp-client-roam-list {
  display: grid;
  gap: 16px;
}

.ugp-client-active-list div {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(80px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.ugp-client-active-list strong,
.ugp-client-roam-list strong {
  color: #365689;
}

.ugp-client-active-list span {
  height: 5px;
  border-radius: 999px;
  background: #edf3ff;
  overflow: hidden;
}

.ugp-client-active-list span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #276dff;
}

.ugp-client-active-list em {
  color: #365689;
  font-style: normal;
  font-size: .8rem;
  font-weight: 800;
}

.ugp-client-roam-list div {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.ugp-client-roam-list div > span {
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 999px;
  border: 2px solid #83aaff;
}

.ugp-client-roam-list p {
  margin: 0;
  color: #667ca7;
  line-height: 1.35;
}

.ugp-client-health header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ugp-client-health header span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 .8rem;
  border-radius: 10px;
  background: #e9f8ef;
  color: #149152;
  font-weight: 900;
}

.ugp-client-health p {
  margin: -8px 0 22px;
  color: #667ca7;
}

.ugp-client-health > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  text-align: center;
}

.ugp-client-health section {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.ugp-client-health section i {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9f8ef;
  color: #20a865;
}

.ugp-client-health section strong {
  color: #092b66;
  font-size: 1.2rem;
}

.ugp-client-health section small {
  color: #667ca7;
  font-weight: 800;
}

@media (max-width: 1500px) {
  .ugp-client-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ugp-client-table {
    min-width: 1260px;
  }
}

@media (max-width: 850px) {
  .ugp-clients-ops__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .ugp-client-kpis,
  .ugp-client-insights {
    grid-template-columns: 1fr;
  }
  .ugp-client-toolbar {
    align-items: stretch;
  }
  .ugp-client-search,
  .ugp-client-toolbar select,
  .ugp-client-mode,
  .ugp-client-toolbar .ugp-button {
    flex-basis: 100%;
    min-width: 0;
  }
}


/* Clients banner graphic + vendor enrichment 1.0.0.5.2.202 */
.ugp-clients-hero {
  min-height: 132px !important;
  background:
    linear-gradient(90deg, rgba(5,24,77,.96) 0%, rgba(7,42,119,.78) 40%, rgba(18,85,190,.12) 74%, rgba(20,116,230,.04) 100%),
    url('../images/clients-hero-banner.webp') no-repeat center center / cover !important;
}

.ugp-clients-hero::before {
  display: none !important;
}

.ugp-client-table td:nth-child(2) {
  min-width: 120px;
}

.ugp-client-table td:nth-child(3) {
  min-width: 170px;
}

.ugp-client-table td:nth-child(5),
.ugp-client-table td:nth-child(6) {
  white-space: nowrap;
}



.ugp-client-networkcell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.25;
}
.ugp-client-ssid {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(0, 36, 90, 0.58);
}


.ugp-client-activity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 96px;
}
.ugp-client-sparkline-svg {
  width: 64px;
  height: 20px;
  flex: 0 0 auto;
  overflow: visible;
}
.ugp-client-sparkline-fill {
  fill: rgba(39, 109, 255, 0.12);
  stroke: none;
}
.ugp-client-sparkline-line {
  fill: none;
  stroke: #276dff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.ugp-client-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #33517d;
  font-size: .88rem;
  font-weight: 650;
}

.ugp-client-table-pagination--top {
  margin: 0 0 12px;
}

.ugp-client-table-pagination--bottom {
  margin: 14px 0 0;
}

.ugp-client-pager {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ugp-client-pager__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #d5e2f4;
  border-radius: 14px;
  background: #f7fbff;
  color: #092b66;
  text-decoration: none;
  font-weight: 800;
}

.ugp-client-pager__button:hover {
  background: #eef6ff;
  text-decoration: none;
}

.ugp-client-pager__button.is-disabled {
  opacity: .45;
  pointer-events: none;
}

@media (max-width: 720px) {
  .ugp-client-table-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* SSID ops page */
.ugp-ssid-ops {
  max-width: none;
}

.ugp-ssid-ops__top {
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 10px;
}

.ugp-ssid-ops .ugp-profile-switcher {
  margin-top: 10px;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  justify-content: flex-start;
}

.ugp-ssid-ops .ugp-clients-ops__actions {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 8px;
}

.ugp-ssid-ops .ugp-hero__eyebrow {
  color: #8192bd;
  letter-spacing: .2em;
}

.ugp-ssid-ops .ugp-hero__title {
  margin-top: 4px;
  font-size: clamp(2.15rem, 3.1vw, 3.1rem);
  line-height: .95;
}

.ugp-ssid-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 148px;
  margin: 12px 0 14px;
  padding: 34px 36px;
  border: 1px solid #c9dcfb;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(239,247,255,.9) 0%, rgba(239,247,255,.7) 34%, rgba(239,247,255,.12) 56%, rgba(239,247,255,0) 100%),
    url('../images/ssid-hero-banner.webp') no-repeat center center / cover;
  box-shadow: 0 20px 50px rgba(23, 72, 142, .08);
  overflow: hidden;
  position: relative;
}

.ugp-ssid-hero:after {
  content: none;
}

.ugp-ssid-hero__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 34px rgba(31,88,175,.12);
  color: #276dff;
  font-size: 2rem;
  flex: 0 0 auto;
}

.ugp-ssid-hero__icon svg {
  width: 34px;
  height: 34px;
  display: block;
  overflow: visible;
}

.ugp-ssid-hero__icon svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ugp-ssid-hero__icon svg path:first-child {
  fill: currentColor;
  stroke: none;
}

.ugp-ssid-hero h2 {
  margin: 0 0 8px;
  color: #092b66;
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  font-weight: 850;
  line-height: 1.08;
}

.ugp-ssid-hero p {
  margin: 0;
  color: #33517d;
  font-weight: 700;
}

.ugp-ssid-hero p span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 999px;
  background: #2bc978;
}

.ugp-ssid-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ugp-ssid-kpi {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 84px;
  border: 1px solid #dfe8f7;
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16,43,84,.045);
  min-width: 0;
}

.ugp-ssid-kpi > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef5ff;
  color: #276dff;
  font-size: 1.22rem;
  flex: 0 0 auto;
}

.ugp-ssid-kpi > span svg {
  width: 25px;
  height: 25px;
  display: block;
  overflow: visible;
}

.ugp-ssid-kpi > span svg path,
.ugp-ssid-kpi > span svg rect,
.ugp-ssid-kpi > span svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ugp-ssid-kpi:nth-child(2) > span {
  background: #e8fbf0;
  color: #20b66a;
}

.ugp-ssid-kpi p {
  margin: 0 0 4px;
  color: #667ca7;
  font-weight: 800;
  font-size: .82rem;
  line-height: 1.15;
}

.ugp-ssid-kpi strong {
  display: block;
  color: #092b66;
  font-size: 1.28rem;
  line-height: 1;
}

.ugp-ssid-kpi em {
  display: block;
  margin-top: 5px;
  color: #5b6f99;
  font-style: normal;
  font-size: .82rem;
}

.ugp-ssid-table-card {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 0;
  border-color: #dce7f6;
}

.ugp-ssid-table th {
  color: #8192b8;
  font-size: .77rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ugp-ssid-table td,
.ugp-ssid-table th {
  padding: 11px 14px;
  vertical-align: middle;
}

.ugp-ssid-table td strong {
  display: block;
  color: #092b66;
}

.ugp-ssid-table td small {
  display: block;
  margin-top: 3px;
  color: #5f75a3;
  font-size: .74rem;
}

.ugp-ssid-pill {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef5ff;
  color: #276dff;
  font-weight: 800;
  font-size: .78rem;
}

.ugp-ssid-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ugp-ssid-insight {
  min-height: 184px;
  padding: 18px 20px;
  border: 1px solid #dfe8f7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16,43,84,.045);
  min-width: 0;
}

.ugp-ssid-insight h3,
.ugp-ssid-security header h3 {
  margin: 0 0 14px;
  color: #092b66;
  font-size: 1.03rem;
  line-height: 1.2;
}

.ugp-ssid-security header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ugp-ssid-security header span {
  padding: 6px 12px;
  border-radius: 999px;
  background: #e8fbf0;
  color: #119454;
  font-weight: 850;
  font-size: .78rem;
}

.ugp-ssid-donut {
  width: 106px;
  height: 106px;
  margin: 8px auto 12px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(circle at center, #fff 0 52%, transparent 53%),
    conic-gradient(#2bc978 0 calc(var(--secure) * 1%), #77d7eb calc(var(--secure) * 1%) calc((var(--secure) + var(--open)) * 1%), #d9c5b7 0);
}

.ugp-ssid-donut strong {
  color: #092b66;
  font-size: 1.25rem;
}

.ugp-ssid-donut small {
  color: #647aa4;
  font-weight: 700;
}

.ugp-ssid-security ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ugp-ssid-security li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  color: #33517d;
}

.ugp-ssid-security li span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2bc978;
}

.ugp-ssid-security li:nth-child(2) span { background: #77d7eb; }
.ugp-ssid-security li:nth-child(3) span { background: #d9c5b7; }

.ugp-ssid-security li strong {
  margin-left: auto;
  color: #092b66;
}

.ugp-ssid-bars {
  display: grid;
  gap: 12px;
}

.ugp-ssid-bars div {
  display: grid;
  grid-template-columns: minmax(78px, .9fr) minmax(92px, 1.5fr) 26px;
  gap: 10px;
  align-items: center;
  color: #33517d;
  font-weight: 700;
  min-width: 0;
}

.ugp-ssid-bars label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.ugp-ssid-bars span {
  height: 7px;
  border-radius: 999px;
  background: #e7effd;
  overflow: hidden;
}

.ugp-ssid-bars i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #276dff;
}

.ugp-ssid-insight > p {
  margin: 14px 0 0;
  color: #647aa4;
  font-size: .86rem;
}

.ugp-ssid-recent div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  color: #33517d;
}

.ugp-ssid-recent div strong {
  color: #092b66;
}

.ugp-ssid-recent div span {
  color: #7c8eb6;
}

.ugp-ssid-recent a {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e7eff8;
  color: #276dff;
  font-weight: 850;
  text-decoration: none;
}

body.option-com_unifiguestportal.view-ssidprofiles .gx-surface-redesign .ugp-profile-switcher {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

body.option-com_unifiguestportal.view-ssidprofiles .gx-surface-redesign .ugp-ssid-table-card {
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
}

body.option-com_unifiguestportal.view-ssidprofiles .gx-surface-redesign .ugp-ssid-table {
  min-width: 1120px;
}

/* v1.0.0.5.2.223 SSID edit page */
.ugp-ssid-edit {
  --ssid-border: #d8e5f7;
  --ssid-blue: #0b63f6;
  --ssid-navy: #082b63;
  --ssid-muted: #647aa6;
  color: var(--ssid-navy);
}
.ugp-ssid-edit__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 22px;
}
.ugp-ssid-edit__title {
  margin: 8px 0 0;
  font-size: clamp(2.1rem, 3vw, 3rem);
  line-height: 1;
  font-weight: 900;
  color: var(--ssid-navy);
  letter-spacing: 0;
}
.ugp-ssid-edit__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.ugp-ssid-save {
  gap: 0;
  padding-right: 0;
  overflow: hidden;
}
.ugp-ssid-save__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-height: 100%;
  margin-left: 14px;
  border-left: 1px solid rgba(255,255,255,.24);
}
.ugp-ssid-save__chevron svg,
.ugp-ssid-edit svg {
  width: 18px;
  height: 18px;
}
.ugp-ssid-edit__layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ugp-ssid-edit__side,
.ugp-ssid-edit__main {
  display: grid;
  gap: 16px;
}
.ugp-ssid-side-card,
.ugp-ssid-edit-card {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ssid-border);
  border-radius: 16px;
  box-shadow: 0 18px 38px rgba(11, 54, 118, .06);
}
.ugp-ssid-side-card {
  padding: 24px;
}
.ugp-ssid-summary {
  display: grid;
  margin-top: 18px;
}
.ugp-ssid-summary__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 48px;
  padding: 12px 0;
  border-bottom: 1px solid #e7edf7;
}
.ugp-ssid-summary__row:last-child {
  border-bottom: 0;
}
.ugp-ssid-summary__row span,
.ugp-ssid-summary__row strong {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ugp-ssid-summary__row span {
  min-width: 0;
  color: var(--ssid-muted);
  font-weight: 800;
  font-size: .92rem;
}
.ugp-ssid-summary__row strong {
  color: var(--ssid-navy);
  font-size: .94rem;
  font-weight: 900;
  text-align: right;
  justify-content: flex-end;
}
.ugp-ssid-summary__row em {
  margin-left: 12px;
  color: var(--ssid-navy);
  font-style: normal;
}
.ugp-status-pill,
.ugp-band-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1;
}
.ugp-status-pill--success {
  color: #107941;
  background: #dcf8e9;
}
.ugp-status-pill--muted {
  color: #63738f;
  background: #eef3fb;
}
.ugp-band-chip {
  color: #1762e7;
  background: #eaf2ff;
}
.ugp-chip-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ugp-dot-ok {
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  background: #16a66a;
}
.ugp-ssid-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.ugp-ssid-insight {
  min-height: 112px;
  padding: 18px;
  border: 1px solid #dfe9f8;
  border-radius: 12px;
  background: #fff;
}
.ugp-ssid-insight span {
  display: inline-flex;
  color: var(--ssid-blue);
  margin-bottom: 10px;
}
.ugp-ssid-insight strong {
  display: block;
  color: var(--ssid-navy);
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}
.ugp-ssid-insight small {
  display: block;
  margin-top: 8px;
  color: var(--ssid-muted);
  font-size: .9rem;
  line-height: 1.35;
  font-weight: 700;
}
.ugp-ssid-edit-card {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(360px, 1fr) auto;
  gap: 28px;
  align-items: start;
  min-height: 146px;
  padding: 26px 22px;
}
.ugp-ssid-edit-card__lead {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.ugp-ssid-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  color: var(--ssid-blue);
  background: #edf4ff;
}
.ugp-ssid-section-icon svg {
  width: 24px;
  height: 24px;
}
.ugp-ssid-edit-card h2 {
  margin: 4px 0 8px;
  color: var(--ssid-navy);
  font-size: 1.32rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0;
}
.ugp-ssid-edit-card p {
  margin: 0;
  max-width: 34ch;
  color: var(--ssid-muted);
  font-size: .98rem;
  line-height: 1.65;
  font-weight: 650;
}
.ugp-ssid-edit-fields {
  display: grid;
  grid-template-columns: minmax(135px, 190px) minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 12px;
  margin: 0;
}
.ugp-ssid-edit-fields dt,
.ugp-ssid-edit-fields dd {
  margin: 0;
  font-size: .94rem;
  line-height: 1.3;
}
.ugp-ssid-edit-fields dt {
  color: #7386ae;
  font-weight: 900;
}
.ugp-ssid-edit-fields dd {
  color: var(--ssid-navy);
  font-weight: 850;
}
.ugp-toggle-pill {
  position: relative;
  display: inline-flex;
  width: 26px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 999px;
  background: #526581;
}
.ugp-toggle-pill i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.ugp-toggle-pill.is-on {
  background: #20a76b;
}
.ugp-toggle-pill.is-on i {
  left: 15px;
}
.ugp-mini-shield {
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-left: 7px;
  color: #0b995a;
  vertical-align: -3px;
}
.ugp-mini-shield svg {
  width: 16px;
  height: 16px;
}
.ugp-ssid-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 82px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #cfe0f7;
  border-radius: 10px;
  color: var(--ssid-blue);
  background: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.ugp-ssid-edit-button svg {
  width: 17px;
  height: 17px;
}
@media (max-width: 1180px) {
  .ugp-ssid-edit__layout {
    grid-template-columns: 1fr;
  }
  .ugp-ssid-edit-card {
    grid-template-columns: minmax(240px, .8fr) minmax(320px, 1fr) auto;
  }
}
@media (max-width: 860px) {
  .ugp-ssid-edit__top,
  .ugp-ssid-edit__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .ugp-ssid-edit-card {
    grid-template-columns: 1fr;
  }
  .ugp-ssid-edit-fields {
    grid-template-columns: minmax(110px, .65fr) minmax(0, 1fr);
  }
  .ugp-ssid-edit-button {
    justify-self: start;
  }
}
@media (max-width: 560px) {
  .ugp-ssid-summary__row,
  .ugp-ssid-edit-fields,
  .ugp-ssid-insights {
    grid-template-columns: 1fr;
  }
  .ugp-ssid-summary__row strong {
    justify-content: flex-start;
    text-align: left;
  }
}

/* SSID edit density pass */
.ugp-ssid-edit .ugp-hero__eyebrow {
  font-size: .76rem;
}
.ugp-ssid-edit__title {
  font-size: clamp(1.85rem, 2.3vw, 2.55rem);
}
.ugp-ssid-edit__top {
  margin-bottom: 18px;
}
.ugp-ssid-edit__layout {
  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
  gap: 20px;
}
.ugp-ssid-edit__main,
.ugp-ssid-edit__side {
  gap: 14px;
}
.ugp-ssid-side-card {
  padding: 20px;
  border-radius: 14px;
}
.ugp-ssid-summary {
  margin-top: 14px;
}
.ugp-ssid-summary__row {
  min-height: 42px;
  padding: 9px 0;
  gap: 12px;
}
.ugp-ssid-summary__row span {
  font-size: .82rem;
}
.ugp-ssid-summary__row strong {
  font-size: .84rem;
}
.ugp-status-pill,
.ugp-band-chip {
  min-height: 22px;
  padding: 4px 9px;
  font-size: .74rem;
}
.ugp-ssid-insights {
  gap: 12px;
  margin-top: 14px;
}
.ugp-ssid-insight {
  min-height: 96px;
  padding: 14px;
  border-radius: 10px;
}
.ugp-ssid-insight span {
  margin-bottom: 8px;
}
.ugp-ssid-insight strong {
  font-size: 1.22rem;
}
.ugp-ssid-insight small {
  font-size: .78rem;
  line-height: 1.25;
}
.ugp-ssid-edit-card {
  grid-template-columns: minmax(230px, .68fr) minmax(320px, 1fr) auto;
  min-height: 118px;
  gap: 22px;
  padding: 20px 20px 20px 18px;
  border-radius: 14px;
}
.ugp-ssid-edit-card__lead {
  gap: 14px;
}
.ugp-ssid-section-icon {
  flex-basis: 42px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
}
.ugp-ssid-section-icon svg {
  width: 20px;
  height: 20px;
}
.ugp-ssid-edit-card h2 {
  margin: 2px 0 6px;
  font-size: 1.08rem;
}
.ugp-ssid-edit-card p {
  font-size: .84rem;
  line-height: 1.5;
  max-width: 32ch;
}
.ugp-ssid-edit-fields {
  grid-template-columns: minmax(125px, 170px) minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 9px;
}
.ugp-ssid-edit-fields dt,
.ugp-ssid-edit-fields dd {
  font-size: .84rem;
  line-height: 1.25;
}
.ugp-ssid-edit-button {
  min-width: 74px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: .84rem;
}
.ugp-ssid-edit__actions .ugp-button {
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: .86rem;
}
.ugp-ssid-save__chevron {
  width: 38px;
}

/* VLAN detail page */
.ugp-vlan-detail {
  color: #092b66;
}
.ugp-vlan-detail svg {
  width: 18px;
  height: 18px;
}
.ugp-vlan-detail__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.ugp-vlan-detail__crumb {
  display: inline-block;
  margin-bottom: 14px;
  color: #1d63ec;
  font-size: .9rem;
  font-weight: 700;
}
.ugp-vlan-detail__top h1 {
  margin: 0 0 12px;
  color: #061f4f;
  font-size: clamp(2rem, 2.7vw, 2.85rem);
  line-height: .95;
  font-weight: 900;
  letter-spacing: 0;
}
.ugp-vlan-detail__top p {
  margin: 0 0 12px;
  color: #435b85;
  font-size: 1rem;
  font-weight: 650;
}
.ugp-vlan-detail__top small {
  color: #7082a9;
  font-weight: 700;
}
.ugp-vlan-detail__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}
.ugp-vlan-detail__actions .ugp-button {
  min-height: 44px;
  gap: 10px;
  font-size: .9rem;
}
.ugp-vlan-path-card,
.ugp-vlan-detail-card,
.ugp-vlan-side-card {
  border: 1px solid #d8e5f7;
  border-radius: 14px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 38px rgba(11, 54, 118, .05);
}
.ugp-vlan-path-card {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 2.9fr);
  gap: 22px;
  align-items: center;
  min-height: 110px;
  margin-bottom: 18px;
  padding: 18px 24px;
}
.ugp-vlan-path {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 0;
}
.ugp-vlan-path > i {
  display: block;
  height: 2px;
  border-top: 2px dashed #4b93ff;
}
.ugp-vlan-node {
  display: inline-grid;
  place-items: center;
  min-width: 74px;
  min-height: 68px;
  padding: 10px;
  border: 1px solid #dce8f8;
  border-radius: 10px;
  color: #126df2;
  background: #fff;
  font-weight: 850;
}
.ugp-vlan-node span {
  margin-top: 4px;
  color: #31517f;
  font-size: .72rem;
}
.ugp-vlan-node strong {
  color: #092b66;
  font-size: 1.45rem;
  line-height: 1;
}
.ugp-vlan-node--active {
  border-color: #2680ff;
  background: #f5f9ff;
}
.ugp-vlan-facts {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
}
.ugp-vlan-facts div {
  min-height: 56px;
  padding: 0 16px;
  border-left: 1px solid #e3ebf7;
}
.ugp-vlan-facts dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #5e75a2;
  font-size: .8rem;
  font-weight: 750;
}
.ugp-vlan-facts dd {
  margin: 0;
  color: #092b66;
  font-size: 1.02rem;
  font-weight: 900;
}
.ugp-vlan-facts .is-good,
.ugp-vlan-side-card .is-good {
  color: #139653;
}
.ugp-vlan-facts .is-blue {
  color: #0b63f6;
}
.ugp-vlan-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: 18px;
  align-items: start;
}
.ugp-vlan-detail__main,
.ugp-vlan-detail__side {
  display: grid;
  gap: 14px;
}
.ugp-vlan-detail-card {
  padding: 20px;
}
.ugp-vlan-detail-card h2,
.ugp-vlan-side-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #092b66;
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
}
.ugp-vlan-detail-card h2 svg,
.ugp-vlan-side-card h3 svg {
  color: #136cf4;
}
.ugp-vlan-detail-list {
  display: grid;
  margin: 0;
}
.ugp-vlan-detail-list--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 36px;
}
.ugp-vlan-detail-list div {
  display: grid;
  grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr);
  gap: 16px;
  min-height: 42px;
  align-items: center;
  border-bottom: 1px solid #e4ebf5;
}
.ugp-vlan-detail-list dt,
.ugp-vlan-detail-list dd {
  margin: 0;
  font-size: .86rem;
  line-height: 1.3;
}
.ugp-vlan-detail-list dt {
  color: #55709e;
  font-weight: 760;
}
.ugp-vlan-detail-list dd {
  color: #092b66;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.ugp-vlan-detail-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  color: #18864e;
  background: #dff7e9;
  font-size: .78rem;
  font-weight: 900;
}
.ugp-vlan-addressing__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .68fr);
  gap: 28px;
  align-items: center;
}
.ugp-vlan-usage-box {
  min-height: 150px;
  padding: 18px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fbff, #eef5ff);
}
.ugp-vlan-usage-box span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #56719c;
  font-size: .8rem;
  font-weight: 750;
}
.ugp-vlan-usage-box strong {
  display: block;
  margin-top: 8px;
  color: #092b66;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 900;
}
.ugp-vlan-usage-box p {
  margin: 8px 0 10px;
  color: #55709e;
  font-size: .84rem;
  font-weight: 700;
}
.ugp-vlan-usage-box > div {
  height: 8px;
  border-radius: 999px;
  background: #dce7f7;
  overflow: hidden;
}
.ugp-vlan-usage-box > div i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0b63f6;
}
.ugp-vlan-usage-box dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 0;
}
.ugp-vlan-usage-box dt,
.ugp-vlan-usage-box dd {
  margin: 0;
  color: #092b66;
  font-size: .82rem;
  font-weight: 800;
}
.ugp-vlan-usage-box dd {
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 900;
}
.ugp-vlan-side-card {
  padding: 18px 20px;
}
.ugp-vlan-side-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ugp-vlan-side-card header h3 {
  margin-bottom: 8px;
}
.ugp-vlan-side-card header a,
.ugp-vlan-link {
  color: #0b63f6;
  font-size: .82rem;
  font-weight: 850;
  text-decoration: none;
}
.ugp-vlan-side-card > strong {
  display: block;
  margin: 4px 0 8px 28px;
  font-size: .86rem;
  font-weight: 900;
}
.ugp-vlan-side-card .is-warn {
  color: #ad6b00;
}
.ugp-vlan-side-card p {
  margin: 0;
  color: #647aa4;
  font-size: .82rem;
  font-weight: 700;
}
.ugp-vlan-side-list {
  margin: 0 0 12px;
}
.ugp-vlan-side-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 34px;
  align-items: center;
  border-bottom: 1px solid #e5edf7;
}
.ugp-vlan-side-list dt,
.ugp-vlan-side-list dd {
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
}
.ugp-vlan-side-list dt {
  color: #647aa4;
}
.ugp-vlan-side-list dd {
  color: #092b66;
}
.ugp-vlan-actions-list {
  display: grid;
}
.ugp-vlan-actions-list a {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid #e5edf7;
  color: #0b63f6;
  font-size: .82rem;
  font-weight: 760;
  text-decoration: none;
}
.ugp-vlan-actions-list span:after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #45658f;
  border-right: 2px solid #45658f;
  transform: rotate(45deg);
}
.ugp-vlan-usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 90px auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid #e5edf7;
}
.ugp-vlan-usage-row span {
  color: #647aa4;
  font-size: .84rem;
  font-weight: 760;
}
.ugp-vlan-usage-row strong {
  color: #092b66;
  font-size: 1.1rem;
  font-weight: 900;
}
.ugp-vlan-usage-row i {
  height: 20px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, transparent 42%, #1b6fff 43% 57%, transparent 58%) 0 10px / 18px 10px repeat-x,
    linear-gradient(90deg, transparent, rgba(27,111,255,.14), transparent);
}
.ugp-vlan-usage-row em {
  color: #139653;
  font-size: .76rem;
  font-style: normal;
  font-weight: 850;
}
@media (max-width: 1200px) {
  .ugp-vlan-path-card,
  .ugp-vlan-detail__grid,
  .ugp-vlan-addressing__content {
    grid-template-columns: 1fr;
  }
  .ugp-vlan-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 0;
  }
}
@media (max-width: 760px) {
  .ugp-vlan-detail__top,
  .ugp-vlan-detail__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ugp-vlan-path {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ugp-vlan-path > i {
    display: none;
  }
  .ugp-vlan-facts,
  .ugp-vlan-detail-list--two,
  .ugp-vlan-detail-list div,
  .ugp-vlan-usage-row {
    grid-template-columns: 1fr;
  }
  .ugp-vlan-facts div {
    border-left: 0;
    border-top: 1px solid #e3ebf7;
    padding: 12px 0 0;
  }
}

/* Connection controller dashboard */
.ugp-connection-ops {
  color: #092b66;
}
.ugp-connection-ops svg {
  width: 18px;
  height: 18px;
}
.ugp-connection-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}
.ugp-connection-top h1 {
  margin: 0 0 10px;
  color: #071f4e;
  font-size: clamp(2rem, 2.7vw, 2.8rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}
.ugp-connection-top p {
  margin: 0;
  color: #425a83;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 650;
}
.ugp-connection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
}
.ugp-connection-actions .ugp-button {
  min-height: 44px;
  gap: 10px;
  font-size: .9rem;
}
.ugp-connection-alert,
.ugp-connection-hero,
.ugp-controller-card,
.ugp-connection-panel,
.ugp-connection-empty {
  border: 1px solid #d8e5f7;
  border-radius: 14px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 38px rgba(11, 54, 118, .055);
}
.ugp-connection-alert {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  padding: 16px 18px;
  color: #7b4100;
  background: #fff8ed;
}
.ugp-connection-hero {
  position: relative;
  overflow: hidden;
  min-height: 222px;
  margin-bottom: 28px;
  padding: 26px 28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.99) 0 42%, rgba(255,255,255,.88) 58%, rgba(255,255,255,.16) 100%),
    url("../images/connection-hero-banner.webp") center right / cover no-repeat,
    #f6f9ff;
}
.ugp-connection-hero > div:first-child {
  position: relative;
  z-index: 2;
  width: min(100%, 1040px);
  max-width: none;
}
.ugp-connection-hero span {
  display: block;
  margin-bottom: 12px;
  color: #0b63f6;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ugp-connection-hero h2 {
  margin: 0 0 8px;
  color: #071f4e;
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0;
}
.ugp-connection-hero p {
  margin: 0;
  color: #40587f;
  font-size: .95rem;
  font-weight: 650;
}
.ugp-connection-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 0;
  margin-top: 42px;
  max-width: 100%;
}
.ugp-connection-kpis article {
  display: grid;
  grid-template-columns: 58px minmax(32px, auto) minmax(118px, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 72px;
  padding: 0 24px 0 0;
  border-right: 0;
}
.ugp-connection-kpis article:last-child {
  border-right: 0;
}
.ugp-connection-kpis mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 14px;
}
.ugp-connection-kpis mark.is-blue { color: #0b63f6; background: #dfeaff; }
.ugp-connection-kpis mark.is-green { color: #15985c; background: #dff7e9; }
.ugp-connection-kpis mark.is-amber { color: #d48600; background: #fff0d5; }
.ugp-connection-kpis mark.is-purple { color: #7a57c9; background: #f0e3f5; }
.ugp-connection-kpis strong {
  color: #071f4e;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 900;
}
.ugp-connection-kpis article > span {
  margin: 0;
  color: #071f4e;
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  min-width: 0;
}
.ugp-connection-kpis small {
  display: block;
  margin-top: 4px;
  color: #667da7;
  font-size: .82rem;
  font-weight: 650;
}
.ugp-connection-map {
  display: none;
}
.ugp-connection-map:before {
  content: "";
  position: absolute;
  right: 110px;
  top: 42px;
  width: 118px;
  height: 118px;
  border-radius: 12px 12px 4px 4px;
  background:
    repeating-linear-gradient(0deg, #2f7dff 0 9px, transparent 9px 22px),
    linear-gradient(#ddebff, #b9d6ff);
  box-shadow: 0 18px 42px rgba(28, 98, 206, .18);
  transform: skewY(-8deg);
}
.ugp-connection-map:after {
  content: "";
  position: absolute;
  right: 118px;
  top: 160px;
  width: 130px;
  height: 18px;
  border-radius: 50%;
  background: rgba(38, 111, 246, .15);
}
.ugp-connection-map i {
  position: absolute;
  width: 54px;
  height: 38px;
  border-radius: 6px;
  background: #e7f1ff;
  box-shadow: inset 0 -8px 0 rgba(36, 111, 242, .1);
  transform: rotate(-30deg) skewX(22deg);
}
.ugp-connection-map i:nth-child(1) { right: 360px; top: 78px; }
.ugp-connection-map i:nth-child(2) { right: 268px; top: 128px; width: 36px; height: 30px; }
.ugp-connection-map i:nth-child(3) { right: 72px; top: 100px; width: 40px; height: 34px; }
.ugp-connection-map b {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1e7bff;
  box-shadow: 0 0 0 6px rgba(30,123,255,.16);
}
.ugp-connection-map b:nth-of-type(1) { right: 335px; top: 74px; }
.ugp-connection-map b:nth-of-type(2) { right: 255px; top: 112px; }
.ugp-connection-map b:nth-of-type(3) { right: 85px; top: 84px; }
.ugp-connection-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}
.ugp-connection-section-head h2 {
  margin: 0 0 8px;
  color: #071f4e;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0;
}
.ugp-connection-section-head p {
  margin: 0;
  color: #5d719b;
  font-size: .9rem;
  font-weight: 650;
}
.ugp-connection-tools {
  display: flex;
  gap: 10px;
}
.ugp-connection-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #d3e1f5;
  border-radius: 8px;
  color: #203c67;
  background: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
}
.ugp-connection-tools button.is-active {
  color: #0b63f6;
  box-shadow: inset 0 0 0 1px #0b63f6;
}
.ugp-controller-list {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}
.ugp-controller-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 2.5fr) 164px;
  gap: 22px;
  align-items: center;
  min-height: 132px;
  padding: 38px 22px 20px 26px;
  overflow: hidden;
}
.ugp-controller-card:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #18a85f;
}
.ugp-controller-card.is-attention:before {
  background: #f39a00;
}
.ugp-controller-card__identity {
  display: flex;
  gap: 18px;
  align-items: center;
}
.ugp-controller-card__identity mark {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 14px;
  color: #15985c;
  background: #dff7e9;
}
.ugp-controller-card.is-attention .ugp-controller-card__identity mark {
  color: #d48600;
  background: #fff0d5;
}

.ugp-controller-card.has-controller-image {
  grid-template-columns: minmax(430px, 1fr) minmax(0, 2.2fr) 164px;
  min-height: 148px;
  padding: 0 22px 0 0;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__identity {
  align-self: stretch;
  align-items: stretch;
  gap: 20px;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__identity > div {
  align-self: center;
  padding: 20px 0;
}
.ugp-controller-card__identity mark.ugp-controller-card__image {
  overflow: hidden;
  color: transparent;
  background: #eef5ff;
  box-shadow: 0 14px 30px rgba(21, 55, 112, .16);
}
.ugp-controller-card.has-controller-image .ugp-controller-card__identity mark.ugp-controller-card__image {
  flex: 0 0 148px;
  width: 148px;
  height: 148px;
  min-height: 148px;
  border-radius: 0;
  box-shadow: none;
}
.ugp-controller-card__identity mark.ugp-controller-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ugp-controller-card__identity h3 {
  margin: 0 0 8px;
  color: #071f4e;
  font-size: 1.1rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0;
}
.ugp-controller-card__identity p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #5c7199;
  font-size: .84rem;
  font-weight: 700;
}
.ugp-controller-card__identity span {
  display: block;
  width: 118px;
  height: 18px;
  margin-top: 12px;
  border-radius: 4px;
  background: linear-gradient(#f3f6fa, #d9e2ee);
  box-shadow: 0 5px 12px rgba(25,58,103,.12);
}
.ugp-controller-card__facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
}
.ugp-controller-card__facts div {
  min-height: 58px;
  padding: 0 18px;
  border-left: 0;
}
.ugp-controller-card__facts dt {
  margin: 0 0 8px;
  color: #65799f;
  font-size: .76rem;
  font-weight: 850;
}
.ugp-controller-card__facts dd {
  margin: 0;
  color: #092b66;
  font-size: .9rem;
  line-height: 1.3;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.ugp-controller-card__facts dd a {
  display: inline-flex;
  margin-left: 8px;
  color: #0b63f6;
  vertical-align: -4px;
}
.ugp-controller-card__facts dd span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .78rem;
}
.ugp-controller-card__facts dd span.is-good {
  color: #11824b;
  background: #dff7e9;
}
.ugp-controller-card__facts dd span.is-warn {
  color: #ba7100;
  background: #fff0d5;
}
.ugp-controller-card__facts small {
  display: block;
  margin-top: 6px;
  color: #6d80a5;
  font-size: .78rem;
  font-weight: 650;
}
.ugp-controller-card__facts small.is-red {
  color: #da2c2c;
}
.ugp-controller-card__actions {
  display: grid;
  gap: 10px;
  align-self: start;
  padding-top: 2px;
}
.ugp-controller-card__actions a,
.ugp-controller-card__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #cfe0f7;
  border-radius: 8px;
  color: #0b63f6;
  background: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  text-decoration: none;
}
.ugp-controller-card__actions button {
  color: #1e3b65;
}
.ugp-controller-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #cdebd9;
  border-top: 0;
  border-right: 0;
  border-radius: 0 14px 0 12px;
  color: #11824b;
  background: #e8f8ef;
  font-size: .8rem;
  font-weight: 900;
}
.ugp-controller-ribbon.is-warn {
  border-color: #ffdfaa;
  color: #b76d00;
  background: #fff3dc;
}
.ugp-connection-bottom {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
}
.ugp-connection-panel {
  padding: 22px 24px;
}
.ugp-connection-panel h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: #071f4e;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0;
}
.ugp-connection-panel h3 svg {
  color: #0b63f6;
}
.ugp-sync-list {
  display: grid;
  border: 1px solid #e2eaf5;
  border-radius: 10px;
  overflow: hidden;
}
.ugp-sync-list div {
  display: grid;
  grid-template-columns: 24px minmax(100px, 1fr) minmax(120px, 1fr) minmax(140px, auto) minmax(70px, auto);
  gap: 14px;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid #e2eaf5;
}
.ugp-sync-list div:last-child {
  border-bottom: 0;
}
.ugp-sync-list mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
}
.ugp-sync-list mark.is-good { color: #11824b; }
.ugp-sync-list mark.is-warn { color: #d48600; }
.ugp-sync-list strong,
.ugp-sync-list span,
.ugp-sync-list time,
.ugp-sync-list em {
  color: #092b66;
  font-size: .8rem;
  font-weight: 800;
  font-style: normal;
}
.ugp-sync-list span,
.ugp-sync-list time,
.ugp-sync-list em {
  color: #6a7fa5;
  font-weight: 650;
}
.ugp-connection-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: #0b63f6;
  font-size: .86rem;
  font-weight: 900;
  text-decoration: none;
}
.ugp-health-content {
  display: grid;
  grid-template-columns: 150px minmax(190px, 1fr) minmax(220px, .9fr);
  gap: 26px;
  align-items: center;
}
.ugp-health-donut {
  display: grid;
  place-items: center;
  align-content: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 52%, transparent 53%),
    conic-gradient(#28aa62 calc(var(--health) * 1%), #e8eef6 0);
}
.ugp-health-donut strong {
  color: #092b66;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
}
.ugp-health-donut small {
  color: #6a7fa5;
  font-size: .78rem;
  font-weight: 750;
}
.ugp-health-content dl {
  display: grid;
  gap: 15px;
  margin: 0;
}
.ugp-health-content dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 50px;
  gap: 14px;
  align-items: center;
}
.ugp-health-content dt,
.ugp-health-content dd {
  margin: 0;
  color: #092b66;
  font-size: .86rem;
  font-weight: 800;
}
.ugp-health-content dt {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ugp-health-content dt i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.ugp-health-content dt i.is-good { background: #28aa62; }
.ugp-health-content dt i.is-warn { background: #f39a00; }
.ugp-health-content dt i.is-red { background: #f02e38; }
.ugp-health-content dd {
  display: contents;
}
.ugp-health-content dd span {
  color: #5e739b;
  font-weight: 650;
}
.ugp-health-content aside {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: center;
  min-height: 104px;
  padding: 18px;
  border: 1px solid #cbe9d7;
  border-radius: 10px;
  background: #f1fbf5;
}
.ugp-health-content aside svg {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  color: #17a35f;
}
.ugp-health-content aside strong {
  color: #11824b;
  font-size: .96rem;
  font-weight: 900;
}
.ugp-health-content aside p {
  margin: 0;
  color: #435b85;
  font-size: .86rem;
  line-height: 1.4;
  font-weight: 650;
}
.ugp-connection-empty {
  padding: 24px;
}
.ugp-connection-empty strong,
.ugp-connection-empty span {
  display: block;
  margin-bottom: 10px;
}
@media (max-width: 980px) {
  .ugp-connection-kpis,
  .ugp-controller-card,
  .ugp-connection-bottom,
  .ugp-health-content {
    grid-template-columns: 1fr;
  }
  .ugp-connection-kpis article {
    border-right: 0;
    border-bottom: 1px solid #d8e5f7;
    padding: 12px 0;
  }
  .ugp-controller-card__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .ugp-connection-top,
  .ugp-connection-actions,
  .ugp-connection-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .ugp-connection-map {
    opacity: .28;
    width: 100%;
  }
  .ugp-controller-card__facts,
  .ugp-sync-list div,
  .ugp-health-content dl div {
    grid-template-columns: 1fr;
  }
  .ugp-controller-card__facts div {
    border-left: 0;
    border-top: 1px solid #e4ecf7;
    padding: 12px 0 0;
  }
}

/* VLAN ops page */
.ugp-vlan-ops {
  max-width: none;
}

.ugp-vlan-ops__top {
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 12px;
}

.ugp-vlan-ops .ugp-profile-switcher {
  margin-top: 10px;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
}

.ugp-vlan-ops .ugp-clients-ops__actions {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 8px;
}

.ugp-vlan-ops .ugp-hero__eyebrow {
  color: #8192bd;
  letter-spacing: .2em;
}

.ugp-vlan-ops .ugp-hero__title {
  margin-top: 4px;
  font-size: clamp(2.15rem, 3.1vw, 3.1rem);
  line-height: .95;
}

.ugp-vlan-hero {
  min-height: 148px;
  margin: 12px 0 14px;
  display: flex;
  align-items: center;
  border: 1px solid #c9dcfb;
  border-radius: 14px;
  padding: 28px 34px;
  background:
    linear-gradient(90deg, rgba(239,247,255,.96) 0%, rgba(239,247,255,.78) 33%, rgba(239,247,255,.16) 58%, rgba(239,247,255,0) 100%),
    url('../images/vlan-hero-banner.webp') no-repeat center center / cover;
  box-shadow: 0 18px 44px rgba(23, 72, 142, .07);
  overflow: hidden;
}

.ugp-vlan-hero__copy {
  max-width: 560px;
}

.ugp-vlan-hero h2 {
  margin: 0 0 8px;
  color: #092b66;
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  font-weight: 850;
  line-height: 1.08;
}

.ugp-vlan-hero p {
  margin: 0;
  color: #33517d;
  font-weight: 700;
}

.ugp-vlan-hero p span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 999px;
  background: #19c3bd;
}

.ugp-vlan-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.ugp-vlan-kpi {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 108px;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  border: 1px solid #dfe8f7;
  border-radius: 14px;
  padding: 14px 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16,43,84,.045);
  min-width: 0;
}

.ugp-vlan-kpi > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eef5ff;
  color: #276dff;
}

.ugp-vlan-kpi--teal > span { background: #e6fbf7; color: #16b8ad; }
.ugp-vlan-kpi--purple > span { background: #f0ebff; color: #8a64df; }
.ugp-vlan-kpi--green > span { background: #eefbe8; color: #62bd38; }

.ugp-vlan-kpi svg {
  width: 25px;
  height: 25px;
  display: block;
  overflow: visible;
}

.ugp-vlan-kpi svg path,
.ugp-vlan-kpi svg rect,
.ugp-vlan-kpi svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ugp-vlan-kpi p {
  margin: 0 0 4px;
  color: #667ca7;
  font-weight: 800;
  font-size: .82rem;
}

.ugp-vlan-kpi strong {
  display: block;
  color: #092b66;
  font-size: 1.45rem;
  line-height: 1;
}

.ugp-vlan-kpi em {
  display: block;
  margin-top: 6px;
  color: #5b6f99;
  font-style: normal;
  font-size: .82rem;
}

.ugp-vlan-spark {
  height: 34px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, transparent 0 18%, currentColor 19% 21%, transparent 22% 36%, currentColor 37% 39%, transparent 40% 56%, currentColor 57% 59%, transparent 60% 74%, currentColor 75% 77%, transparent 78%),
    linear-gradient(180deg, transparent, transparent);
  color: #276dff;
  opacity: .9;
}

.ugp-vlan-kpi--teal .ugp-vlan-spark { color: #16b8ad; }
.ugp-vlan-kpi--purple .ugp-vlan-spark { color: #8a64df; }

.ugp-vlan-ok {
  width: 24px;
  height: 24px;
  justify-self: end;
  border: 2px solid #65c844;
  border-radius: 999px;
  position: relative;
}

.ugp-vlan-ok:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #65c844;
  border-bottom: 2px solid #65c844;
  transform: rotate(-45deg);
}

.ugp-vlan-table-card {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
}

.ugp-table-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid #e7eff8;
  background: #fff;
  color: #5f75a3;
  font-size: .84rem;
  font-weight: 750;
}

.ugp-table-pager[hidden] {
  display: none;
}

.ugp-table-pager > div {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ugp-table-pager button {
  min-width: 34px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid #d7e2f2;
  border-radius: 10px;
  background: #f7faff;
  color: #17315f;
  font: inherit;
  cursor: pointer;
}

.ugp-table-pager button[aria-current="page"] {
  border-color: #276dff;
  background: #276dff;
  color: #fff;
}

.ugp-table-pager button:disabled {
  cursor: default;
  opacity: .45;
}

.ugp-vlan-table {
  min-width: 1120px;
}

.ugp-vlan-table th {
  color: #8192b8;
  font-size: .77rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ugp-vlan-table td,
.ugp-vlan-table th {
  padding: 11px 14px;
  vertical-align: middle;
}

.ugp-vlan-table td strong {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #092b66;
  font-weight: 850;
}

.ugp-vlan-table td small {
  display: block;
  margin-top: 3px;
  padding-left: 20px;
  color: #5f75a3;
  font-size: .74rem;
}

.ugp-vlan-pill,
.ugp-vlan-sync {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 5px 10px;
  border: 1px solid #d2e2fb;
  border-radius: 7px;
  background: #eef5ff;
  color: #276dff;
  font-weight: 850;
  font-size: .76rem;
}

.ugp-vlan-sync {
  border-radius: 8px;
  color: #31517f;
}

.ugp-vlan-check {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid #2dbb63;
  border-radius: 999px;
  vertical-align: -2px;
}

.ugp-vlan-insights {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr 1.15fr;
  gap: 14px;
}

.ugp-vlan-insight {
  min-height: 188px;
  padding: 18px 20px;
  border: 1px solid #dfe8f7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16,43,84,.045);
  min-width: 0;
}

.ugp-vlan-insight h3 {
  margin: 0 0 16px;
  color: #092b66;
  font-size: 1.02rem;
}

.ugp-vlan-purpose {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
}

.ugp-vlan-purpose h3 {
  grid-column: 1 / -1;
}

.ugp-vlan-donut {
  width: 116px;
  height: 116px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(circle at center, #fff 0 50%, transparent 51%),
    conic-gradient(#276dff 0 calc(var(--gateway) * 1%), #16b8ad calc(var(--gateway) * 1%) calc((var(--gateway) + var(--segment)) * 1%), #8a64df 0);
}

.ugp-vlan-donut strong {
  color: #092b66;
  font-size: 1.45rem;
}

.ugp-vlan-donut small {
  color: #647aa4;
  font-weight: 700;
}

.ugp-vlan-purpose ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ugp-vlan-purpose li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0;
  color: #33517d;
}

.ugp-vlan-purpose li span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #276dff;
}

.ugp-vlan-purpose li:nth-child(2) span { background: #16b8ad; }
.ugp-vlan-purpose li:nth-child(3) span { background: #8a64df; }
.ugp-vlan-purpose li strong {
  margin-left: auto;
  color: #092b66;
}

.ugp-vlan-bars {
  display: grid;
  gap: 14px;
}

.ugp-vlan-bars div {
  display: grid;
  grid-template-columns: 96px minmax(90px, 1fr) 68px;
  gap: 12px;
  align-items: center;
  color: #33517d;
  font-weight: 700;
  min-width: 0;
}

.ugp-vlan-bars label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ugp-vlan-bars span {
  height: 7px;
  border-radius: 999px;
  background: #e7effd;
  overflow: hidden;
}

.ugp-vlan-bars i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #276dff;
}

.ugp-vlan-bars div:nth-child(2) i { background: #16b8ad; }
.ugp-vlan-bars div:nth-child(3) i { background: #8a64df; }
.ugp-vlan-bars div:nth-child(4) i { background: #69b93f; }
.ugp-vlan-bars strong {
  color: #33517d;
  text-align: right;
  font-size: .82rem;
}

.ugp-vlan-recent header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.ugp-vlan-recent header h3 {
  margin: 0;
}

.ugp-vlan-recent header a {
  color: #276dff;
  font-weight: 850;
  text-decoration: none;
  font-size: .84rem;
}

.ugp-vlan-recent div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 9px 0;
  border-top: 1px solid #edf2fb;
}

.ugp-vlan-recent div:first-of-type {
  border-top: 0;
}

.ugp-vlan-recent strong {
  color: #092b66;
}

.ugp-vlan-recent span {
  justify-self: end;
  padding: 4px 9px;
  border-radius: 7px;
  background: #e9fbf3;
  color: #14945a;
  font-weight: 850;
  font-size: .75rem;
}

.ugp-vlan-recent em {
  color: #5f75a3;
  font-style: normal;
  font-size: .82rem;
}

body.option-com_unifiguestportal.view-vlanprofiles .gx-surface-redesign .ugp-profile-switcher {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

body.option-com_unifiguestportal.view-vlanprofiles .gx-surface-redesign .ugp-vlan-table-card {
  padding: 0;
}

@media (max-width: 1180px) {
  .ugp-ssid-kpis,
  .ugp-ssid-insights,
  .ugp-vlan-kpis,
  .ugp-vlan-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ugp-vlan-kpi {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .ugp-vlan-spark,
  .ugp-vlan-ok {
    display: none;
  }
}

@media (max-width: 720px) {
  .ugp-ssid-kpis,
  .ugp-ssid-insights,
  .ugp-vlan-kpis,
  .ugp-vlan-insights,
  .ugp-vlan-purpose {
    grid-template-columns: 1fr;
  }
  .ugp-ssid-hero {
    padding: 24px;
  }
  .ugp-vlan-hero {
    min-height: 148px;
    padding: 24px;
  }
}

/* Keep the four live inventory list heroes visually aligned. */
.ugp-ap-hero,
.ugp-clients-hero,
.ugp-ssid-hero,
.ugp-vlan-hero {
  min-height: 160px !important;
}

@media (max-width: 720px) {
  .ugp-ap-hero,
  .ugp-clients-hero,
  .ugp-ssid-hero,
  .ugp-vlan-hero {
    min-height: 160px !important;
  }
}


/* SSID create modal */
html.ugp-modal-lock,
html.ugp-modal-lock body {
  overflow: hidden;
}

.ugp-ssid-modal {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: none;
  place-items: center;
  padding: 24px;
}

.ugp-ssid-modal.is-open {
  display: grid;
}

.ugp-ssid-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 23, 55, .52);
  backdrop-filter: blur(10px);
}

.ugp-ssid-modal__dialog {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(190, 211, 245, .95);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(39,109,255,.14), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 30px 90px rgba(5, 25, 62, .28);
}

.ugp-ssid-modal__head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 42px;
  gap: 16px;
  align-items: center;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #e3ecfa;
}

.ugp-ssid-modal__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #0b63f6;
  background: linear-gradient(135deg, #e6f0ff, #f4f8ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 30px rgba(39,109,255,.12);
  font-size: 1.35rem;
}

.ugp-ssid-modal__head p {
  margin: 0 0 5px;
  color: #276dff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ugp-ssid-modal__head h2 {
  margin: 0;
  color: #071f4e;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.05;
  font-weight: 900;
}

.ugp-ssid-modal__close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #d7e4f7;
  border-radius: 14px;
  color: #51698f;
  background: #fff;
  cursor: pointer;
}

.ugp-ssid-modal__close:hover {
  color: #0b63f6;
  border-color: #b9cff4;
}

.ugp-ssid-modal__form {
  padding: 24px 26px 26px;
}

.ugp-ssid-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ugp-ssid-modal__field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ugp-ssid-modal__field--wide {
  grid-column: 1 / -1;
}

.ugp-ssid-modal__field span {
  color: #405b85;
  font-size: .82rem;
  font-weight: 850;
}

.ugp-ssid-modal__field input,
.ugp-ssid-modal__field select,
.ugp-ssid-modal__field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d4e1f4;
  border-radius: 14px;
  padding: 0 14px;
  color: #092b66;
  background: #fff;
  font: inherit;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.ugp-ssid-modal__field textarea {
  min-height: 108px;
  padding-top: 12px;
  resize: vertical;
}

.ugp-ssid-modal__field input:focus,
.ugp-ssid-modal__field select:focus,
.ugp-ssid-modal__field textarea:focus {
  outline: none;
  border-color: #4e8cff;
  box-shadow: 0 0 0 4px rgba(39,109,255,.12);
}

.ugp-ssid-modal__notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid #cfe0f7;
  border-radius: 16px;
  color: #33517d;
  background: #f1f7ff;
  font-size: .86rem;
  font-weight: 700;
}

.ugp-ssid-modal__notice i {
  margin-top: 2px;
  color: #0b63f6;
}

.ugp-ssid-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e3ecfa;
}

@media (max-width: 720px) {
  .ugp-ssid-modal {
    padding: 12px;
  }

  .ugp-ssid-modal__head {
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    padding: 18px;
  }

  .ugp-ssid-modal__icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .ugp-ssid-modal__form {
    padding: 18px;
  }

  .ugp-ssid-modal__grid {
    grid-template-columns: 1fr;
  }

  .ugp-ssid-modal__foot {
    flex-direction: column-reverse;
  }

  .ugp-ssid-modal__foot .ugp-button {
    width: 100%;
    justify-content: center;
  }
}


.ugp-ssid-vlan-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ugp-ssid-vlan-input button {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #b9cff4;
  border-radius: 14px;
  color: #0b63f6;
  background: #eef5ff;
  font: inherit;
  font-size: .84rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.ugp-ssid-vlan-input button:hover {
  border-color: #7ba8f8;
  background: #e3efff;
}

.ugp-ssid-vlan-field small {
  display: block;
  color: #60769d;
  font-size: .76rem;
  line-height: 1.35;
  font-weight: 700;
}

.ugp-ssid-vlan-field small strong {
  color: #092b66;
}

@media (max-width: 520px) {
  .ugp-ssid-vlan-input {
    grid-template-columns: 1fr;
  }

  .ugp-ssid-vlan-input button {
    width: 100%;
    justify-content: center;
  }
}


.ugp-ssid-vlan-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ugp-ssid-vlan-choice label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #d4e1f4;
  border-radius: 14px;
  background: #fff;
  color: #405b85;
  cursor: pointer;
}

.ugp-ssid-vlan-choice input {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: #0b63f6;
  box-shadow: none;
}

.ugp-ssid-vlan-choice strong {
  color: #092b66;
  font-size: .84rem;
  font-weight: 900;
}

.ugp-ssid-vlan-existing,
.ugp-ssid-vlan-new {
  margin-top: 8px;
}

.ugp-ssid-vlan-new {
  display: grid;
  grid-template-columns: minmax(110px, .45fr) minmax(0, 1fr);
  gap: 8px;
}

.ugp-ssid-vlan-existing[hidden],
.ugp-ssid-vlan-new[hidden] {
  display: none !important;
}

.ugp-ssid-vlan-input {
  display: block;
}

.ugp-ssid-vlan-input button {
  display: none;
}

@media (max-width: 620px) {
  .ugp-ssid-vlan-choice,
  .ugp-ssid-vlan-new {
    grid-template-columns: 1fr;
  }
}


.ugp-ssid-create-result {
  margin-top: 18px;
  border: 1px solid #cfe0f7;
  border-radius: 18px;
  background: #f8fbff;
  overflow: hidden;
}

.ugp-ssid-create-result[hidden] {
  display: none !important;
}

.ugp-ssid-create-result__summary {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 16px;
  border-left: 5px solid #2f9e44;
}

.ugp-ssid-create-result.is-warning .ugp-ssid-create-result__summary {
  border-left-color: #f08c00;
}

.ugp-ssid-create-result.is-error .ugp-ssid-create-result__summary {
  border-left-color: #e03131;
}

.ugp-ssid-create-result__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;
  background: #e6f6ea;
  color: #2f9e44;
}

.ugp-ssid-create-result.is-warning .ugp-ssid-create-result__icon {
  background: #fff4e6;
  color: #f08c00;
}

.ugp-ssid-create-result.is-error .ugp-ssid-create-result__icon {
  background: #fff0f0;
  color: #e03131;
}

.ugp-ssid-create-result__summary strong {
  display: block;
  color: #13213c;
  font-size: .96rem;
  margin-bottom: 3px;
}

.ugp-ssid-create-result__summary p {
  margin: 0;
  color: #52617a;
  font-size: .86rem;
  line-height: 1.45;
}

.ugp-ssid-json-response {
  border-top: 1px solid #dbe7f8;
  background: #071f4e;
  color: #eaf2ff;
}

.ugp-ssid-json-response summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  list-style: none;
}

.ugp-ssid-json-response summary::-webkit-details-marker {
  display: none;
}

.ugp-ssid-json-response summary span {
  color: #fff;
  font-size: .86rem;
  font-weight: 800;
}

.ugp-ssid-json-response summary span::before {
  content: "Show ";
}

.ugp-ssid-json-response[open] summary span::before {
  content: "Hide ";
}

.ugp-ssid-json-response summary button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  color: #dceaff;
  background: rgba(255,255,255,.08);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.ugp-ssid-json-response pre {
  max-height: 340px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  color: #dceaff;
  background: transparent;
  font-size: .78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  border-top: 1px solid rgba(255,255,255,.12);
}

.ugp-ssid-json-response code {
  color: inherit;
  background: transparent;
}


.ugp-inline-status {
  margin: 10px 0 16px;
  padding: 10px 14px;
  border: 1px solid #d7e4f7;
  border-radius: 14px;
  background: #f7fbff;
  color: #42526e;
  font-size: .88rem;
  font-weight: 700;
}

.ugp-inline-status[hidden] {
  display: none !important;
}

.ugp-inline-status.is-info {
  border-color: #cfe0f7;
  background: #f7fbff;
  color: #315176;
}

.ugp-inline-status.is-success {
  border-color: #ccebd7;
  background: #f3fbf6;
  color: #256b3a;
}

.ugp-inline-status.is-warning {
  border-color: #ffe3b3;
  background: #fff8ec;
  color: #8a5a00;
}

.ugp-inline-status.is-error {
  border-color: #ffd1d1;
  background: #fff5f5;
  color: #9b1c1c;
}

.ugp-button.is-loading {
  opacity: .82;
  pointer-events: none;
}

.ugp-button.is-loading .fa-rotate {
  animation: ugpSpin 1s linear infinite;
}

@keyframes ugpSpin {
  to { transform: rotate(360deg); }
}


.ugp-row-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ugp-inline-form {
  display: inline;
  margin: 0;
}

.ugp-button--danger {
  border-color: #ffd1d1 !important;
  background: #fff5f5 !important;
  color: #b42318 !important;
}

.ugp-button--danger:hover {
  border-color: #f5a3a3 !important;
  background: #ffecec !important;
  color: #8f1710 !important;
}


.ugp-guest-vlan-summary {
  display: grid;
  gap: 4px;
  margin: 14px 0;
  padding: 13px 15px;
  border: 1px solid #cfe0f7;
  border-radius: 15px;
  background: #f7fbff;
}

.ugp-guest-vlan-summary strong {
  color: #14213d;
  font-size: .9rem;
}

.ugp-guest-vlan-summary span {
  color: #52617a;
  font-size: .84rem;
  font-weight: 700;
}

.ugp-override-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: #52617a;
  font-size: .84rem;
  font-weight: 800;
}

.ugp-override-toggle input {
  width: 16px;
  height: 16px;
}

.ugp-ssid-modal__field input.is-locked {
  background: #f6f8fb;
  color: #44546f;
}


/* Guestrax VLAN create modal polish */
.ugp-vlan-modal__dialog {
  width: min(920px, calc(100vw - 42px));
  max-height: calc(100vh - 42px);
  overflow: hidden;
  border-radius: 22px;
}

.ugp-vlan-modal__form {
  max-height: calc(100vh - 42px);
  overflow-y: auto;
  padding: 24px 26px 22px;
}

.ugp-vlan-modal__form .ugp-ssid-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #dbe7f8;
}

.ugp-vlan-modal__form .ugp-ssid-modal__head span {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin-bottom: 6px;
  color: #2f6df6;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.ugp-vlan-modal__form .ugp-ssid-modal__head h2 {
  margin: 0;
  color: #102650;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.ugp-vlan-modal__form .ugp-ssid-modal__head p {
  max-width: 620px;
  margin: 8px 0 0;
  color: #52617a;
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}

.ugp-vlan-modal__form .ugp-ssid-modal__head button {
  flex: 0 0 auto;
}

.ugp-vlan-modal__form .ugp-guest-vlan-summary {
  margin: 0 0 16px;
  padding: 13px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
}

.ugp-vlan-modal__form .ugp-override-toggle {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #dbe7f8;
  border-radius: 13px;
  background: #fbfdff;
}

.ugp-vlan-modal__form .ugp-ssid-modal__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 16px;
}

.ugp-vlan-modal__form .ugp-ssid-modal__field {
  grid-column: span 6;
  min-width: 0;
}

.ugp-vlan-modal__form .ugp-ssid-modal__field--wide {
  grid-column: 1 / -1;
}

.ugp-vlan-modal__form .ugp-ssid-modal__field span {
  margin-bottom: 7px;
  color: #405176;
  font-size: .82rem;
  font-weight: 850;
}

.ugp-vlan-modal__form .ugp-ssid-modal__field input {
  min-height: 46px;
  padding: 0 15px;
  border-radius: 14px;
  font-size: .95rem;
}

.ugp-vlan-modal__form .ugp-vlan-fixed-field,
.ugp-vlan-modal__form .ugp-ssid-modal__field input[readonly] {
  background: #f7f9fc;
  color: #405176;
  box-shadow: none;
}

.ugp-vlan-modal__form .ugp-ssid-modal__notice {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
}

.ugp-vlan-modal__form .ugp-ssid-create-result {
  margin-top: 16px;
}

.ugp-vlan-modal__form .ugp-ssid-modal__foot {
  position: sticky;
  bottom: -22px;
  z-index: 5;
  margin: 18px -26px -22px;
  padding: 14px 26px 18px;
  border-top: 1px solid #dbe7f8;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}

@media (max-width: 760px) {
  .ugp-vlan-modal__dialog {
    width: min(96vw, 640px);
    max-height: calc(100vh - 24px);
  }

  .ugp-vlan-modal__form {
    max-height: calc(100vh - 24px);
    padding: 20px 18px 18px;
  }

  .ugp-vlan-modal__form .ugp-ssid-modal__field {
    grid-column: 1 / -1;
  }

  .ugp-vlan-modal__form .ugp-ssid-modal__foot {
    margin: 16px -18px -18px;
    padding: 13px 18px 16px;
  }
}


@media (max-width: 980px) {
  .ugp-controller-card.has-controller-image {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px;
  }
  .ugp-controller-card.has-controller-image .ugp-controller-card__identity {
    align-items: center;
  }
  .ugp-controller-card.has-controller-image .ugp-controller-card__identity > div {
    padding: 0;
  }
  .ugp-controller-card.has-controller-image .ugp-controller-card__identity mark.ugp-controller-card__image {
    flex-basis: 86px;
    width: 86px;
    height: 86px;
    min-height: 86px;
    border-radius: 20px;
  }
}


/* v422 connection controller row balance */
.ugp-controller-card.has-controller-image {
  grid-template-columns: minmax(340px, .72fr) minmax(780px, 1.9fr) 190px;
  gap: 18px;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__identity {
  gap: 18px;
  min-width: 0;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__identity > div {
  min-width: 0;
}
.ugp-controller-card__identity h3,
.ugp-controller-card__identity p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ugp-controller-card__facts {
  grid-template-columns: minmax(120px, .85fr) minmax(160px, 1fr) minmax(130px, .9fr) minmax(142px, .95fr) minmax(70px, .45fr);
  min-width: 0;
}
.ugp-controller-card__facts div {
  min-width: 0;
  padding: 0 14px;
}
.ugp-controller-card__facts dt,
.ugp-controller-card__facts dd,
.ugp-controller-card__facts small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ugp-controller-card__facts dd span {
  max-width: 100%;
  white-space: nowrap;
}
.ugp-controller-card__actions {
  width: 190px;
}
.ugp-controller-card__actions a,
.ugp-controller-card__actions button {
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .ugp-controller-card.has-controller-image {
    grid-template-columns: minmax(300px, .85fr) minmax(0, 1.5fr) 170px;
  }
}
@media (max-width: 980px) {
  .ugp-controller-card.has-controller-image {
    grid-template-columns: 1fr;
  }
  .ugp-controller-card__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ugp-controller-card__actions {
    width: auto;
  }
}

/* v423 connection action stack spacing */
.ugp-controller-card.has-controller-image .ugp-controller-ribbon {
  right: 22px;
  z-index: 3;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__actions {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 190px;
  box-sizing: border-box;
  padding-top: 44px;
  padding-bottom: 16px;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__actions a,
.ugp-controller-card.has-controller-image .ugp-controller-card__actions button {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 980px) {
  .ugp-controller-card.has-controller-image .ugp-controller-ribbon {
    right: 0;
  }
  .ugp-controller-card.has-controller-image .ugp-controller-card__actions {
    width: auto;
    padding-top: 40px;
    padding-bottom: 0;
  }
}


/* Access Points light hero banner to match SSID profile styling 1.0.0.5.2.438 */
.ugp-ap-hero {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  min-height: 148px !important;
  margin: 12px 0 14px !important;
  padding: 34px 36px !important;
  border: 1px solid #c9dcfb !important;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, rgba(239,247,255,.92) 0%, rgba(239,247,255,.76) 34%, rgba(239,247,255,.16) 58%, rgba(239,247,255,0) 100%),
    url('../images/ap-hero-banner.webp') no-repeat center center / cover !important;
  box-shadow: 0 20px 50px rgba(23, 72, 142, .08) !important;
  color: #092b66 !important;
}

.ugp-ap-hero::before,
.ugp-ap-hero::after {
  content: none !important;
  display: none !important;
}

.ugp-ap-hero__icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(244,249,255,.94) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 16px 34px rgba(31,88,175,.14);
  color: #276dff;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.ugp-ap-hero__icon::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 50%, rgba(76,147,255,.18) 0%, rgba(76,147,255,0) 72%);
}

.ugp-ap-hero__icon-backdrop {
  position: absolute;
  font-size: 3.2rem;
  color: rgba(39, 109, 255, .12);
  transform: translateY(-1px);
}

.ugp-ap-hero__icon-main {
  --fa-primary-color: #276dff;
  --fa-secondary-color: #68caff;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: .34;
  --fa-display: inline-block;
  display: inline-block !important;
  position: relative !important;
  z-index: 2;
  width: 1.25em;
  height: 1em;
  font-size: 2.35rem;
  line-height: 1;
  color: #276dff;
  filter: drop-shadow(0 8px 14px rgba(39,109,255,.18));
  text-align: center;
}

.ugp-ap-hero__icon-main::before,
.ugp-ap-hero__icon-main::after {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 1em !important;
  line-height: 1 !important;
  text-align: center !important;
  margin: 0 !important;
}

.ugp-ap-hero__icon-main::before {
  color: var(--fa-primary-color) !important;
  opacity: var(--fa-primary-opacity) !important;
}

.ugp-ap-hero__icon-main::after {
  color: var(--fa-secondary-color) !important;
  opacity: var(--fa-secondary-opacity) !important;
}

.ugp-ap-hero__copy {
  max-width: 680px !important;
}

.ugp-ap-hero h2 {
  color: #092b66 !important;
  font-size: clamp(1.45rem, 2vw, 1.95rem) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
}

.ugp-ap-hero p {
  color: #173a6d !important;
  font-weight: 800 !important;
}

.ugp-ap-hero small {
  margin-top: 14px !important;
  color: #5570a0 !important;
  font-weight: 650 !important;
}

@media (max-width: 700px) {
  .ugp-ap-hero {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 26px !important;
  }
}


/* Connection page Font Awesome Pro icon polish 1.0.0.5.2.453 */
.ugp-connection-ops .ugp-fa-icon {
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  min-width: 1.1em;
  line-height: 1;
}

.ugp-connection-actions .ugp-fa-icon,
.ugp-connection-tools .ugp-fa-icon,
.ugp-controller-card__actions .ugp-fa-icon,
.ugp-controller-ribbon .ugp-fa-icon,
.ugp-controller-card__identity p .ugp-fa-icon,
.ugp-controller-card__facts .ugp-fa-icon,
.ugp-sync-list .ugp-fa-icon,
.ugp-connection-panel h3 .ugp-fa-icon,
.ugp-health-content aside .ugp-fa-icon {
  font-size: 1rem;
}

.ugp-connection-kpis mark .ugp-fa-icon {
  font-size: 1.35rem;
}

.ugp-controller-card__identity mark:not(.ugp-controller-card__image) .ugp-fa-icon {
  font-size: 1.2rem;
}

.ugp-controller-card__facts dd > span .ugp-fa-icon,
.ugp-controller-ribbon .ugp-fa-icon {
  margin-right: 7px;
}

.ugp-controller-card__facts dd a .ugp-fa-icon {
  width: 1em;
  min-width: 1em;
  font-size: .9rem;
}

.ugp-connection-panel h3 .ugp-fa-icon {
  color: #0b63f6;
}

.ugp-health-content aside > .ugp-fa-icon {
  color: #15985c;
  font-size: 1.55rem;
}


/* Connections copy and Font Awesome icon polish 1.0.0.5.2.454 */
.ugp-connection-top h1 { letter-spacing: -0.045em; }
.ugp-connection-top p { max-width: 820px; color: #36547f !important; }
.ugp-connection-hero mark .ugp-fa-icon,
.ugp-controller-ribbon .ugp-fa-icon,
.ugp-controller-card mark .ugp-fa-icon,
.ugp-connection-tools .ugp-fa-icon,
.ugp-connection-actions .ugp-fa-icon {
}
.ugp-connection-hero .is-green .ugp-fa-icon,
.ugp-controller-ribbon.is-good .ugp-fa-icon {
}
.ugp-connection-hero .is-amber .ugp-fa-icon {
}
.ugp-connection-hero .is-purple .ugp-fa-icon {
}

/* Connection health panel and refresh spinner fix 1.0.0.5.2.456 */
.ugp-health-content aside {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
}

.ugp-health-content aside .ugp-health-aside__svg {
  grid-row: 1 / span 2 !important;
  width: 42px !important;
  height: 42px !important;
  color: #17a35f !important;
  align-self: center !important;
}

.ugp-health-content aside strong,
.ugp-health-content aside p {
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.ugp-connection-actions [data-ugp-post-task="portal.syncConnectionInventory"].is-syncing .ugp-fa-icon,
.ugp-connection-actions [data-ugp-post-task="portal.syncConnectionInventory"]:disabled .ugp-fa-icon {
  animation: ugp-fa-spin 850ms linear infinite;
  transform-origin: 50% 50%;
}

.ugp-connection-actions [data-ugp-post-task="portal.syncConnectionInventory"].is-syncing {
  pointer-events: none;
  opacity: .82;
}

@keyframes ugp-fa-spin {
  to { transform: rotate(360deg); }
}


/* Connection controller rows: use model in identity and remove duplicated type column 1.0.0.5.2.457 */
.ugp-controller-card.has-controller-image {
  grid-template-columns: minmax(340px, .82fr) minmax(640px, 1.72fr) 190px !important;
}

.ugp-controller-card__facts--compact,
.ugp-controller-card__facts {
  grid-template-columns: minmax(160px, 1fr) minmax(140px, .8fr) minmax(150px, .9fr) minmax(70px, .42fr) !important;
}

.ugp-controller-card__identity p[title^="UniFi site ref"] {
  color: #536f9f !important;
  font-weight: 850 !important;
}

.ugp-controller-card__identity p[title^="UniFi site ref"] .ugp-fa-icon {
  color: #5272a8 !important;
}

@media (max-width: 1280px) {
  .ugp-controller-card.has-controller-image {
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.45fr) 170px !important;
  }
}

@media (max-width: 980px) {
  .ugp-controller-card__facts--compact,
  .ugp-controller-card__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* Connection controller model product images 1.0.0.5.2.459 */
.ugp-controller-card__model-image {
  display: block;
  width: min(150px, 100%);
  max-height: 42px;
  object-fit: contain;
  object-position: left center;
  margin-top: 8px;
  filter: drop-shadow(0 10px 12px rgba(9, 43, 102, .10));
}

.ugp-controller-card.has-controller-image .ugp-controller-card__identity > div {
  align-self: center;
}

@media (max-width: 980px) {
  .ugp-controller-card__model-image {
    max-height: 36px;
  }
}


/* Connection model image replaces old grey placeholder 1.0.0.5.2.460 */
.ugp-controller-card__identity > div > span:empty {
  display: none !important;
}

.ugp-controller-card__model-image {
  width: min(180px, 100%) !important;
  max-height: 50px !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* Connection model image extra compact secondary thumbnail 1.0.0.5.2.462 */
.ugp-controller-card__model-image {
  width: min(132px, 100%) !important;
  max-height: 30px !important;
  margin-top: 4px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: drop-shadow(0 5px 7px rgba(9, 43, 102, .07)) !important;
}

@media (max-width: 980px) {
  .ugp-controller-card__model-image {
    width: min(118px, 100%) !important;
    max-height: 27px !important;
  }
}


/* SSID Font Awesome icon refresh 1.0.0.5.2.463 */
.ugp-ssid-hero__icon .ugp-ssid-hero__icon-main {
  font-size: 2.05rem;
  line-height: 1;
  color: currentColor;
}

.ugp-ssid-kpi > span i {
  font-size: 1.35rem;
  line-height: 1;
  color: currentColor;
}

.ugp-ssid-summary__row span i,
.ugp-ssid-insight span i,
.ugp-ssid-section-icon i,
.ugp-ssid-save__chevron i {
  width: 18px;
  min-width: 18px;
  text-align: center;
  line-height: 1;
}

.ugp-ssid-section-icon i {
  font-size: 1.15rem;
}

.ugp-ssid-insight span i {
  color: var(--ssid-blue);
  font-size: 1.05rem;
}


/* VLAN Font Awesome icon pass 1.0.0.5.2.464 */
.ugp-vlan-ops .ugp-button i,
.ugp-vlan-detail .ugp-button i,
.ugp-vlan-detail-card h2 i,
.ugp-vlan-side-card h3 i,
.ugp-vlan-actions-list i,
.ugp-vlan-facts dt i,
.ugp-vlan-node i {
  width: 1.05em;
  min-width: 1.05em;
  text-align: center;
  line-height: 1;
}

.ugp-vlan-hero {
  gap: 24px;
}

.ugp-vlan-hero__icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 14px 34px rgba(31,88,175,.12);
  color: #276dff;
  font-size: 1.9rem;
}

.ugp-vlan-kpi > span i {
  font-size: 1.35rem;
  line-height: 1;
}

.ugp-vlan-detail svg {
  display: none;
}

.ugp-vlan-detail i.fa-solid,
.ugp-vlan-detail i.fa-regular,
.ugp-vlan-detail i.fa-sharp,
.ugp-vlan-detail i.fa-sharp-solid {
  display: inline-grid;
  place-items: center;
}

@media (max-width: 720px) {
  .ugp-vlan-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Clients light banner tune 1.0.0.5.2.467
   Remove the dark blue overlay and use proportional cover sizing so the banner does not stretch. */
.ugp-clients-hero {
  color: #092b66 !important;
  background: url('../images/clients-hero-banner.webp') no-repeat center center / cover !important;
  border: 1px solid #c9dcfb !important;
  box-shadow: 0 20px 50px rgba(23, 72, 142, .08) !important;
}

.ugp-clients-hero::before,
.ugp-clients-hero::after {
  display: none !important;
  content: none !important;
}

.ugp-clients-hero h2 {
  color: #092b66 !important;
  text-shadow: none !important;
}

.ugp-clients-hero p {
  color: #173a6d !important;
  text-shadow: none !important;
}


/* Clients hero Font Awesome icon tile 1.0.0.5.2.468 */
.ugp-clients-hero {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}

.ugp-clients-hero__icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 16px 34px rgba(31,88,175,.12);
  color: #276dff;
  font-size: 2.05rem;
  position: relative;
  z-index: 2;
}

.ugp-clients-hero__icon::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 55%, rgba(83,161,255,.2) 0%, rgba(83,161,255,0) 72%);
}

.ugp-clients-hero__icon i {
  position: relative;
  z-index: 2;
}

.ugp-clients-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 660px;
}

@media (max-width: 700px) {
  .ugp-clients-hero {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}


/* Connection KPI polish 1.0.0.5.2.587: remove vertical divider lines */
.ugp-connection-kpis article,
.ugp-controller-card__facts div {
  border-left: 0 !important;
  border-right: 0 !important;
}


/* Dashboard saved portal preview fit 1.0.0.5.2.611 */
.ugp-workspace--dashboard .ugp-dash-portal-preview__overlay--iframe {
  margin: 0 !important;
  min-height: 470px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ugp-workspace--dashboard .ugp-dash-portal-preview__overlay--iframe .ugp-dash-portal-preview__iframe {
  transform: scale(.895) !important;
}

@media (max-height: 980px) {
  .ugp-workspace--dashboard .ugp-dash-portal-preview__overlay--iframe {
    min-height: 430px !important;
  }

  .ugp-workspace--dashboard .ugp-dash-portal-preview__overlay--iframe .ugp-dash-portal-preview__iframe {
    transform: scale(.885) !important;
  }
}


/* Dashboard progress shimmer 1.0.0.5.2.613 */
.ugp-workspace--dashboard .ugp-dash-progress__track span {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ugp-workspace--dashboard .ugp-dash-progress__track span::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.44) 48%, transparent 100%);
  transform: translateX(-140%);
  animation: ugpDashProgressShimmer 2.6s ease-in-out infinite;
}

@keyframes ugpDashProgressShimmer {
  0% { transform: translateX(-140%); }
  46% { transform: translateX(270%); }
  100% { transform: translateX(270%); }
}

@media (prefers-reduced-motion: reduce) {
  .ugp-workspace--dashboard .ugp-dash-progress__track span::after {
    animation: none;
  }
}

/* Portal creation wizard 1.0.0.5.2.614 */
.ugp-portal-wizard{display:grid;gap:22px;max-width:1460px}
.ugp-wizard__head,.ugp-wizard__finish{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.ugp-wizard__head h1,.ugp-wizard h2{margin:0;color:#0f2f68;letter-spacing:-.04em}
.ugp-wizard__head h1{font-size:clamp(36px,4vw,54px);line-height:.96}
.ugp-wizard__head p,.ugp-wizard p{margin:8px 0 0;color:#5570a5;font-size:17px;line-height:1.55}
.ugp-wizard{display:grid;gap:18px}
.ugp-wizard__intro{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:center;min-height:260px;padding:32px;overflow:hidden;background:radial-gradient(circle at 78% 10%,rgba(37,99,235,.2),transparent 34%),linear-gradient(135deg,#fff 0%,#f4f8ff 54%,#e8f2ff 100%)}
.ugp-wizard__intro-copy{max-width:780px}
.ugp-wizard__intro-copy h2{max-width:720px;font-size:clamp(30px,3.2vw,48px);line-height:1}
.ugp-wizard__preview-card{display:grid;place-items:center}
.ugp-wizard__phone{width:230px;min-height:330px;padding:28px 22px;display:grid;align-content:center;gap:18px;text-align:center;border:12px solid #e8eef9;border-radius:34px;background:#fff;box-shadow:0 28px 70px rgba(15,47,104,.18)}
.ugp-wizard__phone span{width:82px;height:82px;margin:0 auto;border-radius:24px;background:linear-gradient(135deg,#2563eb,#19c2d8)}
.ugp-wizard__phone strong{color:#0f2f68;font-size:26px;line-height:1}
.ugp-wizard__phone small{color:#5570a5}
.ugp-wizard__phone em{display:block;padding:13px 18px;border-radius:16px;background:#2563eb;color:#fff;font-style:normal;font-weight:800}
.ugp-wizard__section,.ugp-wizard__finish{padding:26px}
.ugp-wizard__section-title{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.ugp-wizard__section-title>span{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:15px;background:#eef4ff;color:#2563eb;font-weight:900}
.ugp-wizard__section-title h2{font-size:28px}
.ugp-wizard__choice-grid{display:grid;gap:14px}
.ugp-wizard__choice-grid--outcomes{grid-template-columns:repeat(4,minmax(0,1fr))}
.ugp-wizard__choice-grid--themes{grid-template-columns:repeat(3,minmax(0,1fr))}
.ugp-wizard__choice{position:relative;display:block;min-height:100%}
.ugp-wizard__choice input{position:absolute;opacity:0;pointer-events:none}
.ugp-wizard__choice-body{min-height:136px;padding:18px;border:1px solid #d8e2f0;border-radius:20px;background:#fff;color:#0f2f68;display:grid;gap:10px;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.ugp-wizard__choice-body i{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#eef4ff;color:#2563eb;font-size:18px}
.ugp-wizard__choice-body strong{font-size:18px}.ugp-wizard__choice-body small{color:#5570a5;line-height:1.45}
.ugp-wizard__choice input:checked+.ugp-wizard__choice-body,.ugp-wizard__choice input:checked+.ugp-wizard__theme-swatches+.ugp-wizard__choice-body{border-color:#2563eb;box-shadow:0 18px 45px rgba(37,99,235,.14)}
.ugp-wizard__choice:hover .ugp-wizard__choice-body{transform:translateY(-2px)}
.ugp-wizard__theme{padding:18px;border:1px solid #d8e2f0;border-radius:20px;background:#fff;display:grid;gap:10px}
.ugp-wizard__theme:has(input:checked){border-color:#2563eb;box-shadow:0 18px 45px rgba(37,99,235,.14)}
.ugp-wizard__theme .ugp-wizard__choice-body{min-height:0;padding:0;border:0;box-shadow:none}
.ugp-wizard__theme-swatches{display:flex;gap:7px}.ugp-wizard__theme-swatches i{width:24px;height:24px;border-radius:999px;border:1px solid rgba(15,47,104,.08)}
.ugp-wizard__fields{display:grid;gap:16px}.ugp-wizard__fields--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ugp-wizard__fields label{display:grid;gap:7px;color:#5570a5;font-weight:700}
.ugp-wizard__fields input,.ugp-wizard__fields textarea{width:100%;border:1px solid #d8e2f0;border-radius:16px;background:#fff;color:#0f2f68;font:inherit;font-weight:600;padding:14px 16px}
.ugp-wizard__fields textarea{resize:vertical}.ugp-wizard__fields small{color:#7285ad;font-weight:500}.ugp-wizard__full{grid-column:1/-1}
.ugp-wizard__toggles{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.ugp-wizard__toggles label{display:inline-flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid #d8e2f0;border-radius:999px;background:#f8fbff;color:#0f2f68;font-weight:800}
.ugp-wizard__toggles input{width:16px;height:16px;accent-color:#2563eb}
.ugp-wizard__finish{align-items:center;justify-content:flex-end}.ugp-wizard__submit{min-height:58px;padding-inline:26px;white-space:nowrap}
@media (max-width:1120px){.ugp-wizard__intro,.ugp-wizard__choice-grid--outcomes,.ugp-wizard__choice-grid--themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ugp-wizard__head,.ugp-wizard__finish{flex-direction:column;align-items:stretch}.ugp-wizard__intro,.ugp-wizard__choice-grid--outcomes,.ugp-wizard__choice-grid--themes,.ugp-wizard__fields--two{grid-template-columns:1fr}.ugp-wizard__preview-card{display:none}}

/* Help centre 1.0.0.5.2.635 */
.ugp-help{--help-navy:#092b61;--help-blue:#2f6de4;--help-muted:#5f75a0;--help-line:#d7e3f2;display:grid;gap:20px;color:var(--help-navy)}
.ugp-help-hero{height:210px;padding:34px 42px;border:1px solid #c2dcfb;border-radius:22px;background-color:#d8eaff;background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;align-items:center;gap:24px;box-sizing:border-box;overflow:hidden;box-shadow:inset 0 1px 0 #ffffff91,0 18px 38px #17345f0d}
.ugp-help-hero__icon{width:86px;height:86px;flex:0 0 auto;border-radius:22px;background:#fffdf2;color:#174a97;display:grid;place-items:center;font-size:34px;box-shadow:0 16px 34px #12366c20}
.ugp-help-hero .ugp-hero__eyebrow{display:block;color:#5672a2;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.2em;margin-bottom:7px}
.ugp-help-hero h1{margin:0;font-size:38px;line-height:1;color:#0b326f;letter-spacing:-.035em}
.ugp-help-hero p{margin:10px 0 0;max-width:680px;color:#244d83;font-size:16px;font-weight:800;line-height:1.42}
.ugp-help-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ugp-help-quick a{min-height:84px;padding:18px;border:1px solid var(--help-line);border-radius:18px;background:#fff;color:var(--help-navy);display:flex;align-items:center;gap:14px;text-decoration:none;font-weight:900;box-shadow:0 14px 30px rgba(23,52,95,.07)}
.ugp-help-quick i{width:46px;height:46px;border-radius:14px;background:#edf4ff;color:var(--help-blue);display:grid;place-items:center;font-size:18px}
.ugp-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ugp-help-card,.ugp-help-pages,.ugp-help-workflows,.ugp-help-manual,.ugp-help-article-index{border:1px solid var(--help-line);border-radius:20px;background:#fff;box-shadow:0 14px 30px rgba(23,52,95,.06)}
.ugp-help-workflows{overflow:hidden}
.ugp-help-section-head p{margin:8px 0 0;color:var(--help-muted);line-height:1.55}
.ugp-help-workflow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.ugp-help-workflow{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:24px;border-right:1px solid #e6eef8;border-bottom:1px solid #e6eef8}
.ugp-help-workflow__icon{width:48px;height:48px;border-radius:16px;background:#edf4ff;color:var(--help-blue);display:grid;place-items:center;font-size:18px}
.ugp-help-workflow h3{margin:0;color:var(--help-navy);font-size:20px;letter-spacing:-.025em}
.ugp-help-workflow p{margin:6px 0 0;color:var(--help-muted);line-height:1.45}
.ugp-help-workflow ol{grid-column:1/-1;display:grid;gap:10px;margin:4px 0 0;padding:0;list-style:none;counter-reset:help-step}
.ugp-help-workflow li{counter-increment:help-step;position:relative;padding:12px 12px 12px 46px;border:1px solid #e2ebf6;border-radius:14px;background:#f9fbff;color:#173a70;line-height:1.45}
.ugp-help-workflow li::before{content:counter(help-step);position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:999px;background:#2f6de4;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
.ugp-help-manual{overflow:hidden}
.ugp-help-manual-list{display:grid}
.ugp-help-manual-article{display:grid;grid-template-columns:72px minmax(0,1fr);gap:22px;padding:30px;border-top:1px solid #e6eef8}
.ugp-help-manual-article:first-child{border-top:0}
.ugp-help-manual-article__number{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#2f6de4,#1ebbd2);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:950;box-shadow:0 16px 28px rgba(47,109,228,.2)}
.ugp-help-manual-article h2{margin:0;color:var(--help-navy);font-size:clamp(26px,3vw,38px);letter-spacing:-.045em;line-height:1}
.ugp-help-manual-article__intro{margin:10px 0 22px;max-width:880px;color:#4c6698;font-size:16px;line-height:1.65}
.ugp-help-manual-blocks{display:grid;gap:16px}
.ugp-help-manual-block{padding:20px;border:1px solid #e1eaf6;border-radius:18px;background:linear-gradient(180deg,#fff,#fbfdff)}
.ugp-help-manual-block h3{margin:0 0 10px;color:#0b316a;font-size:19px;letter-spacing:-.02em}
.ugp-help-manual-block p{margin:0;color:#526c9d;line-height:1.65}
.ugp-help-manual-notice{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid #f1d28a;border-radius:12px;background:#fff8e6;color:#7a5510;font-weight:750;line-height:1.5}.ugp-help-manual-notice i{margin-top:.2em;color:#d08a00}
.ugp-help-manual-block p + .ugp-help-manual-figure,.ugp-help-manual-block ol + .ugp-help-manual-figure{margin-top:18px}
.ugp-help-manual-block ol{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:manual-step}
.ugp-help-manual-block li{counter-increment:manual-step;position:relative;padding-left:36px;color:#173a70;line-height:1.55}
.ugp-help-manual-block li::before{content:counter(manual-step);position:absolute;left:0;top:.08em;width:24px;height:24px;border-radius:999px;background:#edf4ff;color:#2f6de4;display:grid;place-items:center;font-size:12px;font-weight:950}
.ugp-help-manual-figure{margin:0;padding:14px;border:1px solid #d8e4f3;border-radius:18px;background:#f7fbff}
.ugp-help-manual-figure img{display:block;width:100%;max-width:920px;max-height:680px;margin:0 auto;border-radius:14px;object-fit:contain;box-shadow:0 12px 28px rgba(23,52,95,.1)}
.ugp-help-manual-figure figcaption{margin:12px 4px 0;color:#59719f;font-size:14px;line-height:1.45;text-align:center}
.ugp-help-article{overflow:hidden}
.ugp-help-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;color:#2f6de4;text-decoration:none;font-size:14px;font-weight:900}
.ugp-help-back:hover{text-decoration:underline}
.ugp-help-alert{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border:1px solid #f7d38a;border-radius:18px;background:#fff8e6;color:#734b00;box-shadow:0 12px 24px rgba(115,75,0,.06)}
.ugp-help-alert i{margin-top:3px;color:#f59e0b}
.ugp-help-alert strong,.ugp-help-alert span{display:block}
.ugp-help-alert span{margin-top:3px;color:#785a22}
.ugp-help-article-index{overflow:hidden}
.ugp-help-article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:24px}
.ugp-help-article-card{position:relative;min-height:230px;padding:22px;border:1px solid #dbe7f6;border-radius:20px;background:linear-gradient(180deg,#fff,#f8fbff);color:#0b316a;text-decoration:none;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 22px rgba(23,52,95,.05);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.ugp-help-article-card:hover{transform:translateY(-2px);border-color:#2f6de4;box-shadow:0 18px 34px rgba(47,109,228,.12)}
.ugp-help-article-card__number{width:44px;height:44px;border-radius:15px;background:#edf4ff;color:#2f6de4;display:grid;place-items:center;font-weight:950}
.ugp-help-article-card strong{display:block;color:#092b61;font-size:20px;line-height:1.1;letter-spacing:-.03em}
.ugp-help-article-card small{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;color:#526c9d;font-size:14px;line-height:1.5}
.ugp-help-article-card em{margin-top:auto;color:#2f6de4;font-style:normal;font-weight:900}
.ugp-help-grid__intro{grid-column:1/-1;padding:8px 2px 4px}
.ugp-help-grid__intro h2{margin:4px 0 0;color:var(--help-navy);font-size:28px;letter-spacing:-.035em}
.ugp-help-card{padding:24px}
.ugp-help-card h2,.ugp-help-pages h2{margin:0;color:var(--help-navy);font-size:24px;letter-spacing:-.03em}
.ugp-help-card p{margin:8px 0 16px;color:var(--help-muted);line-height:1.55}
.ugp-help-card ul,.ugp-help-page-list ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.ugp-help-card li,.ugp-help-page-list li{position:relative;padding-left:24px;color:#173a70;line-height:1.48}
.ugp-help-card li::before,.ugp-help-page-list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:999px;background:var(--help-blue);box-shadow:0 0 0 4px #e9f1ff}
.ugp-help-pages{padding:0;overflow:hidden}
.ugp-help-section-head{padding:24px;border-bottom:1px solid #e6eef8}
.ugp-help-page-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.ugp-help-page-list details{padding:20px 22px;border-right:1px solid #e6eef8;border-bottom:1px solid #e6eef8}
.ugp-help-page-list summary{cursor:pointer;color:var(--help-navy);font-weight:900}
.ugp-help-page-list p{margin:10px 0 14px;color:var(--help-muted);line-height:1.5}
@media(max-width:1180px){.ugp-help-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.ugp-help-grid,.ugp-help-page-list,.ugp-help-workflow-grid,.ugp-help-article-grid{grid-template-columns:1fr}.ugp-help-page-list details,.ugp-help-workflow{border-right:0}.ugp-help-quick{grid-template-columns:1fr}.ugp-help-manual-article{grid-template-columns:1fr}.ugp-help-manual-article__number{width:48px;height:48px}}
@media(max-width:640px){.ugp-help-hero{height:170px;padding:22px;gap:16px}.ugp-help-hero__icon{width:64px;height:64px;font-size:26px}.ugp-help-hero h1{font-size:28px}.ugp-help-hero p{font-size:13px;line-height:1.35}.ugp-help-manual-article,.ugp-help-article-grid{padding:22px}.ugp-help-manual-block{padding:16px}.ugp-help-article-card{min-height:0}}


/* Microsoft 365 guided setup 1.0.0.5.2.685 */
.ugp-setup-guide{margin:20px 0;border:1px solid #d7e4f3;border-radius:20px;background:#f8fbff;overflow:hidden}
.ugp-setup-guide summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;color:#0b316a;background:linear-gradient(180deg,#fff,#f5f9ff)}
.ugp-setup-guide summary::-webkit-details-marker{display:none}.ugp-setup-guide summary>span{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}.ugp-setup-guide summary>span>i{grid-row:1/3;width:42px;height:42px;border-radius:13px;background:#eef5ff;color:#2563eb;display:grid;place-items:center;font-size:20px}.ugp-setup-guide summary strong{font-size:17px}.ugp-setup-guide summary small{color:#6078a5;font-weight:500}.ugp-setup-guide[open] summary>.fa-chevron-down{transform:rotate(180deg)}.ugp-setup-guide summary>.fa-chevron-down{transition:transform .18s ease}
.ugp-setup-guide__body{padding:0 20px 20px;border-top:1px solid #e0e9f5}.ugp-setup-steps{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:ms-step}.ugp-setup-steps li{counter-increment:ms-step;display:grid;grid-template-columns:42px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid #e2eaf5}.ugp-setup-steps li::before{content:counter(ms-step);width:32px;height:32px;margin-top:1px;border-radius:999px;background:#2563eb;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:950}.ugp-setup-steps strong{display:block;color:#0b316a;font-size:16px}.ugp-setup-steps p{margin:6px 0 0;color:#536d9c;line-height:1.55}.ugp-setup-steps code,.ugp-setup-security code,.ugp-setup-checklist code{padding:2px 6px;border-radius:6px;background:#eaf2ff;color:#164ca2;font-size:.92em}
.ugp-setup-security{display:flex;gap:14px;margin-top:18px;padding:16px 18px;border:1px solid #cfe0f6;border-radius:16px;background:#fff;color:#153c76}.ugp-setup-security>i{width:36px;height:36px;flex:0 0 36px;border-radius:12px;background:#eaf3ff;color:#2563eb;display:grid;place-items:center}.ugp-setup-security p{margin:5px 0 0;color:#5a72a0;line-height:1.5}
.ugp-setup-checklist{display:flex;flex-wrap:wrap;gap:9px 15px;margin-top:16px;padding:15px 17px;border-radius:16px;background:#edf7f2;color:#17633b}.ugp-setup-checklist>strong{width:100%}.ugp-setup-checklist span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:750}
.ugp-secret-notice{display:flex;align-items:flex-start;gap:12px;margin:16px 0;padding:14px 16px;border-radius:16px}.ugp-secret-notice>i{margin-top:3px}.ugp-secret-notice strong,.ugp-secret-notice span{display:block}.ugp-secret-notice span{margin-top:3px;font-size:13px}.ugp-secret-notice.is-good{background:#edf8f2;color:#17633b}.ugp-secret-notice.is-warning{background:#fff7df;color:#7a5200}.ugp-secret-notice.is-expired{background:#fff0f0;color:#a32b2b}.ugp-secret-expiry.is-warning{color:#8a5c00}.ugp-secret-expiry.is-expired{color:#b42323}
@media(max-width:720px){.ugp-setup-guide summary>span{grid-template-columns:auto 1fr}.ugp-setup-steps li{grid-template-columns:34px 1fr}.ugp-setup-checklist{display:grid}.ugp-setup-guide__body{padding-inline:15px}}

/* Clients under-banner controller action 1.0.0.5.2.907 */
.ugp-clients-under-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: -4px 0 0;
}

.ugp-clients-under-actions .ugp-button {
  min-height: 42px;
  border-radius: 13px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #d4dfed;
  color: #16468b;
  font-weight: 800;
  box-shadow: 0 2px 0 #edf3fb;
}

@media (max-width: 650px) {
  .ugp-clients-under-actions {
    justify-content: flex-start;
  }
  .ugp-clients-under-actions .ugp-button {
    width: 100%;
  }
}


/* Clients page hero alignment and under-banner action polish 1.0.0.5.2.908 */
.ugp-clients-ops {
  gap: 18px;
}

.ugp-clients-hero {
  height: 210px !important;
  min-height: 210px !important;
  border-radius: 22px !important;
  padding: 34px 42px !important;
  margin: 0 !important;
}

.ugp-clients-hero__icon {
  width: 86px !important;
  height: 86px !important;
  border-radius: 22px !important;
}

.ugp-clients-under-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin: -4px 0 0 !important;
}

.ugp-clients-under-actions .ugp-button {
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 13px !important;
  padding: 0 24px !important;
  background: #fff !important;
  border: 1px solid #cbd9eb !important;
  color: #0b326f !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.ugp-clients-under-actions .ugp-button:hover {
  background: #f7faff !important;
  border-color: #aebfda !important;
}

@media (max-width: 760px) {
  .ugp-clients-hero {
    height: 170px !important;
    min-height: 170px !important;
    padding: 22px !important;
  }
  .ugp-clients-hero__icon {
    width: 64px !important;
    height: 64px !important;
  }
}

/* v1.0.0.5.2.913 · Create portal wizard refresh */
.ugp-portal-wizard--compact{display:grid;gap:16px}
.ugp-wizard-hero{height:210px;border-radius:22px;background-position:center;background-size:cover;display:flex;align-items:center;padding:34px 42px;overflow:hidden;position:relative}
.ugp-wizard-hero__copy{display:flex;align-items:center;gap:22px;max-width:760px;position:relative;z-index:1;color:#0f2f68}
.ugp-wizard-hero__icon{width:86px;height:86px;flex:0 0 86px;border-radius:22px;background:#fffdf7;display:grid;place-items:center;box-shadow:0 18px 42px rgba(15,47,104,.08);font-size:29px;color:#0b4d9f}
.ugp-wizard-hero__copy small,.ugp-wizard-panel__head small,.ugp-wizard-summary>small{display:block;color:#7890bb;font-size:11px;line-height:1.2;letter-spacing:.22em;text-transform:uppercase;font-weight:900;margin-bottom:7px}
.ugp-wizard-hero__copy h1{margin:0;color:#0f2f68;font-size:38px;line-height:1;letter-spacing:-.04em}
.ugp-wizard-hero__copy p{margin:9px 0 0;color:#173f78;font-size:16px;line-height:1.45;font-weight:650}
.ugp-wizard-under-actions{display:flex;justify-content:flex-end;align-items:center;margin-top:-2px}
.ugp-wizard-under-actions .ugp-button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 13px;border-radius:12px}
.ugp-wizard-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;align-items:start}
.ugp-wizard-main,.ugp-wizard-side{display:grid;gap:16px}
.ugp-wizard-side{position:sticky;top:18px}
.ugp-wizard-panel{padding:20px 22px;border-radius:22px}
.ugp-wizard-panel__head{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.ugp-wizard-panel__head>span{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:12px;background:#eef4ff;color:#2563eb;font-weight:900}
.ugp-wizard-panel__head h2{margin:0;color:#0f2f68;font-size:23px;line-height:1.08;letter-spacing:-.03em}
.ugp-wizard-panel__head p{margin:5px 0 0;color:#657ca8;font-size:13px;line-height:1.45}
.ugp-wizard-panel__head--small h2{font-size:20px}
.ugp-wizard__fields--compact{gap:11px}.ugp-wizard__fields--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ugp-wizard__fields--compact label{gap:5px;font-size:12px}.ugp-wizard__fields--compact input,.ugp-wizard__fields--compact textarea{padding:10px 12px;border-radius:12px;font-size:13px}
.ugp-wizard__choice-grid--compact{margin-top:13px;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.ugp-wizard__choice--compact .ugp-wizard__choice-body{min-height:78px;padding:11px;border-radius:15px;display:flex;gap:10px;align-items:flex-start}
.ugp-wizard__choice--compact .ugp-wizard__choice-body i{width:32px;height:32px;flex:0 0 32px;border-radius:10px;font-size:13px}
.ugp-wizard__choice--compact .ugp-wizard__choice-body>span{display:grid;gap:3px}.ugp-wizard__choice--compact .ugp-wizard__choice-body strong{font-size:13px;line-height:1.2}.ugp-wizard__choice--compact .ugp-wizard__choice-body small{font-size:11px;line-height:1.3}
.ugp-wizard-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ugp-wizard-template{position:relative;display:grid;gap:9px;padding:10px;border:1px solid #d8e2f0;border-radius:18px;background:#fff;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;overflow:hidden}
.ugp-wizard-template:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,47,104,.08)}
.ugp-wizard-template>input{position:absolute;opacity:0;pointer-events:none}.ugp-wizard-template:has(input:checked){border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.08),0 14px 30px rgba(37,99,235,.1)}
.ugp-wizard-template__preview{height:122px;border-radius:13px;background:linear-gradient(140deg,var(--tp-canvas),color-mix(in srgb,var(--tp-primary) 12%, var(--tp-canvas)));padding:13px;display:grid;place-items:center;overflow:hidden;position:relative}
.ugp-wizard-template__preview:before{content:"";position:absolute;width:110px;height:110px;border-radius:999px;background:color-mix(in srgb,var(--tp-accent) 18%, transparent);right:-42px;top:-48px}
.ugp-wizard-template__screen{width:78%;min-height:95px;border:1px solid color-mix(in srgb,var(--tp-primary) 16%, #d8e2f0);border-radius:14px;background:color-mix(in srgb,var(--tp-surface) 94%, transparent);box-shadow:0 10px 22px rgba(15,47,104,.08);padding:11px;display:grid;align-content:center;gap:6px;position:relative;z-index:1}
.ugp-wizard-template__brand{width:24px;height:8px;border-radius:99px;background:var(--tp-primary)}.ugp-wizard-template__screen b{width:66%;height:7px;border-radius:99px;background:var(--tp-text);opacity:.9}.ugp-wizard-template__screen em{width:84%;height:4px;border-radius:99px;background:var(--tp-text);opacity:.22}.ugp-wizard-template__field{display:block;width:100%;height:10px;border-radius:6px;border:1px solid color-mix(in srgb,var(--tp-text) 14%, transparent);background:color-mix(in srgb,var(--tp-surface) 94%, transparent)}.ugp-wizard-template__field.is-short{width:78%}.ugp-wizard-template__screen strong{display:block;width:100%;height:14px;border-radius:7px;background:var(--tp-primary)}
.ugp-wizard-template--heritage .ugp-wizard-template__screen{border-radius:5px}.ugp-wizard-template--heritage .ugp-wizard-template__brand,.ugp-wizard-template--heritage .ugp-wizard-template__screen strong{border-radius:3px}.ugp-wizard-template--event .ugp-wizard-template__screen{background:#151a35}.ugp-wizard-template--event .ugp-wizard-template__screen b{background:#f5f7ff}.ugp-wizard-template--event .ugp-wizard-template__screen em{background:#b7c3e7}.ugp-wizard-template--promo .ugp-wizard-template__screen{width:88%;grid-template-columns:1.15fr .85fr;column-gap:8px}.ugp-wizard-template--promo .ugp-wizard-template__screen .ugp-wizard-template__brand,.ugp-wizard-template--promo .ugp-wizard-template__screen b,.ugp-wizard-template--promo .ugp-wizard-template__screen em{grid-column:1}.ugp-wizard-template--promo .ugp-wizard-template__screen .ugp-wizard-template__field,.ugp-wizard-template--promo .ugp-wizard-template__screen strong{grid-column:2}.ugp-wizard-template--promo .ugp-wizard-template__screen strong{grid-row:3/5;height:auto}
.ugp-wizard-template__meta{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.ugp-wizard-template__meta>span{display:grid;gap:3px}.ugp-wizard-template__meta strong{color:#0f2f68;font-size:13px}.ugp-wizard-template__meta small{color:#7185a8;font-size:11px;line-height:1.3}.ugp-wizard-template__meta>i{color:#2563eb;opacity:0;transition:opacity .15s ease;margin-top:2px}.ugp-wizard-template:has(input:checked) .ugp-wizard-template__meta>i{opacity:1}
.ugp-wizard__toggles--compact{gap:7px;margin:13px 0 0}.ugp-wizard__toggles--compact label{padding:8px 10px;border-radius:11px;font-size:12px;background:#fbfdff}
.ugp-wizard-advanced{margin-top:12px;border-top:1px solid #e4ebf5;padding-top:11px}.ugp-wizard-advanced summary{list-style:none;cursor:pointer;color:#315b94;font-size:12px;font-weight:800;display:flex;gap:7px;align-items:center}.ugp-wizard-advanced summary::-webkit-details-marker{display:none}.ugp-wizard-advanced[open] summary{margin-bottom:11px}
.ugp-wizard-upload{display:flex;align-items:center;gap:11px;padding:13px;border:1px dashed #c8d7ec;border-radius:15px;background:#f8fbff;cursor:pointer}.ugp-wizard-upload>i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#eef4ff;color:#2563eb}.ugp-wizard-upload>span{display:grid;gap:2px;min-width:0}.ugp-wizard-upload strong{color:#0f2f68;font-size:13px}.ugp-wizard-upload small{color:#7185a8;font-size:10px;line-height:1.3}.ugp-wizard-upload input{position:absolute;opacity:0;pointer-events:none}
.ugp-wizard-url{display:grid;gap:5px;margin-top:11px;color:#657ca8;font-size:11px;font-weight:700}.ugp-wizard-url input{width:100%;border:1px solid #d8e2f0;border-radius:12px;padding:10px 11px;font:inherit;color:#0f2f68}
.ugp-wizard-summary{padding:20px 22px;border-radius:22px;background:linear-gradient(160deg,#0f2f68 0%,#174c91 100%);color:#fff}.ugp-wizard-summary>small{color:#9fc2ef}.ugp-wizard-summary h3{margin:0;font-size:23px;line-height:1.1;color:#fff}.ugp-wizard-summary>p{margin:7px 0 0;color:#dbe9fb;font-weight:700}.ugp-wizard-summary ul{list-style:none;padding:0;margin:17px 0;display:grid;gap:8px}.ugp-wizard-summary li{display:flex;gap:8px;align-items:center;font-size:12px;color:#dbe9fb}.ugp-wizard-summary li i{color:#69dfb2}.ugp-wizard-summary .ugp-wizard__submit{width:100%;justify-content:center;background:#fff;color:#123d73;border-color:#fff;min-height:48px;border-radius:14px;padding:11px 14px}
@media(max-width:1260px){.ugp-wizard-layout{grid-template-columns:1fr}.ugp-wizard-side{position:static;grid-template-columns:1fr 1fr}.ugp-wizard-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:920px){.ugp-wizard__choice-grid--compact,.ugp-wizard-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ugp-wizard__fields--three{grid-template-columns:1fr 1fr}.ugp-wizard-side{grid-template-columns:1fr}}
@media(max-width:640px){.ugp-wizard-hero{height:auto;min-height:210px;padding:26px 24px;background-position:62% center}.ugp-wizard-hero__icon{width:68px;height:68px;flex-basis:68px}.ugp-wizard-hero__copy h1{font-size:31px}.ugp-wizard__choice-grid--compact,.ugp-wizard-template-grid,.ugp-wizard__fields--three,.ugp-wizard__fields--two{grid-template-columns:1fr}}

/* v1.0.0.5.2.916 · visual portal template library + shorter wizard flow */
body.option-com_unifiguestportal.view-designwizard .gx-surface-redesign .ugp-portal-wizard,
.ugp-portal-wizard--library{align-content:start;min-height:0;margin-bottom:0;padding-bottom:0}
.ugp-portal-wizard--library .ugp-wizard{display:grid;gap:14px}
.ugp-portal-wizard--library .ugp-wizard-panel{padding:18px 20px}
.ugp-portal-wizard--library .ugp-wizard-panel__head{margin-bottom:13px}
.ugp-portal-wizard--library .ugp-wizard-panel__head--with-note{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:start}
.ugp-wizard-template-hint{align-self:center;display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#f5f8fd;border:1px solid #e0e8f4;color:#6880aa;font-size:11px;font-weight:800;white-space:nowrap}
.ugp-wizard-basics-row{display:grid;grid-template-columns:minmax(360px,.85fr) minmax(620px,1.45fr);gap:14px;align-items:end}
.ugp-portal-wizard--library .ugp-wizard__choice-grid--compact{margin-top:0}
.ugp-wizard-template-grid--library{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ugp-portal-wizard--library .ugp-wizard-template{gap:7px;padding:8px;border-radius:17px;min-width:0}
.ugp-portal-wizard--library .ugp-wizard-template__preview{height:126px;border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.ugp-portal-wizard--library .ugp-wizard-template__preview:before{display:none}
.ugp-wizard-template__scene{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--tp-accent) 30%,transparent) 0 14%,transparent 15%),linear-gradient(145deg,var(--tp-canvas),color-mix(in srgb,var(--tp-primary) 16%,var(--tp-canvas)))}
.ugp-portal-wizard--library .ugp-wizard-template__screen{position:relative;z-index:2;width:62%;min-height:104px;border:1px solid color-mix(in srgb,var(--tp-primary) 18%,#d8e2f0);border-radius:15px;background:color-mix(in srgb,var(--tp-surface) 95%,transparent);box-shadow:0 12px 26px rgba(15,47,104,.10);padding:10px;display:grid;align-content:center;gap:6px;transition:width .18s ease,border-radius .18s ease,transform .18s ease}
.ugp-portal-wizard--library .ugp-wizard-template__brand{display:block;width:25px;height:8px;border-radius:99px;background:var(--tp-primary)}
.ugp-portal-wizard--library .ugp-wizard-template__headline{display:block;width:69%;height:7px;border-radius:99px;background:var(--tp-text);opacity:.9}
.ugp-portal-wizard--library .ugp-wizard-template__copyline{display:block;width:86%;height:4px;border-radius:99px;background:var(--tp-text);opacity:.22}
.ugp-wizard-template__fields{display:flex;gap:4px}.ugp-wizard-template__fields i{display:block;flex:1;height:9px;border-radius:5px;border:1px solid color-mix(in srgb,var(--tp-text) 13%,transparent);background:color-mix(in srgb,var(--tp-surface) 94%,transparent)}
.ugp-portal-wizard--library .ugp-wizard-template__button{display:block;width:100%;height:13px;border-radius:7px;background:var(--tp-primary)}
.ugp-wizard-template__success{display:none;width:42px;height:42px;margin:auto;border-radius:50%;background:var(--tp-primary);color:#fff;place-items:center;font-size:17px}
.ugp-wizard-template__preview--glass .ugp-wizard-template__scene{background:radial-gradient(circle at 22% 26%,rgba(255,255,255,.78) 0 11%,transparent 12%),linear-gradient(135deg,#83baff,#dff4ff 58%,#8fd7ee)}
.ugp-wizard-template__preview--glass .ugp-wizard-template__screen{background:rgba(255,255,255,.76);backdrop-filter:blur(7px);border-color:rgba(255,255,255,.82);box-shadow:0 14px 34px rgba(21,80,145,.16)}
.ugp-wizard-template__preview--heritage .ugp-wizard-template__scene{background:linear-gradient(90deg,#e9dfc9 0 6%,transparent 6% 94%,#e9dfc9 94%),linear-gradient(180deg,#f7f1e6,#e9dfc9)}
.ugp-wizard-template__preview--heritage .ugp-wizard-template__screen{border-radius:4px;width:58%;box-shadow:0 8px 18px rgba(71,55,31,.09)}
.ugp-wizard-template__preview--heritage .ugp-wizard-template__brand,.ugp-wizard-template__preview--heritage .ugp-wizard-template__button{border-radius:2px}
.ugp-wizard-template__preview--left{justify-content:flex-start}.ugp-wizard-template__preview--left .ugp-wizard-template__screen{width:70%}
.ugp-wizard-template__preview--left .ugp-wizard-template__scene{background:radial-gradient(circle at 88% 20%,#f1c999 0 18%,transparent 19%),linear-gradient(145deg,#fff2e3,#f3d8bb)}
.ugp-wizard-template__preview--event .ugp-wizard-template__scene{background:radial-gradient(circle at 80% 18%,rgba(109,93,251,.55),transparent 28%),radial-gradient(circle at 18% 88%,rgba(33,197,243,.30),transparent 30%),linear-gradient(145deg,#090d20,#211b50)}
.ugp-wizard-template__preview--event .ugp-wizard-template__screen{background:#151a35;border-color:#3e467a;box-shadow:0 15px 32px rgba(0,0,0,.28)}
.ugp-wizard-template__preview--event .ugp-wizard-template__headline{background:#f5f7ff}.ugp-wizard-template__preview--event .ugp-wizard-template__copyline{background:#b7c3e7}.ugp-wizard-template__preview--event .ugp-wizard-template__fields i{background:#202748;border-color:#3e467a}
.ugp-wizard-template__preview--split .ugp-wizard-template__scene{background:linear-gradient(120deg,#fff4ea 0 55%,#ffd7aa 55%)}
.ugp-wizard-template__preview--split .ugp-wizard-template__screen,.ugp-wizard-template__preview--corporate .ugp-wizard-template__screen{width:88%;grid-template-columns:1.08fr .92fr;column-gap:9px;align-items:center}
.ugp-wizard-template__preview--split .ugp-wizard-template__brand,.ugp-wizard-template__preview--split .ugp-wizard-template__headline,.ugp-wizard-template__preview--split .ugp-wizard-template__copyline,.ugp-wizard-template__preview--corporate .ugp-wizard-template__brand,.ugp-wizard-template__preview--corporate .ugp-wizard-template__headline,.ugp-wizard-template__preview--corporate .ugp-wizard-template__copyline{grid-column:1}
.ugp-wizard-template__preview--split .ugp-wizard-template__fields,.ugp-wizard-template__preview--split .ugp-wizard-template__button,.ugp-wizard-template__preview--corporate .ugp-wizard-template__fields,.ugp-wizard-template__preview--corporate .ugp-wizard-template__button{grid-column:2}
.ugp-wizard-template__preview--split .ugp-wizard-template__fields,.ugp-wizard-template__preview--corporate .ugp-wizard-template__fields{grid-row:2/4;display:grid}.ugp-wizard-template__preview--split .ugp-wizard-template__fields i,.ugp-wizard-template__preview--corporate .ugp-wizard-template__fields i{height:14px}
.ugp-wizard-template__preview--corporate .ugp-wizard-template__scene{background:linear-gradient(145deg,#f8faff,#e8f1ff)}
.ugp-wizard-template__preview--corporate .ugp-wizard-template__screen{border-radius:9px}.ugp-wizard-template__preview--corporate .ugp-wizard-template__button{border-radius:4px}
.ugp-wizard-template__preview--outdoor{justify-content:flex-start}.ugp-wizard-template__preview--outdoor .ugp-wizard-template__scene{background:radial-gradient(ellipse at 80% 95%,#7cc89b 0 24%,transparent 25%),radial-gradient(ellipse at 100% 90%,#4a9c70 0 30%,transparent 31%),linear-gradient(180deg,#bfe6d1,#eaf6ef 62%)}
.ugp-wizard-template__preview--outdoor .ugp-wizard-template__screen{width:68%;background:rgba(255,255,255,.88)}
.ugp-wizard-template__meta{min-height:65px}.ugp-wizard-template__meta-copy{display:grid;grid-template-columns:auto 1fr;column-gap:7px;row-gap:2px;min-width:0}.ugp-wizard-template__meta-copy>strong,.ugp-wizard-template__meta-copy>small{grid-column:1/-1}.ugp-wizard-template__category{justify-self:start;display:inline-flex;padding:3px 6px;border-radius:999px;background:#f1f5fb;color:#7890b7;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.10em;font-weight:900}
.ugp-wizard-template__selected{font-size:16px}.ugp-wizard-template__preview-btn{justify-self:start;border:0;background:transparent;padding:1px 0;color:#315f9d;font:800 11px/1.2 inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px}.ugp-wizard-template__preview-btn:hover{color:#174e99;text-decoration:underline}
.ugp-wizard-lower-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(330px,.75fr);gap:14px;align-items:stretch}.ugp-wizard-lower-grid>.ugp-wizard-panel{height:100%}
.ugp-wizard__toggles--fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ugp-portal-wizard--library .ugp-wizard__toggles--fields+.ugp-wizard__toggles--fields{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:10px;margin-bottom:10px}
.ugp-wizard-brand-grid{display:grid;gap:10px}.ugp-wizard-brand-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.75fr);gap:9px;align-items:end;padding:9px;border:1px solid #e1e9f4;border-radius:16px;background:#fbfdff}.ugp-wizard-brand-item .ugp-wizard-url{margin-top:0}.ugp-wizard-upload--background>i{background:#edf9f2;color:#168354}
.ugp-wizard-summary--bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:15px 18px;background:linear-gradient(145deg,#0f2f68,#174c91)}
.ugp-wizard-summary__step{display:flex;align-items:center;gap:10px;min-width:205px}.ugp-wizard-summary__step>span{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff;font-weight:900}.ugp-wizard-summary__step>div{display:grid}.ugp-wizard-summary__step small{color:#a9c7ed;font-size:9px;letter-spacing:.18em;font-weight:900}.ugp-wizard-summary__step strong{color:#fff;font-size:16px}
.ugp-wizard-summary__details{display:flex;align-items:center;gap:18px;min-width:0;flex-wrap:wrap}.ugp-wizard-summary__details>span{display:inline-flex;align-items:center;gap:7px;color:#dbe9fb;font-size:12px}.ugp-wizard-summary__details i{color:#75e2b6}.ugp-wizard-summary__details b{color:#fff}.ugp-wizard-summary--bar .ugp-wizard__submit{min-width:160px;background:#fff;color:#123d73;border-color:#fff;justify-content:center}
body.ugp-modal-open{overflow:hidden}.ugp-wizard-template-modal{position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(9,24,49,.50);backdrop-filter:blur(8px)}.ugp-wizard-template-modal.is-open{display:flex}.ugp-wizard-template-modal__panel{width:min(1040px,calc(100vw - 36px));max-height:calc(100vh - 36px);overflow:hidden;border-radius:26px;background:#fff;border:1px solid #d8e2f0;box-shadow:0 36px 90px rgba(9,24,49,.28);display:grid;grid-template-rows:auto auto minmax(320px,1fr) auto}.ugp-wizard-template-modal__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;border-bottom:1px solid #e4ebf5}.ugp-wizard-template-modal__bar span{display:block;color:#7890b7;font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:900}.ugp-wizard-template-modal__bar h2{margin:3px 0 0;color:#0f2f68;font-size:23px}.ugp-wizard-template-modal__close{width:38px;height:38px;border-radius:12px;border:1px solid #d8e2f0;background:#fff;color:#315b94;cursor:pointer}.ugp-wizard-template-modal__controls{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:11px 20px;background:#f8fbff;border-bottom:1px solid #e8eef7}.ugp-wizard-preview-tabs{display:flex;gap:4px;padding:4px;border-radius:13px;border:1px solid #dce6f3;background:#fff}.ugp-wizard-preview-tabs button{border:0;background:transparent;color:#5d74a0;border-radius:9px;padding:7px 10px;font:800 11px/1 inherit;cursor:pointer}.ugp-wizard-preview-tabs button.is-active{background:#edf4ff;color:#1f5fb8}.ugp-wizard-template-modal__stage{overflow:auto;background:linear-gradient(180deg,#f6f9fd,#eef4fb);padding:28px;display:grid;place-items:center}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large{width:min(820px,100%);height:430px;border-radius:24px;padding:34px;box-shadow:0 20px 45px rgba(15,47,104,.10)}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__screen{min-height:320px;padding:30px;gap:15px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__brand{width:74px;height:18px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__headline{height:19px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__copyline{height:10px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__fields{gap:10px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__fields i{height:38px;border-radius:10px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__button{height:46px;border-radius:12px}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large{width:310px;height:560px;padding:22px;border-radius:38px;box-shadow:0 24px 54px rgba(15,47,104,.18)}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__screen{width:100%;min-height:455px;grid-template-columns:1fr;display:grid}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__brand,.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__headline,.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__copyline,.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__fields,.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__button{grid-column:1;grid-row:auto}.ugp-wizard-template-modal__stage[data-preview-page="welcome"] .ugp-wizard-template__fields{display:none}.ugp-wizard-template-modal__stage[data-preview-page="register"] .ugp-wizard-template__fields{display:flex}.ugp-wizard-template-modal__stage[data-preview-page="connected"] .ugp-wizard-template__headline,.ugp-wizard-template-modal__stage[data-preview-page="connected"] .ugp-wizard-template__copyline,.ugp-wizard-template-modal__stage[data-preview-page="connected"] .ugp-wizard-template__fields{display:none}.ugp-wizard-template-modal__stage[data-preview-page="connected"] .ugp-wizard-template__success{display:grid}.ugp-wizard-template-modal__stage[data-preview-page="connected"] .ugp-wizard-template__button{width:74%;margin:auto}.ugp-wizard-template-modal__footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 20px;border-top:1px solid #e4ebf5}.ugp-wizard-template-modal__footer p{margin:0;color:#6e83a7;font-size:12px;line-height:1.45;max-width:680px}
@media(max-width:1500px){.ugp-wizard-basics-row{grid-template-columns:1fr}.ugp-wizard-template-grid--library{grid-template-columns:repeat(4,minmax(0,1fr))}.ugp-wizard-lower-grid{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)}}
@media(max-width:1200px){.ugp-wizard-template-grid--library{grid-template-columns:repeat(3,minmax(0,1fr))}.ugp-wizard-lower-grid{grid-template-columns:1fr}.ugp-wizard-brand-grid{grid-template-columns:1fr 1fr}.ugp-wizard-brand-item{grid-template-columns:1fr}.ugp-wizard-summary--bar{grid-template-columns:1fr auto}.ugp-wizard-summary__details{grid-column:1/-1;grid-row:2}}
@media(max-width:860px){.ugp-wizard-template-grid--library{grid-template-columns:repeat(2,minmax(0,1fr))}.ugp-wizard-brand-grid{grid-template-columns:1fr}.ugp-wizard__toggles--fields{grid-template-columns:repeat(2,minmax(0,1fr))}.ugp-wizard-panel__head--with-note{grid-template-columns:36px 1fr}.ugp-wizard-template-hint{grid-column:2;margin-top:4px;justify-self:start}.ugp-wizard-template-modal__controls{align-items:flex-start;flex-direction:column}.ugp-wizard-summary--bar{grid-template-columns:1fr}.ugp-wizard-summary__details{grid-column:auto;grid-row:auto}.ugp-wizard-summary--bar .ugp-wizard__submit{width:100%}}
@media(max-width:600px){.ugp-wizard-template-grid--library{grid-template-columns:1fr}.ugp-wizard-template-modal{padding:10px}.ugp-wizard-template-modal__panel{width:calc(100vw - 20px);max-height:calc(100vh - 20px);border-radius:20px}.ugp-wizard-template-modal__stage{padding:14px}.ugp-wizard-template-modal__footer{align-items:stretch;flex-direction:column}.ugp-wizard-template-modal__footer .ugp-button{width:100%;justify-content:center}.ugp-wizard__toggles--fields{grid-template-columns:1fr}.ugp-wizard-summary__details{display:grid;gap:8px}}

/* v1.0.0.5.2.917 · advanced portal compositions + canonical create portal dashboard route */

/* v1.0.0.5.2.926 · photographic portal template previews */
.ugp-portal-wizard--library .ugp-wizard-template__preview{height:168px;padding:0;display:block;background:var(--tp-canvas);border:1px solid rgba(17,53,103,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.ugp-portal-wizard--library .ugp-wizard-template__scene{z-index:0;background-size:cover;background-position:center;transform:scale(1.015);filter:saturate(.96) contrast(1.02)}
.ugp-wizard-template__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,26,53,.54),rgba(7,26,53,.10) 60%,rgba(7,26,53,.16));pointer-events:none}
.ugp-wizard-template__mockpage{position:absolute;inset:0;z-index:2;padding:13px 14px;display:none;grid-template-columns:minmax(0,1.12fr) minmax(88px,.78fr);gap:10px;align-items:end;text-align:left;overflow:hidden}
.ugp-wizard-template__mockpage--welcome{display:grid}
.ugp-wizard-template__mockcopy{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;min-width:0;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.24)}
.ugp-wizard-template__mocklogo{display:block;width:auto;max-width:112px;max-height:43px;object-fit:contain;object-position:left center;margin-bottom:auto;filter:drop-shadow(0 2px 7px rgba(0,0,0,.14))}
.ugp-wizard-template__mocktitle{display:block;color:inherit;font:800 14px/1.02 Georgia,serif;letter-spacing:-.02em;max-width:16ch}
.ugp-wizard-template__mockbody{display:block;color:inherit;font:600 7.5px/1.35 Arial,sans-serif;opacity:.94;max-width:26ch}
.ugp-wizard-template__mockaction{align-self:end;display:grid;gap:6px;padding:9px 9px 8px;border:1px solid rgba(255,255,255,.68);border-radius:13px;background:rgba(255,255,255,.82);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 8px 22px rgba(6,29,59,.16);color:#123A68;text-shadow:none}
.ugp-wizard-template__mockaction small{font:800 7px/1.2 Arial,sans-serif;color:inherit}.ugp-wizard-template__mockaction strong{display:block;border-radius:7px;background:var(--tp-primary);color:#fff;padding:7px 5px;text-align:center;font:800 7.5px/1 Arial,sans-serif}.ugp-wizard-template__mockaction i{font:500 5.5px/1.2 Arial,sans-serif;font-style:normal;opacity:.72;text-align:center}
.ugp-wizard-template__mockpage--register,.ugp-wizard-template__mockpage--connected{grid-template-columns:1fr;place-items:center}
.ugp-wizard-template__registercard,.ugp-wizard-template__connectedcard{width:min(75%,220px);display:grid;gap:6px;padding:12px;border:1px solid rgba(255,255,255,.72);border-radius:15px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 28px rgba(6,29,59,.18);color:var(--tp-text);text-align:left;text-shadow:none}
.ugp-wizard-template__registercard .ugp-wizard-template__mocklogo,.ugp-wizard-template__connectedcard .ugp-wizard-template__mocklogo{max-width:92px;max-height:33px;margin:0 auto 1px;object-position:center}
.ugp-wizard-template__registercard>b,.ugp-wizard-template__connectedcard>b{font:800 11px/1.15 Arial,sans-serif;text-align:center}.ugp-wizard-template__registercard>em,.ugp-wizard-template__connectedcard>em{font:500 7px/1.3 Arial,sans-serif;font-style:normal;text-align:center;opacity:.72}
.ugp-wizard-template__mockfields{display:grid;grid-template-columns:1fr 1fr;gap:5px}.ugp-wizard-template__mockfields i{display:block;border:1px solid color-mix(in srgb,var(--tp-text) 15%,#d8e2f0);border-radius:6px;background:#fff;padding:6px;color:#8798b2;font:500 6px/1 Arial,sans-serif;font-style:normal}.ugp-wizard-template__registercard>strong{display:block;border-radius:7px;background:var(--tp-primary);color:#fff;padding:7px;text-align:center;font:800 7.5px/1 Arial,sans-serif}
.ugp-wizard-template__connectedcard>span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;margin:auto;background:var(--tp-primary);color:#fff;font-size:12px;box-shadow:0 8px 16px color-mix(in srgb,var(--tp-primary) 28%,transparent)}

/* Individual compositions mirror the generated portal rather than generic wireframes. */
.ugp-wizard-template__preview--centered .ugp-wizard-template__shade{background:linear-gradient(135deg,rgba(244,247,251,.34),rgba(237,244,255,.10))}.ugp-wizard-template__preview--centered .ugp-wizard-template__mockpage--welcome{grid-template-columns:1fr;place-items:center;padding:18px}.ugp-wizard-template__preview--centered .ugp-wizard-template__mockcopy{width:82%;align-self:center;justify-content:center;align-items:center;color:var(--tp-text);text-shadow:none;text-align:center}.ugp-wizard-template__preview--centered .ugp-wizard-template__mocklogo{margin:0 auto 3px;object-position:center}.ugp-wizard-template__preview--centered .ugp-wizard-template__mocktitle{max-width:none}.ugp-wizard-template__preview--centered .ugp-wizard-template__mockaction{width:70%;position:absolute;left:15%;bottom:11px;padding:7px}.ugp-wizard-template__preview--centered .ugp-wizard-template__mockaction small,.ugp-wizard-template__preview--centered .ugp-wizard-template__mockaction i{display:none}
.ugp-wizard-template__preview--glass .ugp-wizard-template__shade{background:linear-gradient(90deg,rgba(10,35,65,.56),rgba(10,35,65,.08) 63%,rgba(10,35,65,.18))}.ugp-wizard-template__preview--glass .ugp-wizard-template__mockcopy{padding:4px 0 3px}.ugp-wizard-template__preview--glass .ugp-wizard-template__mockaction{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.78)}
.ugp-wizard-template__preview--heritage .ugp-wizard-template__shade{background:linear-gradient(90deg,rgba(255,250,238,.94) 0 53%,rgba(255,250,238,.25) 72%,rgba(17,34,48,.12))}.ugp-wizard-template__preview--heritage .ugp-wizard-template__mockpage{grid-template-columns:minmax(0,1.15fr) minmax(80px,.7fr)}.ugp-wizard-template__preview--heritage .ugp-wizard-template__mockcopy{color:#26394b;text-shadow:none}.ugp-wizard-template__preview--heritage .ugp-wizard-template__mockaction{border-radius:5px;background:rgba(255,253,247,.95);border-color:#d9cfbb}.ugp-wizard-template__preview--heritage .ugp-wizard-template__mockaction strong{border-radius:3px}.ugp-wizard-template__preview--heritage .ugp-wizard-template__mocktitle{font-size:13px}
.ugp-wizard-template__preview--left .ugp-wizard-template__shade{background:linear-gradient(90deg,rgba(39,20,10,.72),rgba(39,20,10,.14) 66%,rgba(39,20,10,.05))}.ugp-wizard-template__preview--left .ugp-wizard-template__mockaction{background:rgba(255,253,248,.90)}
.ugp-wizard-template__preview--event .ugp-wizard-template__shade{background:linear-gradient(90deg,rgba(5,7,22,.72),rgba(8,7,29,.20) 64%,rgba(5,7,22,.36))}.ugp-wizard-template__preview--event .ugp-wizard-template__mockaction{background:rgba(21,26,53,.88);border-color:rgba(93,101,180,.7);color:#f5f7ff}.ugp-wizard-template__preview--event .ugp-wizard-template__mocktitle{font-family:Arial,sans-serif;font-size:14px;text-transform:none}.ugp-wizard-template__preview--event .ugp-wizard-template__mockaction strong{background:#6d5dfb}
.ugp-wizard-template__preview--split .ugp-wizard-template__shade{background:linear-gradient(90deg,rgba(43,18,14,.78) 0 49%,rgba(43,18,14,.12) 63%,rgba(255,247,241,.08))}.ugp-wizard-template__preview--split .ugp-wizard-template__mockpage{grid-template-columns:1fr 1fr}.ugp-wizard-template__preview--split .ugp-wizard-template__mockaction{background:rgba(255,248,243,.94);border-color:#f2cdbb}.ugp-wizard-template__preview--split .ugp-wizard-template__mocktitle{font-family:Arial,sans-serif;font-size:13px}
.ugp-wizard-template__preview--corporate .ugp-wizard-template__shade{background:linear-gradient(90deg,rgba(10,32,66,.88) 0 50%,rgba(10,32,66,.12) 65%,rgba(255,255,255,.05))}.ugp-wizard-template__preview--corporate .ugp-wizard-template__mockpage{grid-template-columns:1fr 1fr}.ugp-wizard-template__preview--corporate .ugp-wizard-template__mocktitle{font-family:Arial,sans-serif;font-size:12.5px}.ugp-wizard-template__preview--corporate .ugp-wizard-template__mockaction{background:rgba(255,255,255,.94);border-color:#cfdcf1}
.ugp-wizard-template__preview--outdoor .ugp-wizard-template__shade{background:linear-gradient(90deg,rgba(13,49,34,.72),rgba(13,49,34,.12) 67%,rgba(13,49,34,.06))}.ugp-wizard-template__preview--outdoor .ugp-wizard-template__mockaction{background:rgba(255,255,255,.90);border-color:#d7e8dc}

/* Modal renders the same real composition at a useful inspection size. */
.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large{width:min(900px,100%);height:510px;padding:0;border-radius:24px;overflow:hidden;background:#fff}
.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__mockpage{padding:48px 54px;gap:34px;grid-template-columns:minmax(0,1.15fr) minmax(280px,.8fr)}
.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__mocklogo{max-width:260px;max-height:105px;margin-bottom:auto}
.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__mocktitle{font-size:42px;line-height:1.02;max-width:13ch}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__mockbody{font-size:16px;line-height:1.45;max-width:38ch}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__mockaction{gap:14px;padding:28px 26px;border-radius:28px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__mockaction small{font-size:17px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__mockaction strong{padding:16px 12px;border-radius:15px;font-size:16px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__mockaction i{font-size:11px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__registercard,.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__connectedcard{width:min(520px,76%);gap:14px;padding:32px;border-radius:28px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__registercard .ugp-wizard-template__mocklogo,.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__connectedcard .ugp-wizard-template__mocklogo{max-width:230px;max-height:90px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__registercard>b,.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__connectedcard>b{font-size:26px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__registercard>em,.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__connectedcard>em{font-size:14px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__mockfields{gap:10px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__mockfields i{padding:13px 12px;border-radius:10px;font-size:12px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__registercard>strong{padding:15px;font-size:14px}.ugp-wizard-template-modal__stage .ugp-wizard-template__preview--large .ugp-wizard-template__connectedcard>span{width:64px;height:64px;font-size:25px}
.ugp-wizard-template-modal__stage[data-preview-page="welcome"] .ugp-wizard-template__mockpage--welcome{display:grid}.ugp-wizard-template-modal__stage[data-preview-page="welcome"] .ugp-wizard-template__mockpage--register,.ugp-wizard-template-modal__stage[data-preview-page="welcome"] .ugp-wizard-template__mockpage--connected{display:none}.ugp-wizard-template-modal__stage[data-preview-page="register"] .ugp-wizard-template__mockpage--welcome,.ugp-wizard-template-modal__stage[data-preview-page="register"] .ugp-wizard-template__mockpage--connected{display:none}.ugp-wizard-template-modal__stage[data-preview-page="register"] .ugp-wizard-template__mockpage--register{display:grid}.ugp-wizard-template-modal__stage[data-preview-page="connected"] .ugp-wizard-template__mockpage--welcome,.ugp-wizard-template-modal__stage[data-preview-page="connected"] .ugp-wizard-template__mockpage--register{display:none}.ugp-wizard-template-modal__stage[data-preview-page="connected"] .ugp-wizard-template__mockpage--connected{display:grid}
.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large{width:360px;height:640px;border-radius:34px}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__mockpage{grid-template-columns:1fr;padding:32px 28px;gap:18px;align-content:end}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__mockcopy{min-height:310px}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__mocklogo{max-width:220px;max-height:92px}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__mocktitle{font-size:36px}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__mockbody{font-size:15px}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__mockaction{width:100%;padding:24px 22px}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__registercard,.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large .ugp-wizard-template__connectedcard{width:100%;padding:26px 22px}.ugp-wizard-template-modal__stage[data-preview-device="mobile"] .ugp-wizard-template__preview--large.ugp-wizard-template__preview--centered .ugp-wizard-template__mockaction{position:static;width:100%}

/* Dashboard session KPI summary 1.0.0.5.2.928 */
.ugp-workspace--dashboard .ugp-dash-card--session-kpis {
  align-self: start;
  padding-bottom: 22px;
}

.ugp-workspace--dashboard .ugp-dash-session-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 20px;
  align-items: stretch;
}

.ugp-workspace--dashboard .ugp-dash-session-kpi {
  min-width: 0;
  display: grid;
  grid-template-rows: 38px auto auto auto;
  align-content: start;
  padding: 0 12px;
  border-left: 1px solid rgba(220, 230, 245, .9);
}

.ugp-workspace--dashboard .ugp-dash-session-kpi:first-child {
  border-left: 0;
  padding-left: 0;
}

.ugp-workspace--dashboard .ugp-dash-session-kpi:last-child {
  padding-right: 0;
}

.ugp-workspace--dashboard .ugp-dash-session-kpi__icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #dce7f7;
  border-radius: 12px;
  background: #f7faff;
  color: #216ff0;
  font-size: .9rem;
}

.ugp-workspace--dashboard .ugp-dash-session-kpi__label {
  display: block;
  min-height: 36px;
  margin-top: 9px;
  color: #667da8;
  font-size: .78rem;
  line-height: 1.25;
  font-weight: 750;
}

.ugp-workspace--dashboard .ugp-dash-session-kpi strong {
  display: block;
  margin-top: 2px;
  color: #082d6d;
  font-size: clamp(1.22rem, 1.5vw, 1.6rem);
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.ugp-workspace--dashboard .ugp-dash-session-kpi small {
  display: block;
  margin-top: 7px;
  color: #7b8fb4;
  font-size: .72rem;
  line-height: 1.3;
}

@media (max-width: 1180px) {
  .ugp-workspace--dashboard .ugp-dash-session-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
  }
  .ugp-workspace--dashboard .ugp-dash-session-kpi:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  .ugp-workspace--dashboard .ugp-dash-session-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* UGC Ultra light hardware thumbnail visibility 1.0.0.5.2.931 */
.ugp-controller-card__model-image.is-ugc-ultra {
  width: min(178px, 100%) !important;
  max-height: 44px !important;
  margin-top: 7px !important;
  padding: 3px 5px !important;
  box-sizing: border-box !important;
  background: #f0f4f8 !important;
  border: 1px solid #dbe4ee !important;
  border-radius: 6px !important;
  filter: contrast(1.18) brightness(.96) drop-shadow(0 4px 6px rgba(9,43,102,.10)) !important;
}
@media (max-width: 980px) {
  .ugp-controller-card__model-image.is-ugc-ultra {
    width: min(156px, 100%) !important;
    max-height: 40px !important;
  }
}


/* Guestrax resource delete confirmation modal 1.0.0.5.2.940 */
.ugp-resource-delete-modal[aria-hidden="true"] {
  display: none;
}
.ugp-resource-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: grid;
  place-items: center;
  padding: 24px;
}
.ugp-resource-delete-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 48, .54);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ugp-resource-delete-modal__dialog {
  position: relative;
  width: min(470px, 100%);
  border: 1px solid #dbe6f4;
  border-radius: 24px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 30px 70px rgba(8, 22, 48, .27);
  display: grid;
  gap: 13px;
  color: #092b61;
}
.ugp-resource-delete-modal__dialog > small {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .18em;
  color: #8798b5;
}
.ugp-resource-delete-modal__dialog h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.025em;
  color: #092b61;
}
.ugp-resource-delete-modal__dialog p {
  margin: 0;
  color: #647a9e;
  line-height: 1.55;
}
.ugp-resource-delete-modal__dialog p strong {
  color: #173e73;
}
.ugp-resource-delete-modal__close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid #d7e3f2;
  border-radius: 999px;
  background: #fff;
  color: #5d7197;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ugp-resource-delete-modal__icon {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background: #fff0ef;
  color: #d92d20;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.ugp-resource-delete-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
.ugp-resource-delete-modal__actions button {
  min-height: 44px;
  border-radius: 13px;
  padding: 0 18px;
  font-weight: 900;
  cursor: pointer;
}
.ugp-resource-delete-modal__cancel {
  border: 1px solid #d4deed;
  background: #fbfdff;
  color: #12366c;
}
.ugp-resource-delete-modal__confirm {
  border: 1px solid #ef9a95;
  background: #d92d20;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ugp-resource-delete-modal__confirm:disabled {
  opacity: .65;
  cursor: wait;
}
body.ugp-resource-delete-modal-open {
  overflow: hidden;
}
@media (max-width: 560px) {
  .ugp-resource-delete-modal {
    padding: 16px;
  }
  .ugp-resource-delete-modal__dialog {
    padding: 24px 20px 20px;
    border-radius: 20px;
  }
  .ugp-resource-delete-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Connections: Controller image rail + runtime strip 1.0.0.5.2.1103 */
.ugp-controller-card {
  position: relative;
  display: block;
  min-height: 132px;
  padding: 0;
  overflow: hidden;
}
.ugp-controller-card.has-controller-image {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  min-height: 174px;
  padding: 0;
}
.ugp-controller-card__image-rail {
  grid-column: 1;
  align-self: stretch;
  display: block;
  width: 148px;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  color: transparent;
  background: #eef5ff;
}
.ugp-controller-card__image-rail img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 174px;
  object-fit: cover;
}
.ugp-controller-card__body {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(124px, auto) auto;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__body {
  grid-column: 2;
}
.ugp-controller-card__main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(0, 2fr) 190px;
  gap: 22px;
  align-items: center;
  padding: 38px 22px 18px 26px;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__main {
  grid-template-columns: minmax(250px, .9fr) minmax(0, 1.85fr) 190px;
  padding-left: 20px;
}
.ugp-controller-card__identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__identity {
  align-self: center;
  align-items: center;
  gap: 0;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__identity > div {
  align-self: center;
  padding: 0;
}
.ugp-controller-card__facts,
.ugp-controller-card__facts--compact {
  min-width: 0;
  align-self: center;
}
.ugp-controller-card__facts--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ugp-controller-card__actions,
.ugp-controller-card.has-controller-image .ugp-controller-card__actions {
  width: auto;
  min-width: 0;
  align-self: center;
  padding: 0;
}
.ugp-controller-card__runtime,
.ugp-controller-card.has-controller-image .ugp-controller-card__runtime,
.ugp-controller-card:not(.has-controller-image) .ugp-controller-card__runtime {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 10px 22px 12px 26px;
  border-top: 1px solid #dce7f5;
  border-radius: 0;
  background: #f7faff;
}
.ugp-controller-card.has-controller-image .ugp-controller-card__runtime {
  padding-left: 20px;
}
.ugp-controller-card__runtime > span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 0 16px;
  border-left: 1px solid #e1e9f5;
  white-space: nowrap;
}
.ugp-controller-card__runtime > span:first-child {
  border-left: 0;
}
.ugp-controller-card__runtime small {
  color: #7387aa;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.ugp-controller-card__runtime strong {
  min-width: 0;
  overflow: hidden;
  color: #0a2d67;
  font-size: .84rem;
  font-weight: 900;
  text-overflow: ellipsis;
}
@media (max-width: 1280px) {
  .ugp-controller-card__main,
  .ugp-controller-card.has-controller-image .ugp-controller-card__main {
    grid-template-columns: minmax(240px, .9fr) minmax(0, 1.45fr) 170px;
  }
  .ugp-controller-card__runtime > span {
    padding: 0 10px;
  }
}
@media (max-width: 980px) {
  .ugp-controller-card.has-controller-image {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .ugp-controller-card__image-rail {
    width: 120px;
  }
  .ugp-controller-card__image-rail img {
    min-height: 100%;
  }
  .ugp-controller-card__main,
  .ugp-controller-card.has-controller-image .ugp-controller-card__main {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 34px 18px 16px;
  }
  .ugp-controller-card__actions,
  .ugp-controller-card.has-controller-image .ugp-controller-card__actions {
    grid-template-columns: 1fr 1fr;
  }
  .ugp-controller-card__runtime,
  .ugp-controller-card.has-controller-image .ugp-controller-card__runtime,
  .ugp-controller-card:not(.has-controller-image) .ugp-controller-card__runtime {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 11px 18px 13px;
  }
  .ugp-controller-card__runtime > span {
    justify-content: flex-start;
    padding: 5px 10px;
  }
  .ugp-controller-card__runtime > span:nth-child(odd) {
    border-left: 0;
  }
}
@media (max-width: 700px) {
  .ugp-controller-card.has-controller-image {
    display: block;
  }
  .ugp-controller-card__image-rail {
    width: 100%;
    height: 150px;
    min-height: 150px;
  }
  .ugp-controller-card__image-rail img {
    min-height: 150px;
  }
}
@media (max-width: 560px) {
  .ugp-controller-card__runtime,
  .ugp-controller-card.has-controller-image .ugp-controller-card__runtime,
  .ugp-controller-card:not(.has-controller-image) .ugp-controller-card__runtime {
    grid-template-columns: 1fr;
  }
  .ugp-controller-card__runtime > span {
    border-left: 0;
    border-top: 1px solid #edf2f9;
  }
  .ugp-controller-card__runtime > span:first-child {
    border-top: 0;
  }
}

/* Connections controller rows v5 1.0.0.5.2.1107
 * Every controller uses the same fixed visual rail so identity content aligns
 * whether a venue image has been configured or the default icon is used. */
.gx-controller-row {
  position: relative;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  overflow: hidden;
  min-height: 168px;
  border: 1px solid #d7e4f4;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 54, 105, .04);
}
.gx-controller-row::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #20b86a;
}
.gx-controller-row.is-attention::before { background: #f0a11a; }
.gx-controller-row__rail {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: #eef5ff;
}
.gx-controller-row__rail.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}
.gx-controller-row__rail.is-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f4fbf7 0%, #edf7ff 100%);
}
.gx-controller-row__rail-placeholder {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(32, 184, 106, .10);
  border-radius: 15px;
  color: #15985c;
  background: #dff7e9;
  box-shadow: 0 8px 18px rgba(22, 96, 71, .06);
}
.gx-controller-row.is-attention .gx-controller-row__rail-placeholder {
  color: #c47a00;
  border-color: rgba(196, 122, 0, .10);
  background: #fff0d5;
}
.gx-controller-row__content {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}
.gx-controller-row__top {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(540px, 2.1fr) 190px;
  gap: 20px;
  align-items: center;
  padding: 38px 22px 15px 20px;
}
.gx-controller-row__identity {
  min-width: 0;
  display: flex;
  align-items: center;
}
.gx-controller-row__identity-copy { min-width: 0; }
.gx-controller-row__identity h3 {
  margin: 0 0 7px;
  color: #071f4e;
  font-size: 1.08rem;
  line-height: 1.1;
  font-weight: 900;
}
.gx-controller-row__identity p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #536f9f;
  font-size: .84rem;
  font-weight: 850;
}
.gx-controller-row__model {
  display: block;
  width: min(132px, 100%);
  max-height: 30px;
  margin-top: 5px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 5px 7px rgba(9, 43, 102, .07));
}
.gx-controller-row__facts {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, .9fr) minmax(155px, .95fr) minmax(72px, .45fr);
  margin: 0;
}
.gx-controller-row__facts > div {
  min-width: 0;
  padding: 0 14px;
}
.gx-controller-row__facts dt {
  margin: 0 0 7px;
  color: #65799f;
  font-size: .72rem;
  font-weight: 850;
}
.gx-controller-row__facts dd {
  margin: 0;
  color: #092b66;
  font-size: .88rem;
  line-height: 1.3;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.gx-controller-row__facts dd a {
  display: inline-flex;
  margin-left: 7px;
  color: #0b63f6;
  vertical-align: -3px;
}
.gx-controller-row__facts dd > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .76rem;
}
.gx-controller-row__facts dd > span.is-good { color: #11824b; background: #dff7e9; }
.gx-controller-row__facts dd > span.is-warn { color: #b46f00; background: #fff0d5; }
.gx-controller-row__facts small {
  display: block;
  margin-top: 5px;
  color: #6d80a5;
  font-size: .75rem;
  font-weight: 650;
}
.gx-controller-row__facts small.is-red { color: #da2c2c; }
.gx-controller-row__actions {
  display: grid;
  gap: 9px;
  align-self: center;
}
.gx-controller-row__actions a,
.gx-controller-row__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 37px;
  padding: 0 13px;
  border: 1px solid #cfe0f7;
  border-radius: 8px;
  color: #0b63f6;
  background: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
  text-decoration: none;
}
.gx-controller-row__actions button { color: #1e3b65; }
.gx-controller-row__metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 26px;
  min-width: 0;
  min-height: 34px;
  padding: 7px 24px 8px 20px;
  border-top: 1px solid #e3ebf6;
  background: linear-gradient(90deg, rgba(247,250,255,.94), rgba(255,255,255,.55));
}
.gx-controller-row__metrics > span {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.gx-controller-row__metrics > span + span::before {
  content: "•";
  position: absolute;
  left: -16px;
  color: #bccae0;
  font-size: .7rem;
}
.gx-controller-row__metrics small {
  color: #7185a8;
  font-size: .69rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}
.gx-controller-row__metrics strong {
  min-width: 0;
  color: #092b66;
  font-size: .82rem;
  font-weight: 900;
}
@media (max-width: 1380px) {
  .gx-controller-row__top {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.8fr) 170px;
    gap: 14px;
  }
  .gx-controller-row__facts > div { padding: 0 10px; }
}
@media (max-width: 1080px) {
  .gx-controller-row { grid-template-columns: 124px minmax(0, 1fr); }
  .gx-controller-row__top {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 38px 18px 15px;
  }
  .gx-controller-row__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-controller-row__facts > div { padding: 7px 10px; }
  .gx-controller-row__actions { grid-template-columns: 1fr 1fr; }
  .gx-controller-row__metrics {
    gap: 6px 22px;
    padding: 8px 18px 9px;
  }
}
@media (max-width: 700px) {
  .gx-controller-row { display: block; }
  .gx-controller-row__rail { height: 150px; min-height: 150px; }
  .gx-controller-row__rail.has-image img { min-height: 150px; }
  .gx-controller-row__rail.is-placeholder { height: 112px; min-height: 112px; }
  .gx-controller-row__metrics {
    gap: 7px 20px;
    padding: 9px 16px 10px;
  }
  .gx-controller-row__metrics > span + span::before { left: -13px; }
}

/* GuestTrax 1.0.0.5.2.1108 - Add Controller modal wizard */
html.gx-controller-wizard-open,
body.gx-controller-wizard-open {
  overflow: hidden !important;
}

.gx-controller-wizard[hidden] {
  display: none !important;
}

.gx-controller-wizard {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .15s ease;
}

.gx-controller-wizard.is-open {
  opacity: 1;
}

.gx-controller-wizard__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(9, 30, 66, .48);
  backdrop-filter: blur(3px);
  cursor: default;
}

.gx-controller-wizard__dialog {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100vw - 48px));
  height: min(836px, calc(100vh - 32px));
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #cfdbf7;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 42, 89, .28);
  transform: translateY(10px) scale(.985);
  transition: transform .16s ease;
}

.gx-controller-wizard.is-open .gx-controller-wizard__dialog {
  transform: translateY(0) scale(1);
}

.gx-controller-wizard__header {
  min-height: 64px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px 10px 20px;
  border-bottom: 1px solid #e1e9fb;
  background: #fff;
}

.gx-controller-wizard__header > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.gx-controller-wizard__header span {
  color: #7890c0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.gx-controller-wizard__header strong {
  color: #0b3477;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 850;
}

.gx-controller-wizard__close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid #d5e0f7;
  border-radius: 12px;
  background: #f8fbff;
  color: #436190;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.gx-controller-wizard__close:hover,
.gx-controller-wizard__close:focus-visible {
  border-color: #9fb8f4;
  background: #eef4ff;
  color: #174fd7;
  outline: none;
}

.gx-controller-wizard__frame {
  display: block;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  border: 0;
  background: #f7faff;
}

.gx-controller-wizard-complete {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 30px;
  box-sizing: border-box;
  color: #0b3477;
  background: #f8fbff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}

.gx-controller-wizard-complete strong {
  font-size: 22px;
}

.gx-controller-wizard-complete span {
  color: #6780b2;
}

@media (max-width: 760px) {
  .gx-controller-wizard {
    padding: 10px;
  }
  .gx-controller-wizard__dialog {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    min-height: 0;
    border-radius: 16px;
  }
  .gx-controller-wizard__header {
    min-height: 56px;
    padding: 8px 10px 8px 14px;
  }
  .gx-controller-wizard__header span {
    display: none;
  }
  .gx-controller-wizard__header strong {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gx-controller-wizard,
  .gx-controller-wizard__dialog {
    transition: none;
  }
}

/* GuestTrax 1.0.0.5.2.1109 - Add Controller wizard required-field cleanup */

/* GuestTrax 1.0.0.5.2.1110 - compact modal height and Controller host/IP input */


/* GuestTrax 1.0.0.5.2.1111 - Test controller loading state */
[data-ugp-test-controller] {
  gap: 8px;
}

.ugp-test-controller__spinner {
  display: none;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: ugpSpin 750ms linear infinite;
}

[data-ugp-test-controller].is-loading .ugp-test-controller__spinner {
  display: inline-block;
}

[data-ugp-test-controller].is-loading {
  cursor: wait;
}

/* GuestTrax 1.0.0.5.2.1112 - Add Controller wizard site footer and retained test credentials */


/* GuestTrax 1.0.0.5.2.1113 - Controller wizard save reliability, balanced credentials and modal headroom */
[data-ugp-save-controller] { gap: 8px; }
[data-ugp-save-controller].is-loading .ugp-test-controller__spinner { display: inline-block; }
[data-ugp-save-controller].is-loading { cursor: wait; }


/* GuestTrax Connections 1.0.0.5.2.1114 / template 0.5.1.10.9.208
   Controller actions, edit modal and licence-limit button state. */
.ugp-disabled-button-wrap {
  display: inline-flex;
  align-items: stretch;
  cursor: not-allowed;
}
.ugp-disabled-button-wrap > .ugp-button[disabled] {
  pointer-events: none;
  opacity: .48;
  filter: grayscale(.16);
  box-shadow: none;
}

.gx-controller-row {
  overflow: visible;
  z-index: 1;
}
.gx-controller-row:has(.gx-controller-action-menu[open]) {
  z-index: 40;
}
.gx-controller-row__rail {
  border-radius: 14px 0 0 14px;
}
.gx-controller-row__content {
  position: relative;
  z-index: 2;
  border-radius: 0 14px 14px 0;
  background: #fff;
}
.gx-controller-row__actions {
  position: relative;
  z-index: 12;
}
.gx-controller-action-menu {
  position: relative;
  min-width: 0;
}
.gx-controller-action-menu > summary {
  list-style: none;
  width: 100%;
  min-height: 37px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid #cfe0f7;
  border-radius: 8px;
  color: #1e3b65;
  background: #fff;
  font-size: .8rem;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}
.gx-controller-action-menu > summary::-webkit-details-marker {
  display: none;
}
.gx-controller-action-menu > summary::marker {
  content: "";
}
.gx-controller-action-menu[open] > summary,
.gx-controller-action-menu > summary:hover,
.gx-controller-action-menu > summary:focus-visible {
  border-color: #a9c6ef;
  background: #f7faff;
  color: #0b63f6;
  outline: none;
}
.gx-controller-action-menu__panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 7px);
  right: 0;
  width: 205px;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid #d7e4f4;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(18, 52, 102, .18);
}
.gx-controller-row__actions .gx-controller-action-menu__panel button {
  width: 100%;
  min-height: 38px;
  justify-content: flex-start;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: #24466f;
  background: transparent;
  box-shadow: none;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.gx-controller-row__actions .gx-controller-action-menu__panel button:hover,
.gx-controller-row__actions .gx-controller-action-menu__panel button:focus-visible {
  background: #f0f6ff;
  color: #0b63f6;
  outline: none;
}
.gx-controller-row__actions .gx-controller-action-menu__panel button.is-remove {
  color: #b53d47;
}
.gx-controller-row__actions .gx-controller-action-menu__panel button.is-remove:hover,
.gx-controller-row__actions .gx-controller-action-menu__panel button.is-remove:focus-visible {
  color: #a3222f;
  background: #fff1f2;
}
.gx-controller-row__actions .gx-controller-action-menu__panel button.is-syncing {
  opacity: .62;
  cursor: wait;
}
.gx-controller-row__actions .gx-controller-action-menu__panel button.is-syncing .ugp-fa-icon {
  animation: ugp-connection-spin .75s linear infinite;
}

@media (max-width: 700px) {
  .gx-controller-row__rail {
    border-radius: 14px 14px 0 0;
  }
  .gx-controller-row__content {
    border-radius: 0 0 14px 14px;
  }
  .gx-controller-action-menu__panel {
    right: 0;
    left: auto;
    width: min(220px, calc(100vw - 48px));
  }
}

/* GuestTrax controller action confirmation and result popup */
html.gx-controller-action-dialog-open,
body.gx-controller-action-dialog-open {
  overflow: hidden;
}
.gx-controller-action-dialog[hidden] {
  display: none !important;
}
.gx-controller-action-dialog {
  position: fixed;
  z-index: 10080;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(14, 30, 55, .48);
  opacity: 0;
  transition: opacity .16s ease;
}
.gx-controller-action-dialog.is-open {
  opacity: 1;
}
.gx-controller-action-dialog__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.gx-controller-action-dialog__panel {
  position: relative;
  z-index: 1;
  width: min(470px, calc(100vw - 36px));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 20px;
  padding: 26px;
  border: 1px solid #d8e5f4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(12, 35, 69, .28);
  transform: translateY(8px) scale(.985);
  transition: transform .16s ease;
}
.gx-controller-action-dialog.is-open .gx-controller-action-dialog__panel {
  transform: translateY(0) scale(1);
}
.gx-controller-action-dialog__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #68809f;
  background: transparent;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.gx-controller-action-dialog__close:hover,
.gx-controller-action-dialog__close:focus-visible {
  color: #17395f;
  background: #f0f6fd;
  outline: none;
}
.gx-controller-action-dialog__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #1769e0;
  background: #edf5ff;
  font-size: 1.45rem;
}
.gx-controller-action-dialog.is-success .gx-controller-action-dialog__icon {
  color: #148152;
  background: #eaf8f1;
}
.gx-controller-action-dialog.is-error .gx-controller-action-dialog__icon,
.gx-controller-action-dialog.is-danger .gx-controller-action-dialog__icon {
  color: #b83b48;
  background: #fff0f2;
}
.gx-controller-action-dialog.is-busy .gx-controller-action-dialog__icon {
  color: #1769e0;
  background: #edf5ff;
}
.gx-controller-action-dialog__copy {
  min-width: 0;
  padding: 1px 28px 0 0;
}
.gx-controller-action-dialog__copy > span {
  display: block;
  margin-bottom: 4px;
  color: #7190b5;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gx-controller-action-dialog__copy > strong {
  display: block;
  color: #17395f;
  font-size: 1.14rem;
  font-weight: 900;
  line-height: 1.25;
}
.gx-controller-action-dialog__copy > p {
  margin: 8px 0 0;
  color: #58708e;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.55;
}
.gx-controller-action-dialog__footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid #edf2f8;
}
.gx-controller-action-dialog__footer.is-result {
  justify-content: flex-end;
}
.gx-controller-action-dialog__footer .ugp-button {
  min-width: 112px;
  justify-content: center;
}
.gx-controller-action-dialog__footer .ugp-button.is-danger {
  border-color: #b73543;
  background: #b73543;
  color: #fff;
}
.gx-controller-action-dialog__footer .ugp-button.is-danger:hover,
.gx-controller-action-dialog__footer .ugp-button.is-danger:focus-visible {
  border-color: #9e2835;
  background: #9e2835;
  color: #fff;
}
@media (max-width: 560px) {
  .gx-controller-action-dialog {
    padding: 16px;
  }
  .gx-controller-action-dialog__panel {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 13px;
    padding: 22px 20px 20px;
  }
  .gx-controller-action-dialog__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.2rem;
  }
  .gx-controller-action-dialog__copy {
    padding-right: 22px;
  }
  .gx-controller-action-dialog__footer {
    flex-direction: column-reverse;
  }
  .gx-controller-action-dialog__footer .ugp-button {
    width: 100%;
  }
}

/* GÆST frontend brand generation 1.0.0.5.2.1132 */