/* Figma client portal shell */
.portal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  color: #171a2b;
  background: #f8f9fc;
  font-family: Inter, Geist, Montserrat, sans-serif;
}

/* Successful connections: recipient-style stacked rows on small screens. */
@media (max-width:900px) {
  .react-security-table.successful-logins { overflow:visible!important; }
  .react-security-table.successful-logins .react-security-head { display:none!important; }
  .react-security-table.successful-logins .react-security-row {
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    min-width:0!important;
    padding:14px!important;
    border-bottom:1px solid #e6e9f0;
  }
  .react-security-table.successful-logins .react-security-row > span {
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    min-width:0!important;
    overflow:visible!important;
    white-space:normal!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  .react-security-table.successful-logins .react-security-row > span::before {
    content:attr(data-label);
    color:#9299ad;
    font-size:10px;
    font-weight:700;
  }
  .react-security-table.successful-logins .react-connection-date {
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
  }
  .react-security-table.successful-logins .react-connection-date > i { display:none!important; }
}

.portal .sidebar {
  position: sticky;
  top: 0;
  width: 260px;
  height: 100vh;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: #19191a;
  color: #ffffff;
}
.portal .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
}
.portal .portal-logo-mark {
  width: 21.262px;
  height: 24.134px;
  object-fit: contain;
}
.portal .portal-logo-wordmark {
  width: 65.737px;
  height: 12.576px;
  object-fit: contain;
}
.portal .pill {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 32px;
  padding: 0;
  border: 0;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 0;
}
.portal .pill span {
  width: 8px;
  height: 8px;
  background: #18b66a;
  box-shadow: none;
}
.portal .portal-nav {
  display: grid;
  gap: 4px;
  width: 100%;
}
.portal .portal-nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: transparent;
  text-align: left;
  font: 400 14px/1 Geist, sans-serif;
  cursor: pointer;
}
.portal .portal-nav button:hover,
.portal .portal-nav button.active {
  background: #6831e2;
}
.portal .portal-nav .material-symbols-outlined {
  font-size: 16px;
}
.portal .sidebar-footer {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  padding-top: 12px;
  border-top: 1px solid #424242;
  color: #9299ad;
  font-size: 10px;
}
.portal .workspace {
  min-width: 0;
  max-width: none;
  padding: 0;
  background: #f8f9fc;
}
.portal .tenant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 16px 32px;
  border: 0;
  border-bottom: 1px solid #e6e9f0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}
