/* RA Factory UI standard based on Verticals screen.
   Applies only to factory services preview and servers screen.
   Do not use this as a new design layer — it normalizes custom pages to the existing shell. */

html[data-ra-standard-page="services"],
html[data-ra-standard-page="services"] body,
html[data-ra-standard-page="servers"],
html[data-ra-standard-page="servers"] body {
  margin: 0 !important;
  background: #0d0f14 !important;
  color: #e8eaf0 !important;
  font-family: Inter, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  overflow: hidden !important;
}

html[data-ra-standard-page="services"] *,
html[data-ra-standard-page="servers"] * {
  font-family: Inter, sans-serif !important;
  box-sizing: border-box !important;
  letter-spacing: normal;
  font-synthesis: none !important;
  text-rendering: geometricPrecision !important;
}

/* Shell */
html[data-ra-standard-page="services"] .app {
  min-height: 100vh !important;
  height: 100vh !important;
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  background: #0d0f14 !important;
  overflow: hidden !important;
}

html[data-ra-standard-page="services"] .sidebar,
html[data-ra-standard-page="servers"] .sidebar {
  width: 220px !important;
  background: #13161e !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  color: #e8eaf0 !important;
  overflow: hidden !important;
}

html[data-ra-standard-page="services"] .brand,
html[data-ra-standard-page="servers"] .brand {
  height: 139px !important;
  padding: 22px 20px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

html[data-ra-standard-page="services"] .logo,
html[data-ra-standard-page="servers"] .logo {
  width: 50px !important;
  height: 50px !important;
  border-radius: 12px !important;
  margin: 0 0 16px 0 !important;
  overflow: hidden !important;
  background-color: #070a10 !important;
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
  box-shadow: none !important;
}

html[data-ra-standard-page="services"] .brand-title,
html[data-ra-standard-page="servers"] .brand-title {
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: #eef2fb !important;
}

html[data-ra-standard-page="services"] .brand-subtitle,
html[data-ra-standard-page="servers"] .brand-subtitle {
  margin-top: 6px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  color: #8a91a0 !important;
}

/* Sidebar nav: exact density from factory shell */
html[data-ra-standard-page="services"] .nav,
html[data-ra-standard-page="servers"] .nav {
  padding: 8px 0 0 !important;
}

html[data-ra-standard-page="services"] .nav-section,
html[data-ra-standard-page="servers"] .nav-section {
  padding: 14px 16px 4px !important;
  font-size: 9px !important;
  line-height: normal !important;
  font-weight: 400 !important;
  letter-spacing: 1.35px !important;
  color: #8892a4 !important;
  text-transform: uppercase !important;
}

html[data-ra-standard-page="services"] .nav-item,
html[data-ra-standard-page="servers"] .nav-item {
  width: 220px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  border-radius: 0 !important;
  border-left: 3px solid transparent !important;
  color: #a1a8b7 !important;
  background: transparent !important;
  font-size: 13px !important;
  line-height: normal !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

html[data-ra-standard-page="services"] .nav-item.active,
html[data-ra-standard-page="servers"] .nav-item.active {
  color: #6b7fd7 !important;
  background: rgba(107,127,215,.10) !important;
  border-left-color: #6b7fd7 !important;
}

html[data-ra-standard-page="services"] .nav-icon,
html[data-ra-standard-page="servers"] .nav-icon {
  width: 18px !important;
  min-width: 18px !important;
  font-size: 15px !important;
  line-height: normal !important;
  color: currentColor !important;
  text-align: center !important;
  opacity: 1 !important;
}

html[data-ra-standard-page="services"] .nav-badge,
html[data-ra-standard-page="servers"] .nav-badge {
  margin-left: auto !important;
  min-width: 16px !important;
  height: 14px !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: #6b7fd7 !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

/* Profile */
html[data-ra-standard-page="services"] .profile,
html[data-ra-standard-page="servers"] .profile {
  height: 69px !important;
  padding: 15px 16px !important;
  display: grid !important;
  grid-template-columns: 34px 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}

html[data-ra-standard-page="services"] .profile .avatar,
html[data-ra-standard-page="servers"] .profile .avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: #77adff !important;
  color: #e8eaf0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html[data-ra-standard-page="services"] .profile-name,
html[data-ra-standard-page="servers"] .profile-name {
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #e8eaf0 !important;
}

html[data-ra-standard-page="services"] .profile-role,
html[data-ra-standard-page="servers"] .profile-role {
  margin-top: 3px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  color: #d8bd58 !important;
}

/* Main area */
html[data-ra-standard-page="services"] .main {
  height: 100vh !important;
  overflow: hidden !important;
  background: #0d0f14 !important;
}

html[data-ra-standard-page="services"] .topbar {
  height: 56px !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: #13161e !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

html[data-ra-standard-page="services"] .title {
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  color: #e8eaf0 !important;
}

html[data-ra-standard-page="services"] .subtitle {
  margin-left: 6px !important;
  font-size: 13px !important;
  line-height: normal !important;
  font-weight: 400 !important;
  color: #8f96a8 !important;
}

html[data-ra-standard-page="services"] .btn {
  height: 34px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(126,145,238,.35) !important;
  background: #151b2b !important;
  color: #e4e8f4 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

html[data-ra-standard-page="services"] .stats {
  padding: 28px 28px 18px !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 16px !important;
}

html[data-ra-standard-page="services"] .stat-card {
  height: 104px !important;
  padding: 18px 20px !important;
  border-radius: 12px !important;
  background: #13161e !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  overflow: hidden !important;
}

/* Services workarea */
html[data-ra-standard-page="services"] .workarea {
  height: calc(100vh - 56px - 150px) !important;
  margin: 0 28px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(480px,.98fr) minmax(460px,1.02fr) !important;
  gap: 0 !important;
  border-radius: 12px !important;
  background: #10141d !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  overflow: hidden !important;
}

html[data-ra-standard-page="services"] .list-pane,
html[data-ra-standard-page="services"] .service-pane {
  position: relative !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-ra-standard-page="services"] .section-title {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  height: 62px !important;
  padding: 22px 22px 10px !important;
  background: linear-gradient(#10141d 72%, rgba(16,20,29,.88)) !important;
  color: #aab1c0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
}

html[data-ra-standard-page="services"] .list-meta {
  position: sticky !important;
  top: 62px !important;
  z-index: 4 !important;
  padding: 8px 22px 14px !important;
  background: rgba(16,20,29,.94) !important;
  color: #8f96a8 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

html[data-ra-standard-page="services"] .service-list {
  height: 100% !important;
  overflow-y: auto !important;
  padding: 0 22px 28px !important;
  scrollbar-width: thin !important;
}

html[data-ra-standard-page="services"] .service-card {
  min-height: 86px !important;
  height: auto !important;
  padding: 14px 14px !important;
  margin: 0 0 10px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) 62px 112px !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 10px !important;
  background: #131820 !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  overflow: hidden !important;
}

html[data-ra-standard-page="services"] .service-card.active {
  background: #151b2a !important;
  border-color: rgba(112,133,224,.78) !important;
}

html[data-ra-standard-page="services"] .service-title {
  font-size: 15px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  color: #e8eaf0 !important;
}

html[data-ra-standard-page="services"] .service-desc {
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #8f96a8 !important;
}

html[data-ra-standard-page="services"] .service-path,
html[data-ra-standard-page="services"] code.path,
html[data-ra-standard-page="services"] .path {
  display: none !important;
}

/* Details */
html[data-ra-standard-page="services"] .detail {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 24px 22px 32px !important;
}

html[data-ra-standard-page="services"] .detail-head {
  min-height: 80px !important;
  margin: 0 0 18px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0,1fr) auto !important;
  gap: 14px !important;
  align-items: start !important;
}

html[data-ra-standard-page="services"] .detail-title {
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  color: #e8eaf0 !important;
}

html[data-ra-standard-page="services"] .detail-subtitle,
html[data-ra-standard-page="services"] .status-line {
  margin-top: 6px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #55d6aa !important;
}

html[data-ra-standard-page="services"] .detail-tabs {
  height: 46px !important;
  display: flex !important;
  align-items: end !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

html[data-ra-standard-page="services"] .detail-tabs button,
html[data-ra-standard-page="services"] .tab {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html[data-ra-standard-page="services"] .info-row {
  min-height: 52px !important;
  padding: 10px 12px !important;
  margin: 8px 0 !important;
  display: grid !important;
  grid-template-columns: 38px 150px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 10px !important;
  background: #11161f !important;
  border: 1px solid rgba(255,255,255,.065) !important;
}

html[data-ra-standard-page="services"] .info-key {
  font-size: 12px !important;
  color: #8f96a8 !important;
  font-weight: 500 !important;
}

html[data-ra-standard-page="services"] .info-value {
  font-size: 13px !important;
  color: #e8eaf0 !important;
  font-weight: 400 !important;
}

/* Servers page: normalize custom page to shell typography, not layout rewrite */
html[data-ra-standard-page="servers"] h1,
html[data-ra-standard-page="servers"] main h1,
html[data-ra-standard-page="servers"] .main h1 {
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  color: #e8eaf0 !important;
}

html[data-ra-standard-page="servers"] h2,
html[data-ra-standard-page="servers"] h3,
html[data-ra-standard-page="servers"] main h2,
html[data-ra-standard-page="servers"] main h3 {
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  color: #e8eaf0 !important;
}

html[data-ra-standard-page="servers"] p,
html[data-ra-standard-page="servers"] span,
html[data-ra-standard-page="servers"] div {
  letter-spacing: normal !important;
}

html[data-ra-standard-page="servers"] main,
html[data-ra-standard-page="servers"] .main {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #e8eaf0 !important;
}

html[data-ra-standard-page="servers"] button {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}