.portal .tenant-header h2 {
  margin: 0 0 2px;
  color: #171a2b;
  font: 700 18px/1 Inter, sans-serif;
}
.portal .tenant-header p,
.portal .muted {
  color: #5f6780;
  font: 400 12px/1.3 Inter, sans-serif;
}
.portal .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.portal .header-actions .ghost {
  min-height: 32px;
  padding: 8px 14px;
  border: 1px solid #e6e9f0;
  border-radius: 8px;
  color: #5f6780;
  background: #ffffff;
  box-shadow: none;
  font: 600 13px/1 Inter, sans-serif;
}
.portal .header-actions #dashboardLink {
  color: #ffffff;
  background: #6831e2;
  border-color: #6831e2;
}
.portal .portal-page-heading {
  padding: 24px 32px 0;
}
.portal .portal-page-heading h1 {
  margin: 0 0 4px;
  color: #171a2b;
  font: 700 24px/1.2 Geist, sans-serif;
}
.portal .portal-page-heading p {
  margin: 0;
  color: #5f6780;
  font: 400 14px/1.3 Inter, sans-serif;
}
#portalView[data-portal-view] .workspace > section {
  display: none;
}
#portalView[data-portal-view="overview"] .workspace > section[data-portal-section~="overview"],
#portalView[data-portal-view="security"] .workspace > section[data-portal-section~="security"],
#portalView[data-portal-view="servers"] .workspace > section[data-portal-section~="servers"],
#portalView[data-portal-view="provisioning"] .workspace > section[data-portal-section~="provisioning"] {
  display: block;
}
.portal .access-panels,
.portal #adminOverview {
  display: none !important;
}
.portal .workspace > section[data-portal-section] {
  margin: 24px 32px 0;
}
.portal .card,
.portal .admin-kpis {
  border: 1px solid #e6e9f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
}
.portal .facts {
  display: grid;
  gap: 16px;
}
.portal .facts div {
  border: 0;
  border-radius: 10px;
  background: #f3f5f9;
}
.portal .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.portal .split > * {
  min-width: 0;
}
.portal .table-toolbar {
  border-bottom: 1px solid #e6e9f0;
  background: #ffffff;
}
.portal table {
  color: #171a2b;
}
.portal th {
  color: #5f6780;
  background: #f3f5f9;
}
.portal td {
  border-color: #e6e9f0;
}
.portal .primary {
  border-radius: 8px;
  color: #ffffff;
  background: #6831e2;
}
@media (max-width: 900px) {
  .portal {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .portal .sidebar {
    width: 76px;
    padding: 16px 12px;
  }
  .portal .sidebar .portal-logo-wordmark,
  .portal .sidebar .pill,
  .portal .portal-nav button > span:last-child,
  .portal .sidebar-footer {
    display: none;
  }
  .portal .portal-nav button {
    justify-content: center;
    padding: 10px;
  }
  .portal .tenant-header {
    padding: 14px 18px;
  }
  .portal .header-actions > a:not(#dashboardLink),
  .portal .header-actions .notification-button {
    display: none;
  }
  .portal .portal-page-heading,
  .portal .workspace > section[data-portal-section] {
    margin-right: 18px;
    margin-left: 18px;
    padding-right: 0;
    padding-left: 0;
  }
  .portal .split {
    grid-template-columns: 1fr;
  }
}.portal.has-drawer .workspace { padding-right: 360px; }
.portal-server-drawer {
  position: fixed;
  z-index: 20;
  top: 66px;
  right: 0;
  bottom: 0;
  width: 360px;
  overflow-y: auto;
  border-left: 1px solid #e6e9f0;
  background: #ffffff;
  box-shadow: -12px 0 32px rgba(23, 26, 43, 0.08);
  transform: translateX(100%);
  transition: transform 180ms ease;
}
.portal-server-drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 20px 18px;
  border-bottom: 1px solid #e6e9f0;
}
.drawer-header h2 { margin: 0 0 4px; color: #171a2b; font: 700 18px/1.2 Inter, sans-serif; }
.drawer-header p { margin: 0; color: #5f6780; font: 400 12px/1.2 Inter, sans-serif; }
.drawer-close {
  border: 0;
  color: #e5484d;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.drawer-content { padding: 20px; }
.drawer-content dl { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px 16px; margin: 0 0 24px; }
.drawer-content dt { color: #5f6780; font: 600 12px/1 Inter, sans-serif; }
.drawer-content dd { margin: 0; color: #171a2b; text-align: right; font: 400 12px/1.2 Inter, sans-serif; }
.drawer-content h3 { margin: 20px 0 12px; color: #171a2b; font: 700 14px/1.2 Inter, sans-serif; }
.drawer-status-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px 0; padding: 14px; border: 1px solid #e6e9f0; border-radius: 10px; background: #f8f9fc; }
.drawer-status-card strong { color: #171a2b; font: 600 13px/1.2 Inter, sans-serif; }
.drawer-status-card span { font: 600 11px/1.2 Inter, sans-serif; }
.drawer-status-card small { grid-column: 1 / -1; color: #9299ad; font: 400 11px/1.4 Inter, sans-serif; }
.status-active { color: #18b66a; }
.drawer-activity { display: grid; gap: 10px; margin: 0; padding-left: 18px; color: #5f6780; font: 400 12px/1.4 Inter, sans-serif; }
.drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
.drawer-actions button { min-height: 36px; padding: 8px 10px; border-radius: 8px; border: 1px solid #e6e9f0; background: #fff; color: #5f6780; font: 600 12px/1 Inter, sans-serif; cursor: pointer; }
.drawer-actions .primary { border-color: #6831e2; background: #6831e2; color: #fff; }
.drawer-actions .danger { border-color: #e5484d; color: #e5484d; }
@media (max-width: 900px) {
  .portal-server-drawer { width: min(360px, calc(100vw - 76px)); }
  .portal.has-drawer .workspace { padding-right: 0; }
}/* Figma overview layout */
.portal-overview-layout { display: block; margin: 32px; }
.portal-overview-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.portal-kpi-card { min-width: 0; min-height: 94px; padding: 18px; border-radius: 12px; background: #fff; }
.portal-kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #5f6780; font: 600 12px/1.2 Inter, sans-serif; }
.portal-kpi-card strong { display: block; margin-top: 8px; color: #171a2b; font: 700 28px/1 Inter, sans-serif; }
.portal-status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }
.portal-status-dot.green { background: #18b66a; } .portal-status-dot.red { background: #e5484d; } .portal-status-dot.orange { background: #f59e0b; } .portal-status-dot.blue { background: #2563eb; }
.portal-overview-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.portal-overview-panels > section { display: block !important; min-width: 0; margin: 0 !important; padding: 24px; border: 1px solid #e6e9f0; border-radius: 16px; background: #fff; }
.portal-overview-panels .table-toolbar { padding: 0 0 20px; border: 0; }
.portal-overview-panels .table-toolbar h3, .portal-overview-panels .section-title { color: #171a2b; font: 600 16px/1.2 Inter, sans-serif; }
.portal-overview-panels .table-toolbar p { color: #9299ad; font: 400 12px/1.3 Inter, sans-serif; }
.portal-overview-panels .facts { gap: 12px; }
.portal-overview-panels .agent-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-overview-panels .agent-stats div { min-width: 0; padding: 12px; border: 0; border-radius: 10px; background: #f3f5f9; }
.portal-overview-panels .agent-stats div strong { display: block; color: #5f6780; font: 400 12px/1.2 Inter, sans-serif; }
.portal-overview-panels .agent-stats div span { display: block; margin-top: 4px; color: #18b66a; font: 700 20px/1 Inter, sans-serif; }
.portal-overview-panels #agentStats div:nth-child(2) span { color: #e5484d; } .portal-overview-panels #agentStats div:nth-child(3) span { color: #9299ad; }
.portal-overview-panels #consumptionStats { display: grid; gap: 12px; }
.portal-overview-panels #consumptionStats div { display: flex; align-items: center; justify-content: space-between; min-height: 39px; padding: 10px 14px; border: 1px solid #e6e9f0; border-radius: 8px; background: #fff; }
.portal-overview-panels #consumptionStats div strong { color: #5f6780; font: 500 13px/1.2 Inter, sans-serif; }
.portal-overview-panels #consumptionStats div span { color: #171a2b; font: 600 14px/1.2 Inter, sans-serif; }
#portalView[data-portal-view="overview"] .portal-overview-layout { display: block; }
#portalView[data-portal-view="overview"] .workspace > section[data-portal-section] { display: none; }
#portalView[data-portal-view]:not([data-portal-view="overview"]) .portal-overview-layout { display: none; }
@media (max-width: 1100px) { .portal-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-overview-panels { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .portal-overview-layout { margin: 20px 18px; } .portal-overview-panels .agent-stats { grid-template-columns: 1fr; } }
#reactPortalRoot.hidden { display: none; }
.react-portal { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh; color:#171a2b; background:#f8f9fc; font-family:Inter, sans-serif; }
.react-sidebar { display:flex; flex-direction:column; gap:32px; box-sizing:border-box; width:260px; min-height:100vh; padding:24px; color:#fff; background:#19191a; }
.react-brand { display:flex; align-items:center; gap:10px; } .react-brand img:first-child { width:21px; height:24px; } .react-brand img:last-child { width:66px; height:auto; }
.react-portal-pill { display:flex; align-items:center; gap:6px; margin-top:-22px; color:#fff; font-size:12px; } .react-portal-pill i { width:8px; height:8px; border-radius:50%; background:#18b66a; }
.react-sidebar nav { display:grid; gap:4px; } .react-sidebar nav button { display:flex; align-items:center; gap:12px; min-height:40px; padding:10px 12px; border:0; border-radius:8px; color:#fff; background:transparent; text-align:left; font:400 14px Geist,sans-serif; cursor:pointer; } .react-sidebar nav button.active,.react-sidebar nav button:hover { background:#6831e2; }
.react-sidebar nav .material-symbols-outlined { font-size:16px; } .react-sidebar footer { margin-top:auto; padding-top:12px; border-top:1px solid #424242; color:#9299ad; font-size:10px; }
.react-main { min-width:0; } .react-header { display:flex; align-items:center; justify-content:space-between; min-height:66px; box-sizing:border-box; padding:16px 32px; border-bottom:1px solid #e6e9f0; background:#fff; } .react-header b { display:block; color:#171a2b; font-size:18px; } .react-header small { display:block; margin-top:2px; color:#5f6780; font-size:12px; } .react-actions { display:flex; gap:12px; align-items:center; } .react-actions button { min-height:32px; padding:8px 14px; border:1px solid #e6e9f0; border-radius:8px; color:#5f6780; background:#fff; font-weight:600; cursor:pointer; } .react-actions .react-primary { color:#fff; background:#6831e2; border-color:#6831e2; }
.react-content { padding:24px 32px 48px; } .react-content > h1 { margin:0 0 4px; font:700 24px/1.2 Geist,sans-serif; } .react-description,.react-muted { margin:0 0 32px; color:#5f6780; font-size:14px; } .react-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; } .react-kpi { min-height:94px; padding:18px; border-radius:12px; background:#fff; } .react-kpi-label { display:flex; justify-content:space-between; color:#5f6780; font-size:12px; font-weight:600; } .react-kpi strong { display:block; margin-top:8px; font-size:28px; } .react-dot,.react-portal-pill i { width:8px; height:8px; border-radius:50%; background:#9299ad; } .react-dot.green { background:#18b66a; } .react-dot.red { background:#e5484d; } .react-dot.orange { background:#f59e0b; } .react-dot.blue { background:#2563eb; }
.react-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .react-card { padding:24px; border:1px solid #e6e9f0; border-radius:16px; background:#fff; } .react-card h3 { margin:0 0 4px; font-size:16px; } .react-status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; } .react-status-grid div { padding:12px; border-radius:10px; background:#f3f5f9; } .react-status-grid span { display:block; color:#5f6780; font-size:12px; } .react-status-grid strong { display:block; margin-top:4px; font-size:20px; } .green-text { color:#18b66a; } .red-text { color:#e5484d; } .muted-text { color:#9299ad; }
.react-threshold { padding:16px; border:1px solid #e6e9f0; border-radius:12px; } .react-threshold b { display:block; font-size:12px; } .react-threshold-row { display:flex; gap:12px; margin:12px 0; } .react-threshold select,.react-form-card input,.react-form-card select { flex:1; min-height:36px; padding:8px 12px; border:1px solid #e6e9f0; border-radius:8px; background:#fff; } .react-primary { min-height:36px; padding:8px 16px; border:0; border-radius:8px; color:#fff; background:#6831e2; cursor:pointer; } .react-threshold small { color:#5f6780; font-size:11px; }
.react-consumption { display:grid; gap:12px; margin-top:20px; } .react-consumption div,.react-security-summary div { display:flex; justify-content:space-between; padding:10px 14px; border:1px solid #e6e9f0; border-radius:8px; font-size:13px; } .react-consumption span,.react-security-summary span { color:#5f6780; } .react-consumption em { padding:4px 8px; border-radius:6px; color:#18b66a; background:#eafbf0; font-size:11px; font-style:normal; font-weight:600; }
.react-table-card table { width:100%; margin-top:20px; border-collapse:collapse; font-size:13px; } .react-table-card th,.react-table-card td { padding:12px 10px; border-bottom:1px solid #e6e9f0; text-align:left; } .react-table-card th { color:#5f6780; background:#f3f5f9; font-size:11px; text-transform:uppercase; } .react-form-card { display:grid; gap:14px; max-width:520px; } .react-form-card h3,.react-form-card p { margin:0; } .react-error { color:#e5484d; }
.react-security-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; } .react-security-summary strong { font-size:20px; }
@media(max-width:1100px) { .react-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .react-panels { grid-template-columns:1fr; } }
@media(max-width:700px) { .react-portal { grid-template-columns:76px minmax(0,1fr); } .react-sidebar { width:76px; padding:16px 12px; } .react-brand img:last-child,.react-portal-pill,.react-sidebar footer,.react-sidebar nav button:not(.active)::after { display:none; } .react-sidebar nav button { justify-content:center; padding:10px; } .react-header { padding:14px 18px; } .react-actions button:not(.react-primary) { display:none; } .react-content { padding:20px 18px; } .react-kpis { gap:10px; } .react-panels { gap:16px; } }
#reactPortalRoot.hidden { display: none; }
.react-auth { display:grid; grid-template-columns:60% 40%; min-height:100vh; background:#fff; font-family:Inter, sans-serif; } .react-auth-left { position:relative; overflow:hidden; padding:58px 7%; color:#fff; background:#130943; } .react-auth-brand { display:flex; align-items:center; gap:10px; } .react-auth-brand img:first-child { width:24px; } .react-auth-brand img:last-child { width:78px; } .react-auth-left h1 { margin:42px 0 24px; font:700 clamp(42px,4vw,64px)/1.18 Geist,sans-serif; } .react-auth-left p { max-width:650px; font-size:18px; line-height:1.45; } .react-auth-laptop { position:absolute; right:-6%; bottom:-2%; width:82%; max-width:820px; } .react-auth-panel { display:grid; place-items:center; padding:40px; } .react-auth-form { width:min(100%,420px); text-align:center; } .react-auth-form h2 { margin:0 0 22px; color:#303030; font-size:28px; } .react-auth-form p { color:#424242; } .react-auth-form p button { border:0; color:#6831e2; background:none; cursor:pointer; } .react-auth-form form { display:grid; gap:12px; margin-top:18px; } .react-auth-form input,.react-auth-form select { min-height:48px; padding:0 14px; border:1px solid #d1d1d1; border-radius:8px; background:#fff; font:14px Inter,sans-serif; } .react-auth-form .react-primary { min-height:48px; margin-top:16px; } .react-google { width:100%; min-height:48px; border:1px solid #d1d1d1; border-radius:8px; background:#fff; cursor:pointer; } .react-or { display:flex; align-items:center; gap:12px; margin:24px 0 8px; color:#666; } .react-or::before,.react-or::after { content:""; height:1px; flex:1; background:#eee; }
.react-portal { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh; color:#171a2b; background:#f8f9fc; font-family:Inter, sans-serif; }
.react-sidebar { display:flex; flex-direction:column; gap:32px; box-sizing:border-box; width:260px; min-height:100vh; padding:24px; color:#fff; background:#19191a; }
.react-brand { display:flex; align-items:center; gap:10px; } .react-brand img:first-child { width:21px; height:24px; } .react-brand img:last-child { width:66px; height:auto; }
.react-portal-pill { display:flex; align-items:center; gap:6px; margin-top:-22px; color:#fff; font-size:12px; } .react-portal-pill i { width:8px; height:8px; border-radius:50%; background:#18b66a; }
.react-sidebar nav { display:grid; gap:4px; } .react-sidebar nav button { display:flex; align-items:center; gap:12px; min-height:40px; padding:10px 12px; border:0; border-radius:8px; color:#fff; background:transparent; text-align:left; font:400 14px Geist,sans-serif; cursor:pointer; } .react-sidebar nav button.active,.react-sidebar nav button:hover { background:#6831e2; }
.react-sidebar nav .material-symbols-outlined { font-size:16px; } .react-sidebar footer { margin-top:auto; padding-top:12px; border-top:1px solid #424242; color:#9299ad; font-size:10px; }
.react-main { min-width:0; } .react-header { display:flex; align-items:center; justify-content:space-between; min-height:66px; box-sizing:border-box; padding:16px 32px; border-bottom:1px solid #e6e9f0; background:#fff; } .react-header b { display:block; color:#171a2b; font-size:18px; } .react-header small { display:block; margin-top:2px; color:#5f6780; font-size:12px; } .react-actions { display:flex; gap:12px; align-items:center; } .react-actions button { min-height:32px; padding:8px 14px; border:1px solid #e6e9f0; border-radius:8px; color:#5f6780; background:#fff; font-weight:600; cursor:pointer; } .react-actions .react-primary { color:#fff; background:#6831e2; border-color:#6831e2; }
.react-content { padding:24px 32px 48px; } .react-content > h1 { margin:0 0 4px; font:700 24px/1.2 Geist,sans-serif; } .react-description,.react-muted { margin:0 0 32px; color:#5f6780; font-size:14px; } .react-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; } .react-kpi { min-height:94px; padding:18px; border-radius:12px; background:#fff; } .react-kpi-label { display:flex; justify-content:space-between; color:#5f6780; font-size:12px; font-weight:600; } .react-kpi strong { display:block; margin-top:8px; font-size:28px; } .react-dot,.react-portal-pill i { width:8px; height:8px; border-radius:50%; background:#9299ad; } .react-dot.green { background:#18b66a; } .react-dot.red { background:#e5484d; } .react-dot.orange { background:#f59e0b; } .react-dot.blue { background:#2563eb; }
.react-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .react-card { padding:24px; border:1px solid #e6e9f0; border-radius:16px; background:#fff; } .react-card h3 { margin:0 0 4px; font-size:16px; } .react-status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; } .react-status-grid div { padding:12px; border-radius:10px; background:#f3f5f9; } .react-status-grid span { display:block; color:#5f6780; font-size:12px; } .react-status-grid strong { display:block; margin-top:4px; font-size:20px; } .green-text { color:#18b66a; } .red-text { color:#e5484d; } .muted-text { color:#9299ad; }
.react-threshold { padding:16px; border:1px solid #e6e9f0; border-radius:12px; } .react-threshold b { display:block; font-size:12px; } .react-threshold-row { display:flex; gap:12px; margin:12px 0; } .react-threshold select,.react-form-card input,.react-form-card select { flex:1; min-height:36px; padding:8px 12px; border:1px solid #e6e9f0; border-radius:8px; background:#fff; } .react-primary { min-height:36px; padding:8px 16px; border:0; border-radius:8px; color:#fff; background:#6831e2; cursor:pointer; } .react-threshold small { color:#5f6780; font-size:11px; }
.react-consumption { display:grid; gap:12px; margin-top:20px; } .react-consumption div,.react-security-summary div { display:flex; justify-content:space-between; padding:10px 14px; border:1px solid #e6e9f0; border-radius:8px; font-size:13px; } .react-consumption span,.react-security-summary span { color:#5f6780; } .react-consumption em { padding:4px 8px; border-radius:6px; color:#18b66a; background:#eafbf0; font-size:11px; font-style:normal; font-weight:600; }
.react-table-card table { width:100%; margin-top:20px; border-collapse:collapse; font-size:13px; } .react-table-card th,.react-table-card td { padding:12px 10px; border-bottom:1px solid #e6e9f0; text-align:left; } .react-table-card th { color:#5f6780; background:#f3f5f9; font-size:11px; text-transform:uppercase; } .react-form-card { display:grid; gap:14px; max-width:520px; } .react-form-card h3,.react-form-card p { margin:0; } .react-error { color:#e5484d; }
.react-security-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; } .react-security-summary strong { font-size:20px; }
@media(max-width:1100px) { .react-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .react-panels { grid-template-columns:1fr; } }
@media(max-width:700px) { .react-auth { grid-template-columns:1fr; } .react-auth-left { min-height:310px; padding:32px 24px; } .react-auth-left h1 { margin:28px 0 14px; font-size:36px; } .react-auth-left p { font-size:14px; } .react-auth-laptop { right:-14%; bottom:-12%; width:72%; } .react-auth-panel { padding:32px 24px; } .react-portal { grid-template-columns:76px minmax(0,1fr); } .react-sidebar { width:76px; padding:16px 12px; } .react-brand img:last-child,.react-portal-pill,.react-sidebar footer,.react-sidebar nav button:not(.active)::after { display:none; } .react-sidebar nav button { justify-content:center; padding:10px; } .react-header { padding:14px 18px; } .react-actions button:not(.react-primary) { display:none; } .react-content { padding:20px 18px; } .react-kpis { gap:10px; } .react-panels { gap:16px; } }

/* Auth Figma 21496:25925 / 21496:24840 */
.react-auth.react-auth{box-sizing:border-box;display:grid;grid-template-columns:minmax(520px,46.25%) minmax(600px,53.75%);min-height:100vh;padding:24px;background:#fff;color:#181818;font-family:Inter,Arial,sans-serif}
.react-auth.react-auth *{box-sizing:border-box}
.react-auth .react-auth-panel{display:block;padding:41px 48px 30px 48px;min-width:0}
.react-auth .react-auth-brand{display:flex;align-items:center;gap:9px;height:31px}
.react-auth .react-auth-brand img:first-child{width:29px;height:29px}.react-auth .react-auth-brand img:last-child{width:99px;height:auto}
.react-auth-copy{margin-top:31px}.react-auth-copy h1{margin:0;color:#171717;font:700 32px/1.12 Geist,Inter,sans-serif;letter-spacing:-.65px}.react-auth-copy p{width:460px;max-width:100%;margin:15px 0 0;color:#303030;font:400 14px/1.42 Inter,sans-serif}
.react-auth .react-auth-form{width:100%;max-width:585px;margin-top:36px;text-align:left}.react-auth .react-auth-form h2{margin:0 0 29px;color:#202020;font:600 17px/1.2 Inter,sans-serif}
.auth-socials{display:grid;grid-template-columns:1fr 1fr;gap:16px}.auth-socials button{display:flex;align-items:center;justify-content:center;gap:9px;height:55px;border:1px solid #dedede;border-radius:10px;background:#fff;color:#191919;font:500 14px Inter,sans-serif;cursor:pointer}.auth-socials button img{display:block;width:18px;height:18px;object-fit:contain}
.react-auth .react-or{display:flex;align-items:center;gap:18px;margin:19px 0;color:#202020;font-size:12px;text-align:center}.react-auth .react-or:before,.react-auth .react-or:after{content:"";height:1px;flex:1;background:#dfdfdf}
.react-auth .react-auth-form form{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;margin:0}.react-auth .react-auth-form form.auth-login{grid-template-columns:1fr}.auth-field{display:grid;gap:10px;color:#171717;font:500 13px/1 Inter,sans-serif}.auth-input-wrap{position:relative}.react-auth .auth-field input,.react-auth .auth-field select{width:100%;height:55px;min-height:0;padding:0 16px;border:0;border-radius:10px;outline:0;background:#f2f2f2;color:#171717;font:400 14px Inter,sans-serif}.auth-field select{appearance:auto;color:#8d8d8d}.auth-input-wrap input{padding-right:48px}.auth-eye{position:absolute;right:10px;top:50%;display:grid;place-items:center;width:34px;height:34px;padding:0;transform:translateY(-50%);border:0;background:transparent;color:#111;cursor:pointer}.auth-eye .material-symbols-outlined{font-size:21px;font-weight:400}
.auth-submit{grid-column:1/-1;height:57px;margin-top:0;border:0;border-radius:10px;background:#aa99f7;color:#fff;font:600 14px Inter,sans-serif;cursor:pointer}.auth-submit:disabled{opacity:.7}.auth-switch{margin:20px 0 0!important;text-align:center;color:#353535!important;font-size:12px}.auth-switch button{padding:0;border:0;background:none;color:#111!important;font-weight:700;cursor:pointer}.react-error{margin:12px 0 0!important;color:#c52b2b!important;text-align:center;font-size:12px}
.auth-notice{margin:14px 0 0!important;padding:11px 13px;border-radius:8px;background:#ecfdf3;color:#16794a!important;text-align:center;font-size:12px;line-height:1.45}
.react-auth-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 48px);overflow:hidden;border-radius:20px;background:radial-gradient(circle at 74% 18%,#242060 0,transparent 34%),radial-gradient(circle at 22% 85%,#123e40 0,transparent 40%),#090d19;color:#e7e9ff}.auth-terminal-glow{position:absolute;inset:-40%;background:conic-gradient(from 140deg,transparent,#6848e7,transparent 24%,#1ac789,transparent 48%);filter:blur(75px);opacity:.24;animation:auth-terminal-glow 10s linear infinite}.auth-terminal{position:relative;z-index:1;width:min(78%,620px);overflow:hidden;border:1px solid rgba(187,176,255,.3);border-radius:14px;background:rgba(7,13,28,.88);box-shadow:0 28px 80px rgba(0,0,0,.45),0 0 44px rgba(104,72,231,.14);backdrop-filter:blur(10px)}.auth-terminal header{display:flex;align-items:center;gap:12px;height:42px;padding:0 15px;border-bottom:1px solid rgba(196,200,242,.12);background:rgba(255,255,255,.04);color:#aab1d2;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.auth-terminal-dots{display:flex;gap:6px}.auth-terminal-dots i{width:8px;height:8px;border-radius:50%;background:#ff6f7d}.auth-terminal-dots i:nth-child(2){background:#f2bd55}.auth-terminal-dots i:nth-child(3){background:#45d294}.auth-terminal-body{display:grid;gap:14px;min-height:294px;padding:28px 30px;font:500 14px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace}.auth-terminal-body p{margin:0;opacity:0;transform:translateY(5px);animation:auth-terminal-line .45s ease forwards}.auth-terminal-body .command{color:#c7c1ff}.auth-terminal-body .success{color:#64e6ae}.auth-terminal-body .info{color:#7eaeff}.auth-terminal-body .muted{color:#8d96b9;font-size:12px}.auth-terminal-body .delay-1{animation-delay:.55s}.auth-terminal-body .delay-2{animation-delay:1.1s}.auth-terminal-body .delay-3{animation-delay:1.7s}.auth-terminal-body .delay-4{animation-delay:2.2s}.auth-terminal-body .delay-5{animation-delay:2.8s}.auth-terminal-body .typing::after{content:"";display:inline-block;width:8px;height:16px;margin-left:5px;vertical-align:-3px;background:#c7c1ff;animation:auth-terminal-cursor .8s step-end infinite}.auth-visual-copy{position:absolute;z-index:1;right:8%;bottom:9%;left:8%;display:grid;gap:10px}.auth-visual-copy span{color:#8e82f6;font:700 10px/1 Inter,Arial,sans-serif;letter-spacing:.13em}.auth-visual-copy strong{color:#fff;font:600 28px/1.1 Geist,Inter,sans-serif}.auth-visual-copy p{max-width:390px;margin:0;color:#aab1d2;font:400 14px/1.5 Inter,Arial,sans-serif}@keyframes auth-terminal-line{to{opacity:1;transform:translateY(0)}}@keyframes auth-terminal-cursor{50%{opacity:0}}@keyframes auth-terminal-glow{to{transform:rotate(1turn)}}
@media(max-width:1180px){.react-auth.react-auth{grid-template-columns:minmax(470px,48%) 1fr}.react-auth .react-auth-panel{padding:36px 32px}.react-auth .react-auth-form{margin-top:28px}.react-auth .react-auth-form form{gap:17px 13px}.react-auth .auth-field input,.react-auth .auth-field select{height:51px}.auth-submit{height:52px}}
@media(max-width:850px){.react-auth.react-auth{display:block;padding:0}.react-auth .react-auth-panel{min-height:100vh;padding:28px 24px}.react-auth-visual{display:none}.react-auth .react-auth-form{max-width:600px;margin-left:auto;margin-right:auto}.react-auth-copy,.react-auth .react-auth-brand{max-width:600px;margin-left:auto;margin-right:auto}}
@media(max-width:560px){.react-auth-form form,.auth-socials{grid-template-columns:1fr}.react-auth-copy h1{font-size:28px}.react-auth-panel{padding:24px 20px}.react-auth-form{margin-top:30px}}
#reactPortalRoot.hidden { display: none; }
.react-header { min-height:66px; padding:16px 32px; background:#fff; border-bottom:1px solid #e6e9f0; }
.react-client-ident { display:flex; align-items:center; min-width:0; }
.react-client-ident { flex-direction:column; align-items:flex-start; }
.react-client-title { display:flex; align-items:center; gap:8px; }
.react-client-title b { color:#171a2b; font:700 18px/1 Inter,sans-serif; }
.react-client-title span { padding:4px 8px; border-radius:6px; color:#6831e2; background:#eef2ff; font:600 11px/1 Inter,sans-serif; text-transform:uppercase; }
.react-client-ident small { display:block; margin-top:2px; color:#5f6780; font:400 12px/1 Inter,sans-serif; }
.react-actions { gap:12px; }
.react-actions button { min-height:32px; padding:8px 14px; border:1px solid #e6e9f0; border-radius:8px; color:#5f6780; background:#fff; font:600 13px/1 Inter,sans-serif; }
.react-actions .react-primary { display:flex; align-items:center; gap:6px; color:#fff; background:#6831e2; border-color:#6831e2; }
.react-actions .react-primary .material-symbols-outlined { font-size:14px; }
.react-header-divider { width:1px; height:20px; background:#e6e9f0; }
.react-actions .react-notification { position:relative; display:grid; place-items:center; padding:8px; }
.react-notification .material-symbols-outlined { color:#5f6780; font-size:16px; }
.react-notification em { position:absolute; top:-3px; right:-7px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 3px; border-radius:9px; color:#fff; background:#e5484d; font:700 10px/1 Inter,sans-serif; font-style:normal; }
.react-auth { display:grid; grid-template-columns:60% 40%; min-height:100vh; background:#fff; font-family:Inter, sans-serif; } .react-auth-left { position:relative; overflow:hidden; padding:58px 7%; color:#fff; background:#130943; } .react-auth-brand { display:flex; align-items:center; gap:10px; } .react-auth-brand img:first-child { width:24px; } .react-auth-brand img:last-child { width:78px; } .react-auth-left h1 { margin:42px 0 24px; font:700 clamp(42px,4vw,64px)/1.18 Geist,sans-serif; } .react-auth-left p { max-width:650px; font-size:18px; line-height:1.45; } .react-auth-laptop { position:absolute; right:-6%; bottom:-2%; width:82%; max-width:820px; } .react-auth-panel { display:grid; place-items:center; padding:40px; } .react-auth-form { width:min(100%,420px); text-align:center; } .react-auth-form h2 { margin:0 0 22px; color:#303030; font-size:28px; } .react-auth-form p { color:#424242; } .react-auth-form p button { border:0; color:#6831e2; background:none; cursor:pointer; } .react-auth-form form { display:grid; gap:12px; margin-top:18px; } .react-auth-form input,.react-auth-form select { min-height:48px; padding:0 14px; border:1px solid #d1d1d1; border-radius:8px; background:#fff; font:14px Inter,sans-serif; } .react-auth-form .react-primary { min-height:48px; margin-top:16px; } .react-google { width:100%; min-height:48px; border:1px solid #d1d1d1; border-radius:8px; background:#fff; cursor:pointer; } .react-or { display:flex; align-items:center; gap:12px; margin:24px 0 8px; color:#666; } .react-or::before,.react-or::after { content:""; height:1px; flex:1; background:#eee; }
.react-portal { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh; color:#171a2b; background:#f8f9fc; font-family:Inter, sans-serif; }
.react-sidebar { display:flex; flex-direction:column; gap:32px; box-sizing:border-box; width:260px; min-height:100vh; padding:24px; color:#fff; background:#19191a; }
.react-brand { display:flex; align-items:center; gap:10px; } .react-brand img:first-child { width:21px; height:24px; } .react-brand img:last-child { width:66px; height:auto; }
.react-portal-pill { display:flex; align-items:center; gap:6px; margin-top:-22px; color:#fff; font-size:12px; } .react-portal-pill i { width:8px; height:8px; border-radius:50%; background:#18b66a; }
.react-sidebar nav { display:grid; gap:4px; } .react-sidebar nav button { display:flex; align-items:center; gap:12px; min-height:40px; padding:10px 12px; border:0; border-radius:8px; color:#fff; background:transparent; text-align:left; font:400 14px Geist,sans-serif; cursor:pointer; } .react-sidebar nav button.active,.react-sidebar nav button:hover { background:#6831e2; }
.react-sidebar nav .material-symbols-outlined { font-size:16px; } .react-sidebar footer { margin-top:auto; padding-top:12px; border-top:1px solid #424242; color:#9299ad; font-size:10px; }
.react-main { min-width:0; } .react-header { display:flex; align-items:center; justify-content:space-between; min-height:66px; box-sizing:border-box; padding:16px 32px; border-bottom:1px solid #e6e9f0; background:#fff; } .react-header b { display:block; color:#171a2b; font-size:18px; } .react-header small { display:block; margin-top:2px; color:#5f6780; font-size:12px; } .react-actions { display:flex; gap:12px; align-items:center; } .react-actions button { min-height:32px; padding:8px 14px; border:1px solid #e6e9f0; border-radius:8px; color:#5f6780; background:#fff; font-weight:600; cursor:pointer; } .react-actions .react-primary { color:#fff; background:#6831e2; border-color:#6831e2; }
.react-content { padding:24px 32px 48px; } .react-content > h1 { margin:0 0 4px; font:700 24px/1.2 Geist,sans-serif; } .react-description,.react-muted { margin:0 0 32px; color:#5f6780; font-size:14px; } .react-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; } .react-kpi { min-height:94px; padding:18px; border-radius:12px; background:#fff; } .react-kpi-label { display:flex; justify-content:space-between; color:#5f6780; font-size:12px; font-weight:600; } .react-kpi strong { display:block; margin-top:8px; font-size:28px; } .react-dot,.react-portal-pill i { width:8px; height:8px; border-radius:50%; background:#9299ad; } .react-dot.green { background:#18b66a; } .react-dot.red { background:#e5484d; } .react-dot.orange { background:#f59e0b; } .react-dot.blue { background:#2563eb; }
.react-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .react-card { padding:24px; border:1px solid #e6e9f0; border-radius:16px; background:#fff; } .react-card h3 { margin:0 0 4px; font-size:16px; } .react-status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; } .react-status-grid div { padding:12px; border-radius:10px; background:#f3f5f9; } .react-status-grid span { display:block; color:#5f6780; font-size:12px; } .react-status-grid strong { display:block; margin-top:4px; font-size:20px; } .green-text { color:#18b66a; } .red-text { color:#e5484d; } .muted-text { color:#9299ad; }
.react-threshold { padding:16px; border:1px solid #e6e9f0; border-radius:12px; } .react-threshold b { display:block; font-size:12px; } .react-threshold-row { display:flex; gap:12px; margin:12px 0; } .react-threshold select,.react-form-card input,.react-form-card select { flex:1; min-height:36px; padding:8px 12px; border:1px solid #e6e9f0; border-radius:8px; background:#fff; } .react-primary { min-height:36px; padding:8px 16px; border:0; border-radius:8px; color:#fff; background:#6831e2; cursor:pointer; } .react-threshold small { color:#5f6780; font-size:11px; }
.react-consumption { display:grid; gap:12px; margin-top:20px; } .react-consumption div,.react-security-summary div { display:flex; justify-content:space-between; padding:10px 14px; border:1px solid #e6e9f0; border-radius:8px; font-size:13px; } .react-consumption span,.react-security-summary span { color:#5f6780; } .react-consumption em { padding:4px 8px; border-radius:6px; color:#18b66a; background:#eafbf0; font-size:11px; font-style:normal; font-weight:600; }
.react-table-card table { width:100%; margin-top:20px; border-collapse:collapse; font-size:13px; } .react-table-card th,.react-table-card td { padding:12px 10px; border-bottom:1px solid #e6e9f0; text-align:left; } .react-table-card th { color:#5f6780; background:#f3f5f9; font-size:11px; text-transform:uppercase; } .react-form-card { display:grid; gap:14px; max-width:520px; } .react-form-card h3,.react-form-card p { margin:0; } .react-error { color:#e5484d; }
.react-security-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; } .react-security-summary strong { font-size:20px; }
@media(max-width:1100px) { .react-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .react-panels { grid-template-columns:1fr; } }
@media(max-width:700px) { .react-auth { grid-template-columns:1fr; } .react-auth-left { min-height:310px; padding:32px 24px; } .react-auth-left h1 { margin:28px 0 14px; font-size:36px; } .react-auth-left p { font-size:14px; } .react-auth-laptop { right:-14%; bottom:-12%; width:72%; } .react-auth-panel { padding:32px 24px; } .react-portal { grid-template-columns:76px minmax(0,1fr); } .react-sidebar { width:76px; padding:16px 12px; } .react-brand img:last-child,.react-portal-pill,.react-sidebar footer,.react-sidebar nav button:not(.active)::after { display:none; } .react-sidebar nav button { justify-content:center; padding:10px; } .react-header { padding:14px 18px; } .react-actions button:not(.react-primary) { display:none; } .react-content { padding:20px 18px; } .react-kpis { gap:10px; } .react-panels { gap:16px; } }

/* React owns the authenticated UI. */
#portalView, #authView { display: none !important; }

.react-consumption-label { display:flex; align-items:center; gap:10px; color:#5f6780; } .react-consumption-label img { width:16px; height:16px; object-fit:contain; }
.react-security-layout { display:grid; gap:24px; }
.react-security-wide { min-width:0; }
.react-security-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.react-security-intro { margin-bottom:20px; }
.react-security-intro h3 { margin:0 0 4px; color:#171a2b; font:600 16px/1.2 Inter,sans-serif; }
.react-security-intro p { margin:0; color:#5f6780; font:400 12px/1.3 Inter,sans-serif; }
.react-security-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.react-security-filters { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.react-security-filters span,.react-security-filters select,.react-security-filters button { min-height:34px; box-sizing:border-box; padding:8px 12px; border:1px solid #e6e9f0; border-radius:8px; color:#171a2b; background:#fff; font:400 12px/1 Inter,sans-serif; }
.react-security-filters .react-primary { padding:8px 16px; border-color:#6831e2; color:#fff; background:#6831e2; cursor:pointer; }
.react-security-table { width:100%; overflow:hidden; border:1px solid #e6e9f0; border-radius:8px; }
.react-security-head,.react-security-row { display:grid; grid-template-columns:1.3fr .75fr 1fr 1fr; align-items:center; min-width:680px; }
.react-security-head { padding:10px 12px; color:#5f6780; background:#f3f5f9; font:600 11px/1.2 Inter,sans-serif; }
.react-security-row { min-height:42px; padding:0 12px; border-top:1px solid #e6e9f0; color:#5f6780; font:400 13px/1.3 Inter,sans-serif; }
.react-security-row.highlight { background:#f8f7ff; }
.react-security-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.react-security-row > span:first-child { color:#171a2b; font-weight:600; }
.react-security-row strong { display:flex; align-items:center; gap:8px; color:#171a2b; }
.react-security-row strong .material-symbols-outlined { color:#9299ad; font-size:14px; }
.react-security-split .react-security-head,.react-security-split .react-security-row { grid-template-columns:1.1fr 1fr 1fr .9fr; min-width:500px; }
.react-security-split .react-security-table { overflow-x:auto; }
.react-empty { margin:0; padding:16px; color:#9299ad; font-size:12px; }
@media(max-width:900px) { .react-security-toolbar { display:grid; gap:16px; } .react-security-filters { flex-wrap:wrap; } .react-security-split { grid-template-columns:1fr; } .react-security-table { overflow-x:auto; } }
.react-security-layout { display:grid; gap:24px; }
.react-security-wide { min-width:0; }
.react-security-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.react-security-intro { margin-bottom:20px; }
.react-security-intro h3 { margin:0 0 4px; color:#171a2b; font:600 16px/1.2 Inter,sans-serif; }
.react-security-intro p { margin:0; color:#5f6780; font:400 12px/1.3 Inter,sans-serif; }
.react-security-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.react-security-filters { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.react-security-filters span,.react-security-filters select,.react-security-filters button { min-height:34px; box-sizing:border-box; padding:8px 12px; border:1px solid #e6e9f0; border-radius:8px; color:#171a2b; background:#fff; font:400 12px/1 Inter,sans-serif; }
.react-security-filters .react-primary { padding:8px 16px; border-color:#6831e2; color:#fff; background:#6831e2; cursor:pointer; }
.react-security-table { width:100%; overflow:hidden; border:1px solid #e6e9f0; border-radius:8px; }
.react-security-head,.react-security-row { display:grid; grid-template-columns:1.3fr .75fr 1fr 1fr; align-items:center; min-width:680px; }
.react-security-head { padding:10px 12px; color:#5f6780; background:#f3f5f9; font:600 11px/1.2 Inter,sans-serif; }
.react-security-row { min-height:42px; padding:0 12px; border-top:1px solid #e6e9f0; color:#5f6780; font:400 13px/1.3 Inter,sans-serif; }
.react-security-row.highlight { background:#f8f7ff; }
.react-security-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.react-security-row > span:first-child { color:#171a2b; font-weight:600; }
.react-security-row strong { display:flex; align-items:center; gap:8px; color:#171a2b; }
.react-security-row strong .material-symbols-outlined { color:#9299ad; font-size:14px; }
.react-security-split .react-security-head,.react-security-split .react-security-row { grid-template-columns:1.1fr 1fr 1fr .9fr; min-width:500px; }
.react-security-split .react-security-table { overflow-x:auto; }
.react-empty { margin:0; padding:16px; color:#9299ad; font-size:12px; }
@media(max-width:900px) { .react-security-toolbar { display:grid; gap:16px; } .react-security-filters { flex-wrap:wrap; } .react-security-split { grid-template-columns:1fr; } .react-security-table { overflow-x:auto; } }
.react-security-layout > .react-security-wide:first-child .react-security-head,
.react-security-layout > .react-security-wide:first-child .react-security-row { grid-template-columns: minmax(0, 1fr) 180px 180px 180px; min-width: 0; }
.react-security-layout > .react-security-wide:first-child .react-security-row > span:nth-child(2) { color: #e5484d; font-weight: 600; }
.react-security-layout > .react-security-wide:first-child .react-security-row > span:nth-child(3) { color: #5f6780; }
.react-security-threshold,.react-security-period { display:flex; align-items:center; gap:8px; min-height:34px; box-sizing:border-box; padding:8px 12px; border:1px solid #e6e9f0; border-radius:8px; background:#fff; }
.react-security-threshold span { color:#9299ad; font:400 12px/1 Inter,sans-serif; }
.react-security-threshold b { color:#171a2b; font:500 13px/1 Inter,sans-serif; }
.react-security-period { position:relative; gap:12px; padding-right:10px; }
.react-security-period select { width:84px; min-height:auto; padding:0; border:0; outline:0; appearance:none; color:#171a2b; background:transparent; font:400 13px/1 Inter,sans-serif; }
.react-security-period img { width:12px; height:12px; pointer-events:none; }
.react-security-filters .react-reset { min-height:34px; padding:8px 0; border:0; color:#9299ad; background:transparent; cursor:pointer; }
.react-security-layout > .react-security-wide:first-child .react-security-row > span:first-child strong img { width:14px; height:14px; }
.react-security-threshold input { width:35px; min-height:auto!important; padding:0!important; border:0!important; outline:0; font-weight:500!important; }
.react-security-threshold b { margin-right:-5px; }
.react-security-table.top-ips .react-security-head,.react-security-table.top-ips .react-security-row { grid-template-columns:minmax(250px,1fr) 164px 166px 166px 88px!important; min-width:850px; }
.react-security-table.top-ips { margin-top:20px; }
.react-security-table.top-ips .react-security-head { min-height:35px; box-sizing:border-box; padding:10px 12px; font-size:12px; }
.react-security-table.top-ips .react-security-row { min-height:52px; box-sizing:border-box; padding:0 12px; }
.react-security-table.top-ips .react-security-row:first-of-type { background:#f8f7ff; }
.react-security-table.blocked-ips .react-security-head,.react-security-table.blocked-ips .react-security-row { grid-template-columns:minmax(125px,1fr) 100px 100px 90px 88px!important; min-width:540px; }
.react-security-table.blocked-ips .react-security-head { min-height:35px; box-sizing:border-box; padding:10px 12px; font-size:11px; }
.react-security-table.blocked-ips .react-security-row { min-height:50px; box-sizing:border-box; padding:0 12px; }
.react-security-table.blocked-ips .react-security-row > span:nth-child(2),.react-security-table.blocked-ips .react-security-row > span:nth-child(3) { color:#5f6780; font-weight:400; }
.react-security-table.recent-alerts .react-security-head,.react-security-table.recent-alerts .react-security-row { grid-template-columns:138px 128px 100px 165px minmax(260px,1fr)!important; min-width:850px; }
.react-security-table.recent-alerts .react-security-head { min-height:35px; box-sizing:border-box; font-size:12px; }
.react-security-table.recent-alerts .react-security-row { min-height:41px; box-sizing:border-box; }
.react-security-table.recent-alerts .react-security-row > span:nth-child(2),.react-security-table.recent-alerts .react-security-row > span:nth-child(4) { color:#171a2b; font-weight:600; }
.react-security-table.recent-alerts .react-security-row > span:first-child { color:#5f6780; font-weight:400; }
.react-security-table.block-history .react-security-head,.react-security-table.block-history .react-security-row { grid-template-columns:1fr 1fr 1.25fr .8fr!important; }
.react-block-ip,.react-unblock-ip { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:6px 12px; border:0; border-radius:6px; color:#e5484d; background:#ffeeef; font:600 12px/16px Inter,sans-serif; cursor:pointer; }
.react-block-ip .material-symbols-outlined { font-size:14px; }
.react-unblock-ip { color:#df3f4c; }
.react-security-table.blocked-ips .react-unblock-ip { padding:6px 12px; border:1px solid rgba(23,26,43,.2); border-radius:6px; color:#171a2b; background:#fff; font:600 12px/16px Inter,sans-serif; }
.react-security-table.blocked-ips .react-unblock-ip:disabled { color:#9299ad; background:#f8f9fb; opacity:.7; cursor:not-allowed; }
.react-already-blocked { color:#7c8499; font-size:11px; }
.react-security-error { margin:0; padding:10px 13px; border-radius:8px; color:#bd2934; background:#fff0f1; font-size:12px; }
.react-security-modal-backdrop { position:fixed; z-index:2000; inset:0; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:34px 18px; background:rgba(16,20,31,.58); }
.react-security-modal { position:relative; width:min(520px,100%); box-sizing:border-box; padding:28px; border:1px solid #e5e7ed; border-radius:16px; background:#fff; box-shadow:0 24px 70px rgba(20,23,35,.22); }
.react-security-modal-close { position:absolute; top:20px; right:20px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; color:#747b8f; background:#f4f5f8; cursor:pointer; }
.react-security-modal-close .material-symbols-outlined { font-size:18px; }
.react-security-modal-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:16px; border-radius:12px; color:#6430df; background:#f0eaff; }
.react-security-modal h2 { margin:0 0 6px; color:#171a2b; font:650 21px/1.2 Inter,sans-serif; }
.react-security-modal-lead { margin:0 0 24px; color:#687087; font:400 13px/1.45 Inter,sans-serif; }
.react-modal-label,.react-security-modal fieldset { display:grid; gap:8px; margin:18px 0 0; padding:0; border:0; color:#25293a; font:600 12px/1.3 Inter,sans-serif; }
.react-security-modal legend { margin-bottom:10px; color:#25293a; font:600 12px/1.3 Inter,sans-serif; }
.react-modal-ip { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid #e1e4eb; border-radius:9px; color:#303548; background:#f7f8fa; }
.react-modal-ip .material-symbols-outlined { color:#8c93a5; font-size:18px; }
.react-security-modal select,.react-security-modal textarea,.react-custom-duration input { width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid #dfe2e9; border-radius:8px; outline:0; color:#303548; background:#fff; font:400 12px/1.4 Inter,sans-serif; }
.react-duration-choice { display:flex; align-items:center; gap:9px; min-height:38px; box-sizing:border-box; padding:9px 12px; border:1px solid #e3e5eb; border-radius:8px; color:#4d5468; font:500 12px/1 Inter,sans-serif; cursor:pointer; }
.react-duration-choice.selected { border-color:#7440e7; color:#5422c4; background:#f8f5ff; }
.react-duration-choice input,.react-server-choices input { accent-color:#6831e2; }
.react-custom-duration { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.react-custom-duration label { display:grid; gap:7px; color:#5f6780; font-size:11px; }
.react-server-choices label { display:flex; align-items:center; gap:9px; min-height:28px; color:#4d5468; font-weight:400; }
.react-server-choices label:first-of-type { padding-bottom:8px; border-bottom:1px solid #eceef3; font-weight:600; }
.react-security-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin:26px -28px -28px; padding:18px 28px; border-top:1px solid #e7e9ef; background:#fafafa; border-radius:0 0 16px 16px; }
.react-security-modal-actions button { padding:10px 15px; border:1px solid #dcdfe7; border-radius:8px; color:#4c5367; background:#fff; font:600 12px/1 Inter,sans-serif; cursor:pointer; }
.react-security-modal-actions .react-primary { border-color:#6831e2; color:#fff; background:#6831e2; }
.react-security-modal button:disabled { opacity:.55; cursor:wait; }
@media(max-width:700px) { .react-security-modal { padding:22px; } .react-custom-duration { grid-template-columns:1fr; } .react-security-modal-actions { margin:24px -22px -22px; padding:16px 22px; } }
.react-unblock-backdrop { align-items:center; }
.react-unblock-modal { position:relative; width:min(440px,100%); box-sizing:border-box; padding:28px; border:1px solid #e6e9f0; border-radius:16px; background:#fff; box-shadow:0 24px 70px rgba(20,23,35,.22); }
.react-unblock-modal-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:16px; border-radius:12px; color:#e5484d; background:#fef2f2; }
.react-unblock-modal h2 { margin:0 0 7px; color:#171a2b; font:650 20px/1.25 Inter,sans-serif; }
.react-unblock-modal > p:not(.react-security-error) { margin:0; color:#5f6780; font:400 13px/1.5 Inter,sans-serif; }
.react-unblock-summary { display:grid; gap:10px; margin:22px 0; padding:14px; border:1px solid #e6e9f0; border-radius:9px; background:#f8f9fb; }
.react-unblock-summary span { display:flex; align-items:center; justify-content:space-between; gap:16px; color:#7a8296; font:400 12px/1.3 Inter,sans-serif; }
.react-unblock-summary strong { color:#171a2b; font-weight:600; }
.react-unblock-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.react-unblock-actions button { padding:10px 14px; border:1px solid #d9dde6; border-radius:8px; color:#42485a; background:#fff; font:600 12px/1 Inter,sans-serif; cursor:pointer; }
.react-unblock-actions .danger { border-color:#e5484d; color:#fff; background:#e5484d; }
.react-unblock-actions button:disabled { opacity:.55; cursor:wait; }
.react-security-toolbar { align-items:flex-end; }
.react-security-toolbar .react-security-intro { flex:1 1 auto; min-width:0; margin:0; }
.react-security-toolbar .react-security-intro h3 { margin:0 0 4px; font-size:16px; line-height:normal; white-space:nowrap; }
.react-security-toolbar .react-security-intro p { color:#5f6780; font-size:13px; line-height:normal; }
.react-security-toolbar .react-security-filters { flex:0 0 auto; gap:12px; align-items:center; }
.react-security-toolbar .react-security-threshold { width:96px; height:34px; min-height:34px; box-sizing:border-box; gap:8px; padding:8px 12px; border:1px solid #e6e9f0; border-radius:8px; }
.react-security-toolbar .react-security-threshold span,.react-security-toolbar .react-security-threshold b,.react-security-toolbar .react-security-threshold input { min-height:0; margin:0; padding:0!important; border:0!important; border-radius:0; background:transparent; line-height:normal; }
.react-security-toolbar .react-security-threshold span { color:#9299ad; font-size:12px; font-weight:400; }
.react-security-toolbar .react-security-threshold b { color:#171a2b; font-size:13px; font-weight:500; }
.react-security-toolbar .react-security-threshold input { width:25px; color:#171a2b; font-size:13px; font-weight:500!important; appearance:textfield; -moz-appearance:textfield; }
.react-security-toolbar .react-security-threshold input::-webkit-inner-spin-button,.react-security-toolbar .react-security-threshold input::-webkit-outer-spin-button { margin:0; appearance:none; -webkit-appearance:none; }
.react-security-toolbar .react-security-period { width:106px; height:34px; min-height:34px; box-sizing:border-box; gap:12px; padding:8px 12px; border:1px solid #e6e9f0; border-radius:8px; }
.react-security-toolbar .react-security-period select { width:70px; min-height:0; padding:0; border:0; border-radius:0; color:#171a2b; background:transparent; font-size:13px; line-height:normal; }
.react-security-toolbar .react-security-period img { flex:0 0 12px; width:12px; height:12px; }
.react-security-toolbar .react-security-filters .react-primary { min-height:34px; height:34px; padding:8px 16px; border:0; border-radius:8px; color:#fff; background:#6831e2; font-size:13px; font-weight:600; line-height:normal; }
.react-security-toolbar .react-security-filters .react-reset { min-height:0; height:auto; padding:0; border:0; border-radius:0; color:#9299ad; background:transparent; font-size:13px; font-weight:400; line-height:normal; }
@media(max-width:1100px) { .react-security-toolbar { align-items:flex-start; flex-direction:column; } }
.react-security-layout { display:grid; gap:24px; }
.react-security-wide { min-width:0; }
.react-security-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.react-security-intro { margin-bottom:20px; }
.react-security-intro h3 { margin:0 0 4px; color:#171a2b; font:600 16px/1.2 Inter,sans-serif; }
.react-security-intro p { margin:0; color:#5f6780; font:400 12px/1.3 Inter,sans-serif; }
.react-security-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.react-security-filters { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.react-security-filters span,.react-security-filters select,.react-security-filters button { min-height:34px; box-sizing:border-box; padding:8px 12px; border:1px solid #e6e9f0; border-radius:8px; color:#171a2b; background:#fff; font:400 12px/1 Inter,sans-serif; }
.react-security-filters .react-primary { padding:8px 16px; border-color:#6831e2; color:#fff; background:#6831e2; cursor:pointer; }
.react-security-table { width:100%; overflow:hidden; border:1px solid #e6e9f0; border-radius:8px; }
.react-security-head,.react-security-row { display:grid; grid-template-columns:1.3fr .75fr 1fr 1fr; align-items:center; min-width:680px; }
.react-security-head { padding:10px 12px; color:#5f6780; background:#f3f5f9; font:600 11px/1.2 Inter,sans-serif; }
.react-security-row { min-height:42px; padding:0 12px; border-top:1px solid #e6e9f0; color:#5f6780; font:400 13px/1.3 Inter,sans-serif; }
.react-security-row.highlight { background:#f8f7ff; }
.react-security-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.react-security-row > span:first-child { color:#171a2b; font-weight:600; }
.react-security-row strong { display:flex; align-items:center; gap:8px; color:#171a2b; }
.react-security-row strong .material-symbols-outlined { color:#9299ad; font-size:14px; }
.react-security-split .react-security-head,.react-security-split .react-security-row { grid-template-columns:1.1fr 1fr 1fr .9fr; min-width:500px; }
.react-security-split .react-security-table { overflow-x:auto; }
.react-empty { margin:0; padding:16px; color:#9299ad; font-size:12px; }
@media(max-width:900px) { .react-security-toolbar { display:grid; gap:16px; } .react-security-filters { flex-wrap:wrap; } .react-security-split { grid-template-columns:1fr; } .react-security-table { overflow-x:auto; } }
.react-security-layout > .react-security-wide:first-child .react-security-head,
.react-security-layout > .react-security-wide:first-child .react-security-row { grid-template-columns: minmax(0, 1fr) 180px 180px 180px; min-width: 0; }
.react-security-layout > .react-security-wide:first-child .react-security-row > span:nth-child(2) { color: #e5484d; font-weight: 600; }
.react-security-layout > .react-security-wide:first-child .react-security-row > span:nth-child(3) { color: #5f6780; }
.react-security-threshold,.react-security-period { display:flex; align-items:center; gap:8px; min-height:34px; box-sizing:border-box; padding:8px 12px; border:1px solid #e6e9f0; border-radius:8px; background:#fff; }
.react-security-threshold span { color:#9299ad; font:400 12px/1 Inter,sans-serif; }
.react-security-threshold b { color:#171a2b; font:500 13px/1 Inter,sans-serif; }
.react-security-period { position:relative; gap:12px; padding-right:10px; }
.react-security-period select { width:84px; min-height:auto; padding:0; border:0; outline:0; appearance:none; color:#171a2b; background:transparent; font:400 13px/1 Inter,sans-serif; }
.react-security-period img { width:12px; height:12px; pointer-events:none; }
.react-security-filters .react-reset { min-height:34px; padding:8px 0; border:0; color:#9299ad; background:transparent; cursor:pointer; }
.react-security-layout > .react-security-wide:first-child .react-security-row > span:first-child strong img { width:14px; height:14px; }
.react-alerts-title { margin:0 0 20px; color:#171a2b; font:600 16px/1.2 Inter,sans-serif; }
.react-security-layout > .react-security-wide:nth-child(2) .react-security-head,
.react-security-layout > .react-security-wide:nth-child(2) .react-security-row { grid-template-columns:150px 140px 110px 180px minmax(0,1fr); min-width:0; }
.react-severity { display:inline-flex; width:max-content; padding:4px 8px; border-radius:6px; font:600 11px/1 Inter,sans-serif; text-transform:uppercase; }
.react-severity.critique,.react-severity.critical { color:#e5484d; background:#fef2f2; }
.react-severity.élevée,.react-severity.high { color:#f59e0b; background:#fffbeb; }
.react-severity.moyenne,.react-severity.medium { color:#2563eb; background:#eff6ff; }
.react-severity.faible,.react-severity.low { color:#5f6780; background:#f3f5f9; }

/* Figma: blocked IPs card */
.react-security-split > .react-card:first-child .react-security-intro { margin-bottom:20px; }
.react-security-split > .react-card:first-child .react-security-head,
.react-security-split > .react-card:first-child .react-security-row { grid-template-columns:minmax(0,1fr) 100px 100px 90px; min-width:0; }
.react-security-split > .react-card:first-child .react-security-head { padding:10px 12px; border:0; border-radius:8px 8px 0 0; }
.react-security-split > .react-card:first-child .react-security-row { min-height:42px; padding:0 12px; }
.react-firewall-status { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:4px 8px; border-radius:6px; font:600 11px/1 Inter,sans-serif; white-space:nowrap; }
.react-firewall-status.active { color:#18b66a; background:#eafbf0; }
.react-firewall-status.revoked { color:#f59e0b; background:#fffbeb; }
.react-firewall-status.expired { color:#9299ad; background:#f3f5f9; }

/* Figma: successful SSH connections card */
.react-security-layout > .react-security-wide:last-child .react-security-head,
.react-security-layout > .react-security-wide:last-child .react-security-row { grid-template-columns:150px 140px 140px 150px minmax(0,1fr); min-width:0; }
.react-security-layout > .react-security-wide:last-child .react-security-head { padding:10px 12px; border:0; border-radius:8px 8px 0 0; font-size:12px; }
.react-security-layout > .react-security-wide:last-child .react-security-row { min-height:48px; padding:0 12px; }
.react-security-layout > .react-security-wide:last-child .react-security-row.highlight { background:#ecfdf5; }
.react-security-layout > .react-security-wide:last-child .react-security-row > span:nth-child(2),
.react-security-layout > .react-security-wide:last-child .react-security-row > span:nth-child(3) { color:#171a2b; }
.react-security-layout > .react-security-wide:last-child .react-security-row > span:nth-child(2) { font-weight:500; }
.react-security-layout > .react-security-wide:last-child .react-security-row > span:nth-child(4) { color:#171a2b; font-weight:600; }
.react-connection-date { display:inline-flex; align-items:center; gap:8px; color:#5f6780; white-space:nowrap; }
.react-connection-date i { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#18b66a; }

/* Figma: servers and agents */
.react-servers-page { padding:24px; border:1px solid #e6e9f0; border-radius:16px; background:#fff; }
.react-server-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.react-server-filters { display:flex; gap:12px; }
.react-server-filters select,.react-server-search { height:38px; box-sizing:border-box; padding:0 12px; border:1px solid #e6e9f0; border-radius:8px; color:#171a2b; background:#fff; font:400 13px/1 Inter,sans-serif; }
.react-server-filters select:first-child { width:190px; }
.react-server-filters select:last-child { width:131px; }
.react-server-search { display:flex; align-items:center; gap:8px; width:240px; color:#9299ad; }
.react-server-search .material-symbols-outlined { font-size:14px; }
.react-server-search input { min-width:0; width:100%; border:0; outline:0; color:#171a2b; font:400 13px/1 Inter,sans-serif; }
.react-server-search input::placeholder { color:#9299ad; }
.react-server-table { width:100%; overflow:auto; }
.react-server-head,.react-server-row { display:grid; grid-template-columns:minmax(180px,1fr) 120px 130px 130px 300px 160px 67px; align-items:center; min-width:1120px; }
.react-server-head { padding:12px 16px; border-radius:8px 8px 0 0; color:#5f6780; background:#f8f9fc; font:600 12px/1.2 Inter,sans-serif; }
.react-server-row { min-height:68px; padding:0 16px; border-bottom:1px solid #e6e9f0; color:#171a2b; font:400 13px/1.2 Inter,sans-serif; }
.react-server-row.highlight { background:#f4f3ff; }
.react-server-name { display:flex; min-width:0; flex-direction:column; gap:2px; }
.react-server-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.react-server-name small { overflow:hidden; color:#9299ad; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.react-environment,.react-server-status,.react-agent-tag { display:inline-flex; align-items:center; width:max-content; border-radius:4px; font-size:11px; font-weight:600; white-space:nowrap; }
.react-environment { padding:2px 8px; }
.react-environment.production { color:#2563eb; background:#eff6ff; }
.react-environment.staging { color:#c2410c; background:#fff7ed; }
.react-environment.development { color:#374151; background:#f3f4f6; }
.react-environment.default { color:#5f6780; background:#f3f5f9; }
.react-server-status { gap:6px; padding:2px 8px; }
.react-server-status i { width:6px; height:6px; border-radius:50%; }
.react-server-status.operational { color:#18b66a; background:#eafbf0; }
.react-server-status.operational i { background:#18b66a; }
.react-server-status.offline { color:#e5484d; background:#fef2f2; }
.react-server-status.offline i { background:#e5484d; }
.react-server-status.never { color:#9299ad; background:#f3f5f9; }
.react-server-status.never i { background:#9299ad; }
.react-agent-tags { display:flex; flex-wrap:wrap; gap:8px; }
.react-agent-tag { padding:2px 6px; font-size:10px; }
.react-agent-tag.connected { color:#18b66a; background:#eafbf0; }
.react-agent-tag.disconnected { color:#e5484d; background:#fef2f2; }
.react-server-action { display:grid; place-items:center; width:32px; height:32px; border:0; color:#5f6780; background:transparent; cursor:pointer; }
.react-server-action .material-symbols-outlined { font-size:16px; }
.react-server-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; color:#5f6780; font-size:13px; }
.react-server-pagination > div { display:flex; align-items:center; gap:8px; }
.react-server-pagination button { min-height:32px; padding:6px 12px; border:1px solid #e6e9f0; border-radius:6px; color:#5f6780; background:#fff; font:500 13px/1 Inter,sans-serif; cursor:pointer; }
.react-server-pagination button:disabled { cursor:not-allowed; opacity:.5; }
.react-server-pagination .react-primary { color:#fff; background:#6831e2; border-color:#6831e2; }
@media(max-width:900px) { .react-server-toolbar { align-items:stretch; flex-direction:column; } .react-server-search { width:100%; } .react-servers-page { padding:16px; } }
.react-server-filters select { appearance:none; background:#fff url('/static/assets/security-chevron-down.svg') no-repeat right 12px center / 12px 12px; padding-right:32px; }
.react-server-head,.react-server-row { min-width:980px; }
.react-server-drawer { position:fixed; z-index:20; top:0; right:0; display:flex; width:min(420px,100vw); height:100vh; box-sizing:border-box; flex-direction:column; gap:24px; padding:28px; overflow-y:auto; border-left:1px solid #e6e9f0; background:#fff; box-shadow:-4px 0 12px rgba(23,11,77,.08); }
.react-server-drawer-overlay { position:fixed; z-index:19; inset:0; padding:0; border:0; background:rgba(0,0,0,.5); cursor:default; }
.react-drawer-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.react-drawer-header h2 { margin:0 0 2px; color:#171a2b; font:700 18px/1.2 Geist,Inter,sans-serif; }
.react-drawer-header p { margin:0; color:#5f6780; font:400 13px/1.2 Inter,sans-serif; }
.react-drawer-close { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; color:#e5484d; background:#fef2f2; font-size:25px; line-height:1; cursor:pointer; }
.react-drawer-identity { display:grid; gap:12px; padding-bottom:16px; border-bottom:1px solid #e6e9f0; }
.react-drawer-identity > div { display:flex; align-items:center; justify-content:space-between; gap:16px; color:#171a2b; font:400 13px/1.2 Inter,sans-serif; }
.react-drawer-identity strong { color:#5f6780; font-weight:600; }
.react-drawer-identity > div > span:last-child { text-align:right; }
.react-drawer-section { display:grid; gap:12px; }
.react-drawer-section h3 { margin:0; color:#171a2b; font:700 14px/1.2 Inter,sans-serif; }
.react-drawer-agent { display:grid; gap:10px; padding:14px; border:1px solid #e6e9f0; border-radius:10px; background:#f8f9fc; }
.react-drawer-agent-head { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#171a2b; font:600 13px/1.2 Inter,sans-serif; }
.react-drawer-agent-status { padding:2px 6px; border-radius:4px; font:600 10px/1 Inter,sans-serif; }
.react-drawer-agent-status.connected { color:#18b66a; background:#eafbf0; }
.react-drawer-agent-status.disconnected { color:#e5484d; background:#fef2f2; }
.react-drawer-agent-meta { display:grid; gap:4px; color:#5f6780; font:400 11px/1.2 Inter,sans-serif; }
.react-drawer-activity { padding-bottom:16px; border-bottom:1px solid #e6e9f0; }
.react-drawer-activity-row { display:flex; align-items:flex-start; gap:10px; }
.react-drawer-activity-row > i { width:6px; height:6px; flex:0 0 6px; margin-top:5px; border-radius:50%; }
.react-drawer-activity-row > i.green { background:#18b66a; } .react-drawer-activity-row > i.blue { background:#2563eb; } .react-drawer-activity-row > i.orange { background:#f59e0b; }
.react-drawer-activity-row > div { display:grid; gap:2px; min-width:0; }
.react-drawer-activity-row span { color:#171a2b; font:400 12px/1.2 Inter,sans-serif; }
.react-drawer-activity-row small { color:#9299ad; font:400 11px/1.2 Inter,sans-serif; }
.react-drawer-actions { display:grid; gap:10px; }
.react-drawer-actions > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.react-drawer-actions button { min-height:45px; padding:10px 16px; border:1px solid #e6e9f0; border-radius:8px; color:#5f6780; background:#fff; font:600 13px/1 Inter,sans-serif; cursor:pointer; }
.react-drawer-actions button.react-primary { border-color:#6831e2; color:#fff; background:#6831e2; }
.react-drawer-actions button.danger { border-color:#e5484d; color:#e5484d; }
.react-server-modal-backdrop { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:24px; background:rgba(23,26,43,.32); }
.react-server-modal { display:grid; gap:16px; width:min(620px,100%); max-height:80vh; box-sizing:border-box; padding:24px; overflow:auto; border:1px solid #e6e9f0; border-radius:12px; background:#fff; box-shadow:0 12px 32px rgba(23,11,77,.18); }
.react-server-modal-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.react-server-modal-head h3 { margin:0; color:#171a2b; font:700 18px/1.2 Inter,sans-serif; }
.react-server-modal-head button { border:0; color:#e5484d; background:transparent; font-size:24px; cursor:pointer; }
.react-server-modal pre { max-height:50vh; margin:0; padding:14px; overflow:auto; border-radius:8px; color:#171a2b; background:#f8f9fc; font:400 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.react-server-edit { gap:12px; }
.react-server-edit label { display:grid; gap:6px; color:#5f6780; font:600 12px/1.2 Inter,sans-serif; }
.react-server-edit input,.react-server-edit select { min-height:40px; box-sizing:border-box; padding:0 12px; border:1px solid #e6e9f0; border-radius:8px; color:#171a2b; background:#fff; font:400 13px/1 Inter,sans-serif; }
.react-servers-layout { display:grid; gap:24px; }
.react-servers-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:60px; }
.react-servers-heading h1 { margin:0 0 4px; color:#171a2b; font:700 26px/1.15 Geist,Inter,sans-serif; }
.react-servers-heading p { margin:0; color:#5f6780; font:400 13px/1.3 Inter,sans-serif; }
.react-servers-heading > .react-primary { display:flex; align-items:center; gap:8px; min-height:36px; padding:10px 16px; border:0; border-radius:8px; color:#fff; background:#6831e2; font:600 13px/1 Inter,sans-serif; cursor:pointer; }
.react-servers-heading > .react-primary .material-symbols-outlined { font-size:15px; }
.react-server-head { min-height:39px; box-sizing:border-box; background:#f3f5f9; }
.react-server-row { min-height:63px; }
.react-server-row.highlight { background:#fff; }
.react-server-delete-backdrop { position:fixed; z-index:110; inset:0; display:grid; place-items:center; box-sizing:border-box; padding:24px; background:rgba(23,26,43,.38); }
.react-server-delete-modal { width:min(450px,100%); box-sizing:border-box; padding:32px; border-radius:16px; background:#fff; box-shadow:0 18px 42px rgba(23,26,43,.18); text-align:center; }
.react-server-delete-icon { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 16px; border-radius:50%; color:#e5484d; background:#fef2f2; }
.react-server-delete-icon .material-symbols-outlined { font-size:25px; }
.react-server-delete-modal h2 { margin:0 auto 8px; max-width:386px; color:#171a2b; font:700 19px/1.2 Inter,sans-serif; }
.react-server-delete-modal > p { margin:0 auto; max-width:386px; color:#5f6780; font:400 13px/1.5 Inter,sans-serif; }
.react-server-delete-info { margin:24px 0; padding:11px 16px; border:1px solid #e1e5ed; border-radius:8px; color:#5f6780; background:#f8f9fc; font:400 12px/1.35 Inter,sans-serif; }
.react-server-delete-modal footer { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.react-server-delete-modal footer button { min-height:40px; padding:10px 12px; border:1px solid #171a2b; border-radius:8px; color:#171a2b; background:#fff; font:600 12px/1 Inter,sans-serif; cursor:pointer; }
.react-server-delete-modal footer .danger { border-color:#e5484d; color:#fff; background:#e5484d; }
.react-server-delete-modal footer button:disabled { opacity:.55; cursor:wait; }
.react-add-server-modal { width:min(780px,100%); }
@media(max-width:700px) { .react-servers-heading { align-items:flex-start; flex-direction:column; } .react-server-delete-modal footer { grid-template-columns:1fr; } }
.react-provisioning-page { display:grid; gap:32px; }
.react-provisioning-page > section { display:grid; gap:16px; }
.react-provisioning-page h2 { margin:0; color:#171a2b; font:700 20px/1.2 Geist,Inter,sans-serif; }
.react-provisioning-description { margin:-12px 0 0; color:#5f6780; font:400 14px/1.3 Inter,sans-serif; }
.react-provisioning-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.react-provision-card { display:grid; align-content:start; gap:20px; padding:24px; border:1px solid #e6e9f0; border-radius:16px; background:#fff; }
.react-provision-card h3 { margin:0; color:#171a2b; font:600 16px/1.2 Inter,sans-serif; }
.react-provision-form label { display:grid; gap:6px; color:#171a2b; font:600 13px/1.2 Inter,sans-serif; }
.react-provision-form input,.react-provision-form select,.react-report-controls select { min-height:40px; box-sizing:border-box; padding:0 12px; border:1px solid #e6e9f0; border-radius:8px; color:#171a2b; background:#fff; font:400 13px/1 Inter,sans-serif; }
.react-provision-form input::placeholder { color:#9299ad; }
.react-provision-form small { color:#5f6780; font:400 11px/1.2 Inter,sans-serif; }
.react-provision-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.react-provision-success { justify-self:end; padding:4px 8px; border-radius:4px; color:#18b66a; background:#eafbf0; font:600 10px/1 Inter,sans-serif; }
.react-provision-card-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.react-package-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid #e6e9f0; color:#5f6780; font:400 13px/1.2 Inter,sans-serif; }
.react-package-line b { color:#171a2b; text-align:right; font-weight:600; }
.react-package-line button,.react-package-command button { display:inline-flex; align-items:center; gap:4px; border:0; color:#6831e2; background:transparent; font:600 11px/1 Inter,sans-serif; cursor:pointer; }
.react-package-line > div { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.react-package-line > div b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.react-package-line button { padding:0; }
.react-package-line .material-symbols-outlined,.react-package-command .material-symbols-outlined { font-size:14px; line-height:14px; }
.react-package-line button { min-width:14px; height:14px; }
.react-package-command button { min-height:14px; padding:0; }
.react-package-command { display:grid; gap:10px; }
.react-package-command > div { display:flex; align-items:center; justify-content:space-between; color:#5f6780; font:600 12px/1.2 Inter,sans-serif; }
.react-package-command code { display:block; padding:16px; overflow:auto; border-radius:8px; color:#a9b2c3; background:#1e1e2f; font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.react-provision-empty-package { align-content:center; min-height:240px; }
.react-provision-empty-package p { margin:0; color:#5f6780; font-size:12px; }
.react-report-controls { display:flex; align-items:center; gap:12px; padding:20px; border:1px solid #e6e9f0; border-radius:12px; background:#fff; }
.react-report-controls select { width:220px; }
.react-report-controls button { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:10px 16px; border:1px solid #e6e9f0; border-radius:8px; color:#5f6780; background:#fff; font:600 13px/1 Inter,sans-serif; cursor:pointer; }
.react-report-controls button.react-primary { border-color:#6831e2; color:#fff; background:#6831e2; }
.react-report-controls i { width:1px; height:24px; background:#e6e9f0; }
.react-provision-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.react-provision-kpis > div { display:grid; gap:8px; padding:18px; border:1px solid #e6e9f0; border-radius:12px; background:#fff; }
.react-provision-kpis span { color:#5f6780; font:600 13px/1.2 Inter,sans-serif; }
.react-provision-kpis b { color:#171a2b; font:700 28px/1 Inter,sans-serif; }
.react-report-ready { margin:0; color:#18b66a; font-size:12px; }
.react-empty-state-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.react-empty-state { display:grid; min-height:220px; box-sizing:border-box; align-content:center; justify-items:center; gap:8px; padding:24px; border:1px solid #e6e9f0; border-radius:12px; background:#fff; text-align:center; }
.react-empty-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; }
.react-empty-icon.green { color:#18b66a; background:#f0fdf4; } .react-empty-icon.blue { color:#2563eb; background:#eff6ff; } .react-empty-icon.orange { color:#f59e0b; background:#fffbeb; } .react-empty-icon.gray { color:#9299ad; background:#f3f4f6; }
.react-empty-state h3 { margin:0; color:#171a2b; font:700 14px/1.2 Inter,sans-serif; }
.react-empty-state p { max-width:240px; margin:0; color:#5f6780; font:400 12px/1.3 Inter,sans-serif; }
.react-empty-state button { margin-top:4px; }
.react-generated-report { display:grid; gap:18px; margin-top:20px; padding:24px; background:#fff; }
.react-generated-report > header { display:block; }
.react-generated-report header h2 { margin:0 0 6px; color:#171a2b; font:700 24px/1.15 Inter,sans-serif; }
.react-generated-report header p { margin:0; color:#304363; font:400 12px/1.25 Inter,sans-serif; }
.react-report-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.react-report-kpis > div { display:grid; gap:6px; min-height:64px; align-content:center; padding:12px; border:1px solid #d6deed; border-radius:9px; }
.react-report-kpis span { color:#17233a; font:400 12px/1.2 Inter,sans-serif; }
.react-report-kpis b { color:#17233a; font:700 16px/1 Inter,sans-serif; }
.react-report-table-section { display:grid; gap:8px; }
.react-report-table-section h3 { margin:0; color:#17233a; font:700 18px/1.2 Inter,sans-serif; }
.react-report-table { overflow:hidden; border:1px solid #d6deed; }
.react-report-table-head,.react-report-table-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; min-height:29px; }
.react-report-table-head { background:#eef3fb; }
.react-report-table-head b,.react-report-table-row span { min-width:0; padding:7px 9px; color:#17233a; font:400 12px/1.2 Inter,sans-serif; overflow-wrap:anywhere; }
.react-report-table-head b { font-weight:700; }
.react-report-table-row { border-top:1px solid #d6deed; }
.react-report-table-section:nth-of-type(n+3) .react-report-table-head,.react-report-table-section:nth-of-type(n+3) .react-report-table-row { grid-template-columns:repeat(5,minmax(0,1fr)); }
.react-report-table-empty { padding:8px 9px; color:#5f6780; font:400 12px/1.2 Inter,sans-serif; }
@media(max-width:1000px) { .react-provisioning-grid,.react-empty-state-grid { grid-template-columns:1fr 1fr; } .react-report-controls { flex-wrap:wrap; } }
@media(max-width:700px) { .react-provisioning-grid,.react-empty-state-grid,.react-provision-kpis,.react-report-kpis { grid-template-columns:1fr; } .react-provision-row { grid-template-columns:1fr; } .react-report-controls select { width:100%; } .react-report-table { overflow-x:auto; } .react-report-table-head,.react-report-table-row { min-width:720px; } }

/* The client portal status indicator must remain green. */
.react-portal-pill > i { background:#18b66a; }

/* Figma: client home and welcome tutorial */
.react-sidebar { position:fixed; z-index:40; top:0; left:0; height:100vh; min-height:0; overflow-y:auto; color:#fff; background:#120c18; border-right:1px solid #e5e7eb; }
.react-main { display:flex; grid-column:2; flex-direction:column; height:100vh; min-height:0; overflow:hidden; }
.react-main > .react-header { flex:0 0 auto; }
.react-main > .react-content { flex:1 1 auto; min-height:0; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; }
.react-page-heading,.react-servers-heading { position:sticky; z-index:20; top:-24px; background:#f8f9fc; }
.react-page-heading { margin:-24px -32px 0; padding:24px 32px 16px; }
.react-page-heading > h1 { margin:0 0 4px; font:700 24px/1.2 Geist,sans-serif; }
.react-page-heading > .react-description { margin:0; }
.react-servers-heading { margin:-24px -32px 0; padding:24px 32px 16px; }
.react-content.overview .react-page-heading { margin:-16px -32px 0; padding:16px 32px 28px; }
.react-content.overview .react-page-heading { top:-16px; }
.react-content.overview .react-page-heading > h1 { margin:0; color:#5f6780; font:400 13px/1.2 Inter,sans-serif; }
.react-main-no-scroll { height:100vh; overflow:hidden; }
.react-main-no-scroll .react-content.overview { height:auto; }
.react-brand img:last-child { filter:brightness(0) invert(1); }
.react-portal-pill { color:#fff; font-size:11px; font-weight:600; }
.react-sidebar nav { gap:6px; }
.react-sidebar nav button { min-height:38px; padding:10px 16px; border:1px solid transparent; color:#fff; background:transparent; font:500 14px/1 Inter,sans-serif; }
.react-sidebar nav button.active,.react-sidebar nav button:hover { border-color:#2b2630; color:#fff; background:#2b2630; }
.react-sidebar nav button.active .material-symbols-outlined { color:#6831e2; }
.react-sidebar footer { color:#fff; border-color:#e5e7eb; }
.react-help-card { display:grid; grid-template-columns:29px 1fr; gap:4px 8px; margin-top:auto; padding:16px; border-radius:11px; background:#211c25; color:#fff; }
.react-help-card > .material-symbols-outlined { grid-row:1 / span 2; color:#c7cad4; font-size:29px; }
.react-help-card strong { align-self:center; font:500 15px/1.2 Inter,sans-serif; }
.react-help-card p { grid-column:1 / -1; margin:8px 0 0; font:400 12px/1.35 Inter,sans-serif; }
.react-help-card b { color:#6831e2; }
.react-sidebar footer { margin-top:0; }

.react-tutorial-backdrop { position:fixed; z-index:100; inset:0; display:grid; place-items:center; box-sizing:border-box; padding:24px; background:rgba(23,26,43,.38); }
.react-tutorial { display:flex; width:min(520px,100%); max-height:calc(100vh - 48px); box-sizing:border-box; flex-direction:column; gap:24px; padding:32px; overflow:auto; border-radius:16px; background:#fff; box-shadow:0 12px 16px rgba(0,0,0,.10); font-family:Inter,sans-serif; }
.react-tutorial > header { display:flex; align-items:center; justify-content:space-between; }
.react-tutorial-progress { display:flex; align-items:center; gap:5px; }
.react-tutorial-progress i { width:8px; height:8px; border-radius:50%; background:#e5e7eb; }
.react-tutorial-progress i.active { background:#6831e2; }
.react-tutorial-close { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:8px; color:#9299ad; background:transparent; font:400 24px/1 Inter,sans-serif; cursor:pointer; }
.react-tutorial-close:hover { color:#171a2b; background:#f3f4f8; }
.react-tutorial-title { display:grid; gap:8px; }
.react-tutorial-title h2 { margin:0; color:#171a2b; font:600 22px/1.2 Inter,sans-serif; }
.react-tutorial-title p { margin:0; color:#6b7280; font:400 14px/22px Inter,sans-serif; }
.react-tutorial-steps { display:grid; gap:12px; }
.react-tutorial-steps > div { display:flex; align-items:center; gap:12px; box-sizing:border-box; min-height:94px; padding:16px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.react-tutorial-steps > div.active { border-color:#f3f0ff; background:#f3f0ff; }
.react-tutorial-steps > div > span { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; color:#5f6780; background:#f3f4f8; font:700 13px/1 Inter,sans-serif; }
.react-tutorial-steps > div.active > span { color:#fff; background:#6831e2; }
.react-tutorial-steps section { display:grid; gap:4px; }
.react-tutorial-steps h3 { margin:0; color:#171a2b; font:600 14px/1.2 Inter,sans-serif; }
.react-tutorial-steps p { margin:0; color:#6b7280; font:400 13px/20px Inter,sans-serif; }
.react-tutorial > footer { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.react-tutorial > footer button { min-height:42px; padding:10px 0; border:0; border-radius:10px; font:600 14px/1 Inter,sans-serif; cursor:pointer; }
.react-tutorial-skip { color:#6b7280; background:transparent; }
.react-tutorial-next { min-width:87px; padding-right:18px !important; padding-left:18px !important; color:#fff; background:#6831e2; }
.react-tutorial-next:hover { background:#5623c7; }
@media(max-width:700px) {
  .react-help-card { display:none; }
  .react-tutorial { gap:18px; padding:24px; }
  .react-tutorial-steps > div { min-height:0; padding:13px; }
  .react-tutorial > footer { flex-wrap:wrap; }
}

/* Figma Accueil: live tenant overview and server creation flow */
.react-content.overview { position:relative; padding-top:16px; }
.react-content.overview > h1 { margin:0 0 28px; color:#5f6780; font:400 13px/1.2 Inter,sans-serif; }
.home-page { display:grid; gap:28px; }
.home-add-top { position:absolute; z-index:21; top:10px; right:32px; display:flex; align-items:center; gap:8px; min-height:36px; }
.react-sidebar-links { display:grid; gap:10px; margin-top:auto; }
.react-sidebar-links button { display:flex; align-items:center; gap:10px; padding:6px 4px; border:0; color:#fff; background:transparent; text-align:left; font:500 13px/1.2 Inter,sans-serif; cursor:pointer; }
.react-sidebar-links button:hover { color:#c8b8ff; }
.react-sidebar-links .material-symbols-outlined { font-size:16px; }
.react-sidebar .react-help-card { margin-top:0; }
.home-access-modal { position:relative; width:min(520px,calc(100vw - 32px)); padding:18px; border-radius:12px; background:#fff; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.home-access-modal .home-modal-close { position:absolute; z-index:2; top:12px; right:14px; border:0; color:#64748b; background:transparent; font-size:24px; cursor:pointer; }
.home-access-modal .home-access-card { margin:0; }
.home-security-evolution { display:grid; grid-template-columns:minmax(0,2.15fr) minmax(280px,1fr); gap:16px; margin-top:16px; }
.home-evolution-card,.home-targeted-card { padding:16px 18px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.home-evolution-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.home-evolution-card h3,.home-targeted-card h3 { margin:0; color:#171a2b; font:700 15px/1.2 Inter,sans-serif; }
.home-evolution-card p,.home-targeted-card p { margin:4px 0 0; color:#5f6780; font-size:11px; }
.home-evolution-card nav { display:flex; gap:4px; }
.home-evolution-card nav button { min-height:30px; padding:6px 12px; border:1px solid transparent; border-radius:7px; color:#5f6780; background:transparent; font:500 11px/1 Inter,sans-serif; cursor:pointer; }
.home-evolution-card nav button.active { border-color:#6831e2; color:#fff; background:#6831e2; }
.home-chart-wrap { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:stretch; margin-top:12px; }
.home-chart-y { display:flex; flex-direction:column; justify-content:space-between; padding:0 5px 0 0; color:#64748b; font-size:10px; text-align:right; }
.home-line-chart { position:relative; height:155px; background:repeating-linear-gradient(to right,transparent 0,transparent calc(10% - 1px),#edf0f5 10%),repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),#edf0f5 25%); cursor:crosshair; }
.home-line-chart svg { display:block; width:100%; height:100%; overflow:visible; }
.home-line-chart polyline { fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.home-line-chart path { fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.home-line-chart path.home-chart-area { fill:url(#homeChartFill); stroke:none; }
.home-line-chart circle { stroke:#fff; stroke-width:1.5; vector-effect:non-scaling-stroke; cursor:pointer; }
.home-line-chart polyline.alerts,.home-line-chart path.alerts { stroke:#6831e2; }.home-line-chart polyline.failures,.home-line-chart path.failures { stroke:#ef5b5b; }.home-line-chart polyline.blocked,.home-line-chart path.blocked { stroke:#18b66a; }
.home-line-chart circle.alerts { fill:#6831e2; }.home-line-chart circle.failures { fill:#ef5b5b; }.home-line-chart circle.blocked { fill:#18b66a; }
.home-line-chart .home-chart-cursor { stroke:#94a3b8; stroke-width:1; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; pointer-events:none; }
.home-chart-tooltip { position:absolute; z-index:5; top:8px; display:grid; gap:6px; width:190px; box-sizing:border-box; padding:10px 12px; border-radius:8px; color:#fff; background:rgba(23,26,43,.94); box-shadow:0 8px 20px rgba(23,26,43,.2); font-size:10px; pointer-events:none; }
.home-chart-tooltip strong { padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.18); font-size:11px; text-transform:capitalize; }
.home-chart-tooltip span { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:6px; }
.home-chart-tooltip span::before { width:7px; height:7px; border-radius:50%; background:#9299ad; content:""; }
.home-chart-tooltip span.alerts::before { background:#6831e2; }.home-chart-tooltip span.failures::before { background:#ef5b5b; }.home-chart-tooltip span.blocked::before { background:#18b66a; }
.home-chart-tooltip b { color:#fff; font-size:10px; }
.home-chart-x { position:relative; grid-column:2; height:18px; margin-top:5px; color:#64748b; font-size:10px; white-space:nowrap; }
.home-chart-x span { position:absolute; top:0; }
.home-evolution-card footer { display:flex; justify-content:center; gap:24px; padding-top:10px; color:#475569; font-size:11px; }
.home-evolution-card footer span::before { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; content:""; }
.home-evolution-card footer .alerts::before { background:#6831e2; }.home-evolution-card footer .failures::before { background:#ef5b5b; }.home-evolution-card footer .blocked::before { background:#18b66a; }
.home-targeted-card ol { display:grid; gap:13px; margin:18px 0 0; padding:0; list-style:none; counter-reset:targeted; }
.home-targeted-card li { display:grid; grid-template-columns:18px minmax(90px,.8fr) minmax(100px,1.5fr) 55px; align-items:center; gap:8px; counter-increment:targeted; color:#475569; font-size:11px; }
.home-targeted-card li::before { content:counter(targeted) "."; }.home-targeted-card li>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-targeted-card li>i { height:8px; overflow:hidden; border-radius:6px; background:#eef0f5; }.home-targeted-card li>i>b { display:block; height:100%; border-radius:6px; background:#6831e2; }
.home-targeted-card li>strong { text-align:right; color:#171a2b; }
@media(max-width:1000px){.home-security-evolution{grid-template-columns:1fr}.home-line-chart{height:180px}}
.home-add-top .material-symbols-outlined { font-size:16px; }
.home-section { display:grid; gap:4px; }
.home-section h2 { margin:0; color:#171a2b; font:700 24px/1.2 Inter,sans-serif; }
.home-section > p,.home-section-heading p { margin:0 0 18px; color:#5f6780; font:400 13px/1.3 Inter,sans-serif; }
.home-access-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.home-access-card { display:grid; gap:12px; padding:24px; border:0; border-radius:14px; background:#fff; }
.home-access-card > header { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid #e5e7eb; }
.home-access-card header strong { display:flex; align-items:center; gap:10px; font:600 14px/1 Inter,sans-serif; }
.home-product { display:grid; place-items:center; width:23px; height:23px; border:1px solid #e5e7eb; border-radius:50%; color:#171a2b; background:#fff; font-size:11px; }
.home-product.kibana { color:#e11d48; }
.home-access-card header em { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:5px; color:#18b66a; background:#eafbf0; font:500 11px/1 Inter,sans-serif; font-style:normal; }
.home-access-card header em i { width:6px; height:6px; border-radius:50%; background:#18b66a; }
.home-access-card > p { margin:4px 0 2px; color:#5f6780; font:400 12px/1.4 Inter,sans-serif; }
.home-credential { position:relative; display:grid; gap:5px; min-height:54px; box-sizing:border-box; padding:10px 44px 9px 14px; border:1px solid #e5e7eb; border-radius:8px; background:#f8f9fc; }
.home-credential small { color:#9299ad; font:500 9px/1 Inter,sans-serif; }
.home-credential b { overflow:hidden; color:#171a2b; font:600 13px/1.2 Inter,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.home-credential > button,.home-credential > span { position:absolute; right:10px; bottom:10px; }
.home-credential > span { display:flex; gap:8px; }
.home-credential button { display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; color:#9299ad; background:transparent; cursor:pointer; }
.home-credential .material-symbols-outlined { font-size:16px; }
.home-access-card > footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:4px; }
.home-access-card > footer button { border:0; color:#6831e2; background:transparent; font:600 11px/1 Inter,sans-serif; text-decoration:underline; cursor:pointer; }
.home-access-card > footer .home-outline { display:flex; align-items:center; gap:5px; min-height:32px; padding:8px 14px; border:1px solid #cbb9f6; border-radius:8px; text-decoration:none; }
.home-outline .material-symbols-outlined { font-size:13px; }
.home-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.home-section-heading h2 { margin-bottom:4px; }
.home-section-heading p { margin-bottom:0; }
.home-filters { display:flex; gap:10px; }
.home-filters select,.home-filters button { min-height:38px; padding:0 14px; border:1px solid #e5e7eb; border-radius:8px; color:#5f6780; background:#fff; font:500 12px/1 Inter,sans-serif; }
.home-filters button { display:flex; align-items:center; gap:7px; color:#fff; background:#1f192d; cursor:pointer; }
.home-filters .material-symbols-outlined { font-size:15px; }
.home-server-picker { position:relative; }
.home-server-picker > button { min-width:190px; justify-content:space-between; color:#5f6780; background:#fff; }
.home-server-options { position:absolute; z-index:20; top:44px; right:0; display:grid; width:280px; max-height:290px; padding:8px; overflow:auto; border:1px solid #e5e7eb; border-radius:10px; background:#fff; box-shadow:0 12px 28px rgba(23,26,43,.14); }
.home-server-options label { display:flex; align-items:center; gap:10px; padding:10px; border-radius:7px; color:#171a2b; font:500 12px/1.2 Inter,sans-serif; cursor:pointer; }
.home-server-options label:hover { background:#f8f9fc; }
.home-server-options input { width:16px; height:16px; margin:0; accent-color:#6831e2; }
.home-server-options span { display:grid; gap:3px; }
.home-server-options small { color:#9299ad; font:400 10px/1 Inter,sans-serif; }
.home-empty-server { display:grid; min-height:390px; box-sizing:border-box; place-content:center; justify-items:center; gap:12px; margin-top:16px; padding:32px; border:1px solid #e5e7eb; border-radius:16px; background:#fff; text-align:center; }
.home-empty-server > span { display:grid; place-items:center; width:68px; height:68px; border-radius:50%; color:#6831e2; background:#f3f0ff; }
.home-empty-server > span .material-symbols-outlined { font-size:34px; }
.home-empty-server h3 { margin:8px 0 0; color:#171a2b; font:700 20px/1.2 Inter,sans-serif; }
.home-empty-server p { max-width:500px; margin:0; color:#5f6780; font:400 13px/1.5 Inter,sans-serif; }
.home-empty-server button { display:flex; align-items:center; gap:8px; margin-top:6px; }
.home-empty-server a { color:#6831e2; font:500 11px/1 Inter,sans-serif; }
.home-group-label { margin-top:16px; color:#9299ad; font:600 10px/1 Inter,sans-serif; }
.home-security-kpis,.home-infra-kpis { display:grid; gap:16px; margin-top:6px; }
.home-security-kpis { grid-template-columns:repeat(3,1fr); }
.home-infra-kpis { grid-template-columns:repeat(5,1fr); }
.home-security-kpis > div,.home-infra-kpis > div { display:grid; gap:8px; min-height:114px; box-sizing:border-box; padding:18px; border-radius:12px; background:#fff; }
.home-security-kpis span,.home-infra-kpis span { display:flex; align-items:center; justify-content:space-between; color:#5f6780; font:600 12px/1 Inter,sans-serif; }
.home-security-kpis span i,.home-infra-kpis span i { width:8px; height:8px; border-radius:50%; background:#9299ad; }
.home-security-kpis i.green,.home-infra-kpis i.green { background:#18b66a; } .home-security-kpis i.orange,.home-infra-kpis i.orange { background:#f59e0b; } .home-security-kpis i.red,.home-infra-kpis i.red { background:#e5484d; }
.home-security-kpis b,.home-infra-kpis b { color:#171a2b; font:700 28px/1 Inter,sans-serif; }
.home-security-kpis small { color:#9299ad; font:500 11px/1 Inter,sans-serif; }
.home-security-kpis small.home-kpi-trend.worse { color:#e5484d; }
.home-security-kpis small.home-kpi-trend.better { color:#18b66a; }
.home-security-kpis small.home-kpi-trend.neutral { color:#9299ad; }
.home-dashboard-grid { display:grid; grid-template-columns:1.2fr 1.35fr .85fr; gap:24px; margin-top:8px; }
.home-dashboard-grid > section { min-height:300px; box-sizing:border-box; padding:24px; border:1px solid #e5e7eb; border-radius:16px; background:#fff; }
.home-dashboard-grid h3 { margin:0 0 5px; color:#171a2b; font:600 15px/1.2 Inter,sans-serif; }
.home-dashboard-grid section > p { margin:0; color:#9299ad; font:400 10px/1.2 Inter,sans-serif; }
.home-alert-chart { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:28px 0 24px; }
.home-donut { position:relative; display:grid; flex:0 0 140px; width:140px; height:140px; place-content:center; border-radius:50%; text-align:center; }
.home-donut > i { position:absolute; inset:20px; border-radius:50%; background:#fff; }
.home-donut b,.home-donut small { position:relative; z-index:1; }
.home-donut b { color:#171a2b; font:700 28px/1 Inter,sans-serif; } .home-donut small { margin-top:5px; color:#9ca3af; font:600 10px/1 Inter,sans-serif; }
.home-alert-chart ul { display:grid; flex:1; gap:4px; min-width:150px; margin:0; padding:0; list-style:none; }
.home-alert-chart li { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:10px; min-height:34px; box-sizing:border-box; padding:8px; border-radius:8px; color:#171a2b; font-size:13px; }
.home-alert-chart li.active { background:#fef2f2; font-weight:500; }
.home-alert-chart li b { font:600 14px/1 Inter,sans-serif; }
.home-alert-chart li i { width:8px; height:8px; border-radius:50%; background:#9299ad; } .home-alert-chart li i.red { background:#ee888b; } .home-alert-chart li i.orange { background:#f59e0b; } .home-alert-chart li i.blue { background:#2563eb; } .home-alert-chart li i.green { background:#18b66a; }
.home-alert-distribution { display:flex; width:100%; height:8px; margin-bottom:28px; overflow:hidden; border-radius:4px; background:#e6e9f0; }
.home-alert-distribution i.red { background:#ee888b; } .home-alert-distribution i.orange { background:#f9c060; } .home-alert-distribution i.blue { background:#719af2; } .home-alert-distribution i.green { background:#18b66a; }
.home-dashboard-grid > section > button { border:0; color:#6831e2; background:transparent; font:500 11px/1 Inter,sans-serif; cursor:pointer; }
.home-agent-bar { display:flex; height:16px; margin:30px 0 8px; overflow:hidden; border-radius:4px; color:#fff; text-align:center; font:700 10px/16px Inter,sans-serif; }
.home-agent-bar i { background:#18b66a; font-style:normal; } .home-agent-bar i + i { background:#f59e0b; }
.home-agent-legend { display:flex; justify-content:space-between; gap:12px; margin:0; padding:0; color:#5f6780; font-size:10px; list-style:none; }
.home-agent-legend li { display:flex; align-items:center; white-space:nowrap; }
.home-agent-legend li::before { width:6px; height:6px; margin-right:6px; border-radius:50%; background:#9299ad; content:""; }
.home-agent-legend li.connected::before { background:#18b66a; }
.home-agent-legend li.disconnected::before { background:#f59e0b; }
.home-agent-status-card { display:flex; flex-direction:column; }
.home-disconnect-threshold { display:grid; gap:10px; margin-top:30px; padding-top:30px; border-top:1px solid #e5e7eb; }
.home-disconnect-threshold > b { color:#171a2b; font:700 12px/1 Inter,sans-serif; }
.home-disconnect-threshold > div { display:flex; gap:10px; }
.home-disconnect-threshold select { flex:1; min-width:0; height:34px; box-sizing:border-box; padding:0 12px; border:1px solid #e6e9f0; border-radius:8px; color:#171a2b; background:#fff; font:400 13px/1 Inter,sans-serif; }
.home-disconnect-threshold .react-primary { flex:none; height:34px; min-height:34px; }
.home-disconnect-threshold small { color:#5f6780; font:400 11px/1.4 Inter,sans-serif; }
.home-consumption { display:grid; gap:16px; margin-top:28px; }
.home-consumption > div { display:flex; justify-content:space-between; color:#5f6780; font-size:11px; } .home-consumption > div b { color:#171a2b; }
.home-consumption footer { display:flex; justify-content:space-between; padding-top:18px; border-top:1px solid #e5e7eb; color:#5f6780; font-size:10px; }
.home-consumption footer em { padding:4px 6px; color:#18b66a; background:#eafbf0; font-style:normal; }
.home-modal-backdrop { position:fixed; z-index:90; inset:0; display:grid; place-items:center; box-sizing:border-box; padding:24px; background:rgba(23,26,43,.38); }
.home-server-modal,.home-success-modal { width:min(780px,100%); max-height:calc(100vh - 48px); box-sizing:border-box; padding:28px 38px; overflow:auto; border:1px solid #e5e7eb; border-radius:20px; background:#fff; box-shadow:0 16px 30px rgba(23,26,43,.12); }
.home-server-modal > h2,.home-success-modal > h2 { margin:0 0 4px; color:#171a2b; font:700 22px/1.2 Inter,sans-serif; text-align:center; }
.home-server-modal > p,.home-success-modal > p { margin:0; color:#5f6780; font:400 13px/1.4 Inter,sans-serif; text-align:center; }
.home-server-modal form { display:grid; gap:26px; margin-top:20px; padding:24px 22px 0; border:1px solid #e5e7eb; border-radius:14px; }
.home-form-row { display:grid; gap:18px; } .home-form-row.two { grid-template-columns:1fr 1fr; } .home-form-row.three { grid-template-columns:repeat(3,1fr); }
.home-form-row label { display:grid; gap:8px; color:#171a2b; font:600 12px/1.2 Inter,sans-serif; }
.home-form-row label i { color:#e11d48; font-style:normal; }
.home-form-row input,.home-form-row select { width:100%; min-height:40px; box-sizing:border-box; padding:0 14px; border:1px solid #e5e7eb; border-radius:8px; color:#171a2b; background:#fff; font:400 13px/1 Inter,sans-serif; }
.home-form-row input::placeholder,.home-form-row select:invalid { color:#a9b2c3; }
.home-server-modal form > footer { display:flex; align-items:center; justify-content:space-between; padding:20px 0; border-top:1px solid #e5e7eb; }
.home-server-modal form > footer button { display:flex; align-items:center; gap:6px; min-height:42px; padding:10px 18px; border:0; color:#5f6780; background:transparent; font:600 13px/1 Inter,sans-serif; cursor:pointer; }
.home-server-modal form > footer .react-primary { color:#fff; background:#6831e2; }
.home-message.error { margin:0; color:#e5484d; font-size:12px; }
.home-success-modal { position:relative; display:grid; justify-items:center; gap:10px; padding:48px; }
.home-modal-close { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; color:#9299ad; background:#f3f4f8; font-size:24px; cursor:pointer; }
.home-success-check { display:grid; place-items:center; width:56px; height:56px; margin-bottom:6px; border-radius:50%; color:#18b66a; background:#f0fdf4; }
.home-success-check .material-symbols-outlined { font-size:32px; }
.home-success-modal > p { max-width:570px; }
.home-success-modal > p b { color:#171a2b; }
.home-summary { display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; width:min(560px,100%); box-sizing:border-box; margin-top:20px; padding:24px; border-radius:12px; background:#f8f9fc; }
.home-summary > strong { grid-column:1/-1; color:#5f6780; font:700 12px/1 Inter,sans-serif; }
.home-summary > div { display:grid; gap:5px; } .home-summary small { color:#9ca3af; font:600 10px/1 Inter,sans-serif; } .home-summary b { color:#171a2b; font:600 14px/1.2 Inter,sans-serif; }
.home-summary em { padding:3px 8px; border-radius:6px; color:#f59e0b; background:#fef3c7; font-size:12px; font-style:normal; }
.home-success-modal > footer { display:flex; gap:16px; margin-top:22px; }
.home-success-modal > footer button { min-height:42px; padding:10px 24px; border:1px solid #e5e7eb; border-radius:8px; color:#5f6780; background:#fff; font:600 14px/1 Inter,sans-serif; cursor:pointer; }
.home-report-overlay { position:fixed; z-index:120; inset:0; display:grid; place-items:center; box-sizing:border-box; padding:16px; background:rgba(23,26,43,.3); }
.home-report-loading { display:grid; justify-items:center; width:min(480px,100%); box-sizing:border-box; gap:8px; padding:48px; border:1px solid #e5e7eb; border-radius:20px; background:#fff; box-shadow:0 12px 24px rgba(23,26,43,.12); text-align:center; }
.home-report-spinner { display:grid; place-items:center; width:64px; height:64px; margin-bottom:22px; box-sizing:border-box; border:5px solid #e6e9f0; border-right-color:#6831e2; border-radius:50%; color:#6831e2; animation:home-report-spin 1s linear infinite; }
.home-report-spinner .material-symbols-outlined { font-size:24px; animation:home-report-spin 1s linear infinite reverse; }
@keyframes home-report-spin { to { transform:rotate(360deg); } }
.home-report-loading h2 { margin:0; color:#171a2b; font:600 18px/1.3 Geist,Inter,sans-serif; }
.home-report-loading p { max-width:370px; margin:0; color:#5f6780; font:400 14px/1.4 Geist,Inter,sans-serif; }
.home-report-progress { width:100%; height:6px; margin-top:24px; overflow:hidden; border-radius:3px; background:#f3f4f8; }
.home-report-progress i { display:block; width:55%; height:100%; background:#6831e2; animation:home-report-progress 1.1s ease-in-out infinite alternate; }
@keyframes home-report-progress { from { transform:translateX(-20%); } to { transform:translateX(100%); } }
.home-report-overlay.ready { align-items:start; overflow:auto; padding:62px 16px 24px; background:rgba(23,26,43,.72); }
.home-report-preview { position:relative; display:grid; gap:28px; width:min(1360px,100%); box-sizing:border-box; padding:48px 72px; border-radius:20px; background:#fff; color:#171a2b; }
.home-report-close { position:absolute; top:16px; right:16px; width:32px; height:32px; border:0; border-radius:50%; color:#9299ad; background:#f3f4f8; font-size:24px; cursor:pointer; }
.home-report-preview > header { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.home-report-preview header small { color:#6831e2; font-size:11px; }
.home-report-preview header h2 { margin:10px 0 5px; font:700 24px/1.2 Inter,sans-serif; }
.home-report-preview header h2 em { margin-left:12px; padding:5px 8px; border-radius:6px; color:#18b66a; background:#eafbf0; font:600 10px/1 Inter,sans-serif; vertical-align:middle; }
.home-report-preview header p { margin:0; color:#5f6780; font-size:12px; }
.home-report-preview header nav { display:flex; gap:10px; }
.home-report-preview header nav button { display:flex; align-items:center; gap:6px; min-height:38px; padding:8px 14px; border:1px solid #e6e9f0; border-radius:8px; color:#5f6780; background:#fff; cursor:pointer; }
.home-report-preview header nav .react-primary { color:#fff; background:#6831e2; }
.home-report-score-row { display:grid; grid-template-columns:2.5fr repeat(3,1fr); gap:16px; }
.home-report-score,.home-report-mini,.home-report-servers,.home-report-charts > section { border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.home-report-score { display:flex; align-items:center; gap:24px; padding:24px; }
.home-report-score > strong { display:grid; place-items:center; width:80px; height:80px; box-sizing:border-box; border:6px solid #f59e0b; border-left-color:#e6e9f0; border-radius:50%; font-size:18px; }
.home-report-score h3,.home-report-mini span,.home-report-servers h3,.home-report-charts h3,.home-report-recommendations h3 { margin:0; font:600 15px/1.2 Inter,sans-serif; }
.home-report-score p { margin:8px 0; color:#5f6780; font-size:12px; }
.home-report-score em { padding:4px 8px; color:#f59e0b; background:#fff7df; font-size:10px; font-style:normal; }
.home-report-mini { display:grid; align-content:center; gap:14px; padding:16px; }
.home-report-mini span { display:flex; justify-content:space-between; color:#5f6780; font-size:12px; }
.home-report-mini span i { width:7px; height:7px; border-radius:50%; background:#e5484d; }.home-report-mini span i.orange { background:#f59e0b; }
.home-report-mini b { font-size:28px; }
.home-report-servers { display:flex; flex-direction:column; gap:20px; padding:24px; }
.home-report-servers h3 { font-family:Geist,Inter,sans-serif; font-size:16px; }
.home-report-table { display:grid; grid-template-columns:minmax(240px,1.5fr) repeat(4,minmax(140px,1fr)); color:#5f6780; font:400 13px/1.3 Geist,Inter,sans-serif; }
.home-report-table > div { display:contents; }
.home-report-table > div > * { display:flex; align-items:center; min-height:46px; box-sizing:border-box; padding:12px 16px; border-bottom:1px solid #f3f4f6; }
.home-report-table .head span { min-height:38px; color:#5f6780; background:#f8f9fc; font:600 11px/1 Geist,Inter,sans-serif; text-transform:uppercase; }
.home-report-table .head span:first-child { border-radius:6px 0 0 0; }.home-report-table .head span:last-child { justify-content:flex-end; border-radius:0 6px 0 0; }
.home-report-table .server-name { gap:8px; color:#171a2b; font-weight:600; }.home-report-table .server-name .material-symbols-outlined { color:#5f6780; font-size:16px; }
.home-report-table .last-activity { justify-content:flex-end; text-align:right; }
.home-report-table em { align-self:center; justify-self:start; min-height:auto!important; margin:12px 16px; padding:4px 8px!important; border:0!important; border-radius:6px; font:600 11px/1 Geist,Inter,sans-serif; font-style:normal; }.home-report-table em::before { width:6px; height:6px; margin-right:6px; border-radius:50%; background:currentColor; content:""; }.home-report-table em.active { color:#18b66a; background:#eafbf0; }.home-report-table em.offline { color:#ef4444; background:#fef2f2; }.home-report-table em.never { color:#9299ad; background:#f3f4f8; }
.home-report-details { padding:24px; overflow:hidden; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.home-report-details h3 { margin:0 0 20px; font:600 15px/1.2 Inter,sans-serif; }
.home-report-details-table { display:grid; grid-template-columns:repeat(var(--columns),minmax(120px,1fr)); min-width:680px; overflow:auto; color:#171a2b; font-size:11px; }
.home-report-details-table > div { display:contents; }
.home-report-details-table span { min-width:0; padding:11px 12px; overflow:hidden; border-bottom:1px solid #e5e7eb; text-overflow:ellipsis; white-space:nowrap; }
.home-report-details-table .head span { color:#171a2b; background:#eef2f8; font-weight:700; }
.home-report-details-table > p { grid-column:1/-1; margin:0; padding:12px; border-bottom:1px solid #e5e7eb; color:#5f6780; }
.home-report-charts { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.home-report-charts > section { padding:24px; }
.home-report-severity { display:grid; gap:6px; margin-top:14px; }.home-report-severity span { display:flex; justify-content:space-between; font-size:12px; }.home-report-severity > i { height:7px; overflow:hidden; border-radius:4px; background:#f1f3f6; }.home-report-severity u { display:block; height:100%; background:#719af2; }.home-report-severity u.red { background:#e5484d; }.home-report-severity u.orange,.home-report-severity u.yellow { background:#f59e0b; }
.home-report-charts section > p { color:#5f6780; font-size:13px; }
.home-report-recommendations { display:grid; gap:12px; }.home-report-recommendations > div { display:grid; gap:7px; padding:16px; border:1px solid #e5e7eb; border-radius:10px; }.home-report-recommendations em { justify-self:start; padding:4px 8px; color:#e5484d; background:#fef2f2; font-size:10px; font-style:normal; }.home-report-recommendations p { margin:0; color:#5f6780; font-size:12px; }
.home-report-preview > footer { padding-top:18px; border-top:1px solid #e5e7eb; color:#5f6780; font-size:10px; }
@media (max-width:900px) { .home-report-preview { padding:40px 24px; }.home-report-preview > header { align-items:start; flex-direction:column; }.home-report-score-row { grid-template-columns:1fr; }.home-report-charts { grid-template-columns:1fr; }.home-report-table { overflow:auto; }.home-report-preview header nav { flex-wrap:wrap; } }
.home-success-modal > footer .react-primary { border-color:#6831e2; color:#fff; background:#6831e2; }
.home-toast { position:fixed; z-index:110; right:24px; bottom:24px; padding:12px 18px; border-radius:8px; color:#fff; background:#171a2b; box-shadow:0 8px 24px rgba(0,0,0,.18); font-size:12px; }

/* Responsive foundation — mobile and tablet portal views. */
@media(max-width:900px){html,body,#reactPortalRoot{max-width:100%;overflow-x:hidden}.react-portal{grid-template-columns:76px minmax(0,1fr)!important}.react-sidebar{width:76px!important;padding:16px 12px!important}.react-sidebar .react-brand img:last-child,.react-sidebar .react-portal-pill,.react-sidebar footer,.react-sidebar nav button:not(.active)::after{display:none!important}.react-sidebar nav button{justify-content:center!important;padding:10px!important}.react-content{min-width:0;padding:20px 18px!important}.react-header{flex-wrap:wrap;gap:12px;padding:14px 18px!important}.react-actions{margin-left:auto}.react-actions button:not(.react-primary){display:none!important}.react-kpis,.react-panels,.home-access-grid,.home-dashboard-grid,.home-security-kpis,.home-infra-kpis{grid-template-columns:1fr!important}.react-table-card,.react-security-table,.react-server-table{max-width:100%;overflow-x:auto}.react-auth.react-auth{display:block!important;padding:0!important}.react-auth .react-auth-panel{min-height:100vh;padding:30px 24px!important}.react-auth-visual{display:none!important}.react-auth .react-auth-form,.react-auth-copy,.react-auth .react-auth-brand{max-width:600px;margin-left:auto;margin-right:auto}}
@media(max-width:560px){.react-portal{grid-template-columns:1fr!important}.react-sidebar{width:100%!important;min-height:auto!important;padding:12px 16px!important}.react-sidebar nav{display:flex!important;overflow-x:auto;gap:6px}.react-sidebar nav button{flex:0 0 auto;justify-content:flex-start!important}.react-sidebar .react-brand img:last-child{display:block!important}.react-content{padding:16px!important}.react-header{padding:12px 16px!important}.react-header h1{font-size:22px}.react-kpis{gap:10px}.react-card{padding:16px}.react-auth .react-auth-panel{padding:28px 20px!important}.auth-socials,.react-auth .react-auth-form form{grid-template-columns:1fr!important}.react-auth-copy h1{font-size:28px!important}}

/* Restore the original login visual. */
.react-auth-visual{display:block;overflow:hidden;border-radius:20px;background:#090909}.react-auth-visual>.auth-visual-base{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;border-radius:inherit}.react-auth-visual .auth-terminal,.react-auth-visual .auth-terminal-glow,.react-auth-visual .auth-visual-copy{display:none}
.auth-live-terminal{position:absolute;z-index:3;left:37%;top:25.5%;width:49%;height:29%;overflow:hidden;border:1.067px solid rgba(104,49,226,.78);border-radius:11px;background:#090f1b;box-shadow:0 16px 36px rgba(0,0,0,.28);color:#bec5de;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.auth-live-terminal header{display:flex;align-items:center;gap:8px;height:17%;padding:0 3.2%;border-bottom:1px solid #263041;background:#0c1320;color:#8590aa;font-size:clamp(5px,.43vw,8px);white-space:nowrap}
.auth-live-dots{display:flex;gap:3px}.auth-live-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#ff626d}.auth-live-dots i:nth-child(2){background:#f5bd4f}.auth-live-dots i:nth-child(3){background:#38c979}
.auth-live-terminal-body{display:grid;align-content:space-between;height:83%;padding:4% 4.2% 4.5%;font-weight:600;font-size:clamp(6px,.56vw,11px);line-height:1.15}
.auth-live-terminal-body p{margin:0;opacity:0;transform:translateY(3px);animation:auth-live-line 12s ease-out var(--line-delay) infinite both;white-space:nowrap}.auth-live-terminal-body .command,.auth-live-terminal-body .prompt{color:#c7c1ff}.auth-live-terminal-body .success{color:#55dfa4}.auth-live-terminal-body .info{color:#70a9ff}.auth-live-terminal-body .warning{color:#f4bc5f}.auth-live-terminal-body .muted{color:#7d879e;font-size:.86em;font-weight:500}
.auth-live-cursor{display:inline-block;width:.62em;height:1.05em;vertical-align:-.15em;background:#c7c1ff;animation:auth-live-cursor .72s step-end infinite}
@keyframes auth-live-line{0%,5%{opacity:0;transform:translateY(3px)}10%,82%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(0)}}
@keyframes auth-live-cursor{50%{opacity:0}}
.auth-security-marquee{position:absolute;z-index:4;right:0;bottom:14.4%;left:0;height:10.6%;overflow:hidden;background:#000;color:#b8b8b8}.auth-security-marquee-window{display:flex;align-items:center;height:100%;overflow:hidden}.auth-security-marquee-track{display:flex;align-items:center;flex:none;width:max-content;animation:auth-security-scroll-right 32s linear infinite;will-change:transform}.auth-security-marquee-track strong{flex:none;padding:0 clamp(28px,3.2vw,62px);font:700 clamp(14px,1.46vw,28px)/1 Geist,Inter,sans-serif;opacity:.4;white-space:nowrap}
@keyframes auth-security-scroll-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.auth-live-terminal-body p{opacity:1;transform:none;animation:none}.auth-live-cursor{animation:none}.auth-security-marquee-track{transform:none;animation:none;will-change:auto}}

/* Figma 21781:6041 — Bloc authentication screen. */
@media(min-width:851px){
  .react-auth.react-auth{grid-template-columns:minmax(520px,44.1875%) minmax(600px,52.75%);column-gap:1.6875%;padding:24px 1.375% 24px 0}
  .react-auth .react-auth-panel{padding:36px 0 30px 4.5625vw}
  .react-auth .react-auth-form{max-width:590px}
}
.react-auth .react-auth-brand img:first-child,.react-auth .react-auth-brand img:last-child{display:block;width:149px;height:38px;object-fit:contain;object-position:left center}
.react-auth .react-auth-brand,.react-auth .react-auth-copy,.react-auth .react-auth-form{width:590px;max-width:100%;margin-left:0;margin-right:0;text-align:left}
.react-auth .react-auth-brand{justify-content:flex-start}
.react-auth .react-auth-form h2{height:40px;margin-bottom:23px;font:500 22px/40px Geist,Inter,sans-serif}
.react-auth .auth-field{font:500 16px/1 Geist,Inter,sans-serif}
.react-auth .auth-field select:invalid{color:#9999a6}
.react-auth .auth-field select option{color:#171717}
.react-auth .auth-register{grid-template-columns:1fr 1fr}
.react-auth .auth-submit{height:56px;border-radius:12px;font-size:16px}
.react-auth .auth-switch{margin-top:19px!important;font-size:16px}
.react-auth .auth-field input:focus{box-shadow:0 0 0 2px rgba(104,49,226,.22)}
.auth-socials button:hover{border-color:#cfc7ef;background:#fcfbff}
.auth-submit:not(:disabled):hover{background:#927cf2}
@media(max-width:850px){.react-auth .react-auth-brand,.react-auth .react-auth-copy,.react-auth .react-auth-form{width:min(590px,100%);margin-left:auto;margin-right:auto}}
@media(max-width:1050px) { .home-access-grid,.home-dashboard-grid { grid-template-columns:1fr; } .home-infra-kpis { grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px) { .home-add-top { position:static; justify-self:start; } .home-section-heading { align-items:flex-start; flex-direction:column; } .home-filters { flex-wrap:wrap; } .home-access-grid,.home-security-kpis,.home-infra-kpis { grid-template-columns:1fr; } .home-form-row.two,.home-form-row.three,.home-summary { grid-template-columns:1fr; } .home-success-modal,.home-server-modal { padding:24px; } .home-summary > strong { grid-column:1; } .home-success-modal > footer { flex-direction:column; width:100%; } }
/* Mobile/tablet sidebar drawer. Desktop layout remains unchanged. */
.react-sidebar-toggle,
.react-sidebar-overlay { display:none!important; }

@media (max-width:900px) {
  .react-portal { display:block!important; }
  .react-sidebar {
    position:fixed!important;
    z-index:51!important;
    top:0!important;
    left:0!important;
    width:min(260px,calc(100vw - 48px))!important;
    height:100dvh!important;
    min-height:0!important;
    padding:24px!important;
    overflow-y:auto!important;
    transform:translateX(-100%)!important;
    transition:transform .22s ease!important;
    box-shadow:8px 0 24px rgba(23,11,77,.14)!important;
  }
  .react-sidebar.is-open { transform:translateX(0)!important; }
  .react-sidebar .react-brand img:last-child,
  .react-sidebar .react-portal-pill,
  .react-sidebar footer { display:block!important; }
  .react-sidebar nav { display:grid!important; overflow:visible!important; gap:6px!important; }
  .react-sidebar nav button { width:100%!important; justify-content:flex-start!important; padding:10px 16px!important; }
  .react-sidebar-overlay {
    position:fixed!important;
    z-index:50!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    padding:0!important;
    border:0!important;
    background:rgba(0,0,0,.48)!important;
  }
  .react-sidebar-overlay.is-open { display:block!important; }
  .react-sidebar-toggle {
    position:fixed!important;
    z-index:52!important;
    top:72px!important;
    left:0!important;
    display:grid!important;
    width:30px!important;
    height:44px!important;
    place-items:center!important;
    padding:0!important;
    border:1px solid #e5e7eb!important;
    border-left:0!important;
    border-radius:0 10px 10px 0!important;
    color:#6831e2!important;
    background:#fff!important;
    box-shadow:2px 0 8px rgba(23,11,77,.12)!important;
    cursor:pointer!important;
    transition:left .22s ease!important;
  }
  .react-sidebar-toggle[aria-expanded="true"] { left:min(260px,calc(100vw - 48px))!important; }

  /* Keep security and server tables intact and swipeable horizontally. */
  .react-security-table,
  .react-server-table {
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
  }
  .react-security-table .react-security-head,
  .react-security-table .react-security-row { min-width:720px; }
  .react-server-table .react-server-head,
  .react-server-table .react-server-row { min-width:1120px!important; }
  .react-security-table,
  .react-server-table {
    position:relative;
    overscroll-behavior-x:contain;
    scrollbar-width:auto;
    scrollbar-color:#9299ad #eef0f4;
    touch-action:auto!important;
  }
  .react-security-table::-webkit-scrollbar,
  .react-server-table::-webkit-scrollbar { height:12px; }
  .react-security-table::-webkit-scrollbar-track,
  .react-server-table::-webkit-scrollbar-track { background:#eef0f4; border-radius:6px; }
  .react-security-table::-webkit-scrollbar-thumb,
  .react-server-table::-webkit-scrollbar-thumb { min-width:48px; border:2px solid #eef0f4; border-radius:6px; background:#9299ad; }
}

/* Same responsive table containment as the notification recipients block. */
@media (max-width:900px) {
  .react-security-layout,
  .react-security-wide,
  .react-security-split,
  .react-security-split > *,
  .react-servers-page {
    box-sizing:border-box!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .react-security-table,
  .react-server-table {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch;
  }
}

/* Compact desktop home dashboard: keep every card visible without page scrolling. */
@media(min-width:99999px) {
  .react-main-no-scroll > .react-content.overview { padding-bottom:10px; overflow-y:hidden; }
  .react-content.overview .react-page-heading { padding-bottom:12px; }
  .home-section { gap:3px; }
  .home-section-heading h2 { margin-bottom:2px; font-size:21px; }
  .home-section-heading p { font-size:11px; }
  .home-group-label { margin-top:5px; font-size:9px; }
  .home-security-kpis,.home-infra-kpis { gap:10px; margin-top:3px; }
  .home-security-kpis > div,.home-infra-kpis > div { min-height:70px; gap:3px; padding:10px 14px; border-radius:10px; }
  .home-security-kpis span,.home-infra-kpis span { font-size:10px; }
  .home-security-kpis b,.home-infra-kpis b { font-size:22px; }
  .home-security-kpis small { font-size:9px; }
  .home-security-evolution { gap:10px; margin-top:4px; }
  .home-evolution-card,.home-targeted-card { padding:10px 14px; border-radius:10px; }
  .home-evolution-card h3,.home-targeted-card h3 { font-size:13px; }
  .home-evolution-card p,.home-targeted-card p { margin-top:2px; font-size:9px; }
  .home-evolution-card nav button { min-height:25px; padding:4px 10px; font-size:10px; }
  .home-chart-wrap { margin-top:6px; }
  .home-line-chart { height:88px; }
  .home-chart-y,.home-chart-x { font-size:8px; }
  .home-chart-x { height:13px; margin-top:3px; }
  .home-evolution-card footer { gap:18px; padding-top:4px; font-size:9px; }
  .home-targeted-card ol { gap:7px; margin-top:10px; }
  .home-targeted-card li { grid-template-columns:14px minmax(70px,.8fr) minmax(80px,1.5fr) 45px; gap:6px; font-size:9px; }
  .home-targeted-card li > i { height:6px; }
  .home-dashboard-grid { gap:10px; margin-top:4px; }
  .home-dashboard-grid > section { min-height:162px; padding:11px 14px; border-radius:10px; }
  .home-dashboard-grid h3 { margin-bottom:2px; font-size:12px; }
  .home-dashboard-grid section > p { font-size:8px; }
  .home-alert-chart { gap:12px; margin:8px 0; }
  .home-donut { flex-basis:72px; width:72px; height:72px; }
  .home-donut > i { inset:11px; }
  .home-donut b { font-size:18px; }
  .home-donut small { margin-top:2px; font-size:7px; }
  .home-alert-chart ul { gap:1px; }
  .home-alert-chart li { min-height:20px; gap:6px; padding:3px 5px; font-size:9px; }
  .home-alert-chart li b { font-size:9px; }
  .home-alert-distribution { height:6px; margin-bottom:5px; }
  .home-agent-bar { height:12px; margin:9px 0 5px; font-size:8px; line-height:12px; }
  .home-agent-legend { font-size:8px; }
  .home-disconnect-threshold { gap:5px; margin-top:9px; padding-top:8px; }
  .home-disconnect-threshold > b { font-size:9px; }
  .home-disconnect-threshold select,.home-disconnect-threshold .react-primary { height:27px; min-height:27px; font-size:9px; }
  .home-disconnect-threshold small { font-size:8px; line-height:1.2; }
  .home-consumption { gap:7px; margin-top:10px; }
  .home-consumption > div { font-size:9px; }
  .home-consumption footer { padding-top:7px; font-size:8px; }

  .home-section.home-servers {
    height:calc(100vh - 140px);
    min-height:0;
    grid-template-rows:auto auto minmax(70px,.7fr) auto minmax(70px,.7fr) minmax(175px,1.55fr) minmax(162px,1.65fr);
  }
  .home-security-kpis,.home-infra-kpis,.home-security-evolution,.home-dashboard-grid { min-height:0; }
  .home-security-kpis > div,.home-infra-kpis > div,.home-evolution-card,.home-targeted-card,.home-dashboard-grid > section { height:100%; min-height:0; }
  .home-evolution-card { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
  .home-chart-wrap { min-height:0; }
  .home-line-chart { height:100%; min-height:88px; }
  .home-targeted-card ol { align-content:space-evenly; height:calc(100% - 34px); margin-top:4px; }
  .home-dashboard-grid > section { overflow:hidden; }
  .home-alert-chart { flex:1; min-height:0; }
  .home-donut { flex-basis:clamp(72px,10vh,112px); width:clamp(72px,10vh,112px); height:clamp(72px,10vh,112px); }
  .home-consumption { align-content:space-evenly; height:calc(100% - 30px); margin-top:4px; }
}

/* Applications and network observability */
.obs-page{display:grid;gap:18px;padding-bottom:32px;color:#182033}.obs-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;border:1px solid #e7e4fb;border-radius:18px;background:linear-gradient(135deg,#f6f3ff 0%,#fff 70%)}.obs-hero.network{background:linear-gradient(135deg,#eef8ff 0%,#fff 72%);border-color:#dceefa}.obs-hero h2{margin:8px 0 5px;font-size:23px}.obs-hero p{margin:0;color:#65708a}.obs-eyebrow{display:flex;align-items:center;gap:8px;color:#6532dc;font-size:11px;font-weight:800;letter-spacing:.08em}.obs-refresh{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border:1px solid #dcd8eb;border-radius:9px;background:#fff;color:#35265e;font-weight:700;cursor:pointer}.obs-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.obs-kpis article{display:flex;align-items:center;gap:13px;padding:17px 18px;border:1px solid #e8eaf0;border-radius:14px;background:#fff;box-shadow:0 4px 15px rgba(39,31,71,.04)}.obs-kpis article>.material-symbols-outlined{display:grid;width:40px;height:40px;place-items:center;border-radius:10px;color:#6435dc;background:#f1edff}.obs-kpis span{display:block;color:#70788c;font-size:12px}.obs-kpis b{display:block;margin-top:3px;font-size:24px}.obs-panel{min-width:0;padding:20px;border:1px solid #e6e8ee;border-radius:16px;background:#fff}.obs-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}.obs-panel-head.filters-only{justify-content:flex-end}.obs-panel-head h3{margin:0;font-size:17px}.obs-panel-head p{margin:4px 0 0;color:#778096;font-size:12px}.obs-filters{display:flex;align-items:flex-end;gap:10px}.obs-filters label{display:grid;gap:5px;color:#687188;font-size:10px;font-weight:700}.obs-filters input,.obs-filters select{box-sizing:border-box;min-width:170px;height:38px;padding:0 11px;border:1px solid #dfe2e9;border-radius:8px;background:#fff;color:#242b3b;outline:none}.obs-filters input:focus,.obs-filters select:focus{border-color:#7242e8;box-shadow:0 0 0 3px rgba(114,66,232,.1)}.obs-table-wrap{max-width:100%;overflow:auto;border:1px solid #ebecef;border-radius:12px}.obs-table{width:100%;min-width:850px;border-collapse:collapse;font-size:12px}.obs-table th{padding:11px 13px;text-align:left;color:#6b7387;background:#f8f9fb;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.obs-table td{padding:12px 13px;border-top:1px solid #eef0f3;vertical-align:middle}.obs-table td strong,.obs-table td small{display:block}.obs-table td small{max-width:320px;margin-top:3px;overflow:hidden;color:#81899a;text-overflow:ellipsis;white-space:nowrap}.obs-table tbody tr:hover{background:#faf9ff}.obs-open{display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:8px;background:#f2eeff;color:#6834df;cursor:pointer}.obs-badge{display:inline-flex;padding:4px 8px;border-radius:99px;font-size:10px;font-weight:800}.obs-badge.good{color:#087a4b;background:#e7f8ef}.obs-badge.bad{color:#c23a36;background:#ffeded}.obs-badge.neutral{color:#596274;background:#eef0f4}.obs-tabs{display:flex;gap:4px;margin:-4px 0 18px;border-bottom:1px solid #e7e9ef}.obs-tabs button{padding:10px 15px;border:0;border-bottom:2px solid transparent;background:none;color:#687188;font-weight:700;cursor:pointer}.obs-tabs button.active{border-bottom-color:#6834df;color:#6834df}.obs-empty{display:grid;justify-items:center;padding:38px 18px;text-align:center;color:#7a8397}.obs-empty>.material-symbols-outlined{font-size:34px;color:#a99bcf}.obs-empty h3{margin:10px 0 4px;color:#3b4253;font-size:15px}.obs-empty p{max-width:520px;margin:0;font-size:12px}.obs-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:260px;color:#737c90}.obs-log-list{display:grid;gap:8px}.obs-log-list article{display:grid;grid-template-columns:145px 170px 150px minmax(0,1fr);gap:12px;align-items:center;padding:11px 13px;border:1px solid #eceef2;border-radius:9px}.obs-log-list time,.obs-log-list span{color:#778096;font-size:11px}.obs-log-list p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.obs-modal-backdrop{position:fixed;z-index:100;inset:0;display:flex;justify-content:flex-end;background:rgba(18,14,36,.45)}.obs-modal{width:min(520px,92vw);height:100%;padding:24px;overflow:auto;background:#fff;box-shadow:-15px 0 35px rgba(20,14,42,.18)}.obs-modal>header{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid #e8e9ee}.obs-modal header small{color:#7041df;font-size:10px;font-weight:800;letter-spacing:.08em}.obs-modal header h2{margin:5px 0 0;font-size:21px}.obs-modal header button{display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:8px;background:#f1f2f5;cursor:pointer}.obs-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.obs-detail-grid>div{min-width:0;padding:12px;border:1px solid #e9eaf0;border-radius:10px;background:#fafbfc}.obs-detail-grid span,.obs-detail-grid b{display:block}.obs-detail-grid span{margin-bottom:5px;color:#7c8496;font-size:10px}.obs-detail-grid b{overflow-wrap:anywhere;font-size:12px}
@media(max-width:900px){.obs-kpis{grid-template-columns:1fr 1fr}.obs-hero,.obs-panel-head{align-items:stretch;flex-direction:column}.obs-filters{align-items:stretch;flex-direction:column}.obs-filters input,.obs-filters select{width:100%}.obs-log-list article{grid-template-columns:1fr}.obs-detail-grid{grid-template-columns:1fr}}
.react-diagnostic-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.react-diagnostic-heading span{padding:4px 7px;border-radius:99px;color:#6134ce;background:#f1edff;font-size:10px;font-weight:700}.react-diagnostic-loading{display:flex;align-items:center;gap:8px;padding:12px;border-radius:9px;color:#737c90;background:#f8f9fc;font-size:12px}.react-diagnostic-empty{margin:0;color:#8a6270;font-size:12px}.react-sensor-list{display:grid;gap:7px}.react-sensor-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 10px;border:1px solid #e9ebf0;border-radius:9px}.react-sensor-row>i{width:7px;height:7px;border-radius:50%}.react-sensor-row>i.active{background:#18b66a;box-shadow:0 0 0 3px #e5f8ee}.react-sensor-row>i.inactive{background:#a6adba}.react-sensor-row>div{display:grid;gap:2px}.react-sensor-row strong{font-size:11px}.react-sensor-row small{color:#8a92a2;font-size:9px}.react-sensor-row>span{padding:3px 6px;border-radius:99px;font-size:9px;font-weight:700}.react-sensor-row>span.active{color:#087a4b;background:#e7f8ef}.react-sensor-row>span.inactive{color:#687188;background:#eef0f4}.react-server-observability{display:grid;grid-template-columns:1fr 1fr;gap:8px}.react-server-observability button{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:7px;align-items:center;padding:10px;border:1px solid #e7e9ef;border-radius:9px;color:#4e566a;background:#fff;text-align:left;cursor:pointer}.react-server-observability button:hover{border-color:#bdaafb;background:#faf8ff}.react-server-observability button>.material-symbols-outlined{font-size:17px;color:#7041df}.react-server-observability button>.material-symbols-outlined:last-child{font-size:14px;color:#9da4b2}.react-server-observability button span{font-size:10px}.react-server-observability button b{font-size:15px;color:#202638}.react-log-sources{display:grid;gap:8px;padding:11px;border-radius:9px;background:#f8f9fc}.react-log-sources>strong{font-size:11px}.react-log-sources>small{color:#838b9c;font-size:10px}.react-log-sources>div{display:flex;flex-wrap:wrap;gap:5px}.react-log-sources span{padding:3px 6px;border:1px solid #e1e3e9;border-radius:5px;color:#687188;background:#fff;font-size:9px}
.react-sensor-row>i.offline{background:#e5484d;box-shadow:0 0 0 3px #fdebec}.react-sensor-row>span.offline{color:#bd3036;background:#fdebec}.react-sensor-row>span.inactive{white-space:nowrap}
.react-sensor-row>i.stale{background:#f59e0b;box-shadow:0 0 0 3px #fff4d8}.react-sensor-row>span.stale{color:#a46105;background:#fff4d8}
.obs-pagination{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding-top:14px;color:#687188;font-size:12px}.obs-pagination>span{margin-right:auto}.obs-page-size,.obs-page-controls{display:flex;align-items:center;gap:7px}.obs-page-size{font-weight:700}.obs-page-size select{height:32px;padding:0 26px 0 9px;border:1px solid #dfe2e9;border-radius:7px;background:#fff;color:#30384a}.obs-page-controls button{display:grid;width:32px;height:32px;place-items:center;border:1px solid #dfe2e9;border-radius:7px;background:#fff;color:#5f42b7;cursor:pointer}.obs-page-controls button:disabled{opacity:.35;cursor:not-allowed}.obs-page-controls .material-symbols-outlined{font-size:18px}.obs-page-controls b{min-width:90px;text-align:center;color:#3b4253;font-size:11px}@media(max-width:700px){.obs-pagination{align-items:flex-start;flex-wrap:wrap}.obs-pagination>span{width:100%}.obs-page-controls{margin-left:auto}}