:root {
  --ulumin-purple: #7b52bc;
  --ulumin-purple-dark: #624098;
  --ulumin-purple-soft: #f1ecf9;
  --ulumin-purple-line: #e5daf4;
  --ulumin-ink: #1d1b2c;
  --ulumin-sidebar: #18162b;
  --ulumin-sidebar-2: #241b43;
  --ulumin-muted: #777487;
  --ulumin-subtle: #a19eac;
  --ulumin-line: #e9e7ef;
  --ulumin-bg: #f5f6fa;
  --ulumin-card: #ffffff;
  --ulumin-success: #168657;
  --ulumin-danger: #c23d4d;
  --ulumin-warning: #9a650f;
  --ulumin-info: #3472a9;
  --cloud-sidebar-width: 258px;
}

html, body { min-height: 100%; }
body.cloud-console-body {
  margin: 0;
  background: var(--ulumin-bg);
  color: var(--ulumin-ink);
  overflow-x: hidden;
}

.cloud-shell { min-height: 100vh; display: flex; background: var(--ulumin-bg); }
.cloud-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  width: var(--cloud-sidebar-width);
  padding: 26px 18px 20px;
  flex-direction: column;
  background:
    radial-gradient(circle at 70% 0%, rgba(123,82,188,.35), transparent 28%),
    linear-gradient(180deg, var(--ulumin-sidebar), var(--ulumin-sidebar-2));
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.06);
}
.cloud-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 50px;
  margin: 0 8px 28px;
  color: #fff;
  text-decoration: none;
}
.cloud-sidebar-brand:hover { color: #fff; }
.cloud-sidebar-logo { width: 126px; max-height: 46px; object-fit: contain; object-position: left center; }
.cloud-sidebar-product { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.16); min-width: 0; }
.cloud-sidebar-product strong, .cloud-sidebar-product small { display: block; line-height: 1.15; }
.cloud-sidebar-product strong { font-size: .86rem; letter-spacing: -.01em; }
.cloud-sidebar-product small { margin-top: 3px; color: rgba(255,255,255,.48); font-size: .61rem; white-space: nowrap; }
.cloud-sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.cloud-nav-section { margin: 8px 11px 6px; color: rgba(255,255,255,.35); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.cloud-nav-link {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 650;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.cloud-nav-link svg { width: 17px; height: 17px; opacity: .78; }
.cloud-nav-link:hover { color: #fff; background: rgba(255,255,255,.07); transform: translateX(2px); }
.cloud-nav-link.active { color: #fff; background: linear-gradient(135deg, rgba(123,82,188,.95), rgba(113,68,179,.72)); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.cloud-nav-link.active svg { opacity: 1; }
.cloud-sidebar-status {
  margin-top: auto;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.64);
}
.cloud-sidebar-status.is-online { color: #92e4b7; }
.cloud-sidebar-status.is-warning { color: #ffd589; }
.cloud-sidebar-status small, .cloud-sidebar-status strong { display: block; }
.cloud-sidebar-status small { color: rgba(255,255,255,.38); font-size: .59rem; text-transform: uppercase; letter-spacing: .06em; }
.cloud-sidebar-status strong { margin-top: 1px; color: currentColor; font-size: .73rem; text-transform: capitalize; }

.cloud-workspace { min-width: 0; width: calc(100% - var(--cloud-sidebar-width)); margin-left: var(--cloud-sidebar-width); }
.cloud-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: 66px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--ulumin-line);
  backdrop-filter: blur(14px);
}
.cloud-topbar-spacer { flex: 1; }
.cloud-menu-button {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f3f1f7; color: #615e70;
}
.cloud-mobile-brand img { width: 112px; height: 38px; object-fit: contain; object-position: left center; }
.cloud-provider-pill { height: 34px; padding: 0 12px; border-radius: 999px; display: flex; align-items: center; gap: 8px; background: #f1f0f4; color: #6d6978; font-size: .7rem; font-weight: 750; text-transform: capitalize; }
.cloud-provider-pill.is-online { background: #e8f6ee; color: #18784d; }
.cloud-provider-pill.is-warning { background: #fff4df; color: #94610f; }
.cloud-provider-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px currentColor; outline: 3px solid transparent; opacity: .86; }
.cloud-provider-pill .cloud-provider-dot, .cloud-sidebar-status .cloud-provider-dot, .cloud-provider-box .cloud-provider-dot { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent); }
.cloud-user-button { border: 0; background: transparent; display: flex; align-items: center; gap: 9px; color: var(--ulumin-ink); padding: 5px 7px; border-radius: 11px; }
.cloud-user-button:hover { background: #f4f2f8; }
.cloud-user-button::after { margin-left: 1px; color: #9d99a7; }
.cloud-user-button strong, .cloud-user-button small { display: block; line-height: 1.18; }
.cloud-user-button strong { font-size: .77rem; }
.cloud-user-button small { color: #9b98a6; font-size: .62rem; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.cloud-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ulumin-purple-soft); color: var(--ulumin-purple); }
.cloud-user-menu { min-width: 220px; border: 1px solid var(--ulumin-line); border-radius: 12px; box-shadow: 0 15px 42px rgba(30,27,45,.13); }
.cloud-user-menu svg { width: 16px; height: 16px; }

.cloud-content { width: 100%; max-width: 1600px; margin: 0 auto; padding: 32px 30px 10px; }
.cloud-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.cloud-eyebrow { color: var(--ulumin-purple); text-transform: uppercase; font-size: .63rem; font-weight: 850; letter-spacing: .14em; margin-bottom: 8px; }
.cloud-page-head h1 { margin: 0 0 7px; color: var(--ulumin-ink); font-size: clamp(1.75rem, 2.8vw, 2.35rem); font-weight: 700; letter-spacing: -.04em; }
.cloud-page-head p { margin: 0; color: var(--ulumin-muted); max-width: 760px; font-size: .82rem; }
.cloud-action-btn { min-height: 40px; padding-inline: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; font-size: .76rem; font-weight: 700; }
.cloud-action-btn svg { width: 15px; height: 15px; }
.cloud-link, .cloud-row-link { color: var(--ulumin-purple); font-weight: 700; text-decoration: none; }
.cloud-link { font-size: .7rem; }
.cloud-link:hover, .cloud-row-link:hover { color: var(--ulumin-purple-dark); text-decoration: underline; }
.cloud-breadcrumb { margin: 1px 0 14px; display: flex; align-items: center; gap: 6px; color: #a3a0ac; font-size: .68rem; }
.cloud-breadcrumb svg { width: 13px; height: 13px; }
.cloud-breadcrumb a { color: #817d8d; text-decoration: none; }

.cloud-flash { border: 0; border-radius: 12px; box-shadow: 0 7px 20px rgba(35,31,55,.04); font-size: .77rem; }
.cloud-flash svg { width: 16px; height: 16px; }

.cloud-stat-card {
  min-height: 116px; padding: 17px 18px; display: flex; align-items: center; gap: 14px;
  background: var(--ulumin-card); border: 1px solid var(--ulumin-line); border-radius: 16px;
  box-shadow: 0 5px 20px rgba(35,31,55,.03);
}
.cloud-stat-card.compact { min-height: 102px; }
.cloud-stat-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--ulumin-purple-soft); color: var(--ulumin-purple); }
.cloud-stat-card span, .cloud-stat-card strong, .cloud-stat-card small { display: block; }
.cloud-stat-card > div > span { color: var(--ulumin-muted); font-size: .7rem; font-weight: 700; }
.cloud-stat-card strong { margin: 2px 0 1px; color: var(--ulumin-ink); font-size: 1.62rem; line-height: 1.1; letter-spacing: -.035em; }
.cloud-stat-card small { color: #aaa6b3; font-size: .63rem; }

.cloud-card { background: var(--ulumin-card); border: 1px solid var(--ulumin-line); border-radius: 16px; box-shadow: 0 6px 23px rgba(35,31,55,.032); overflow: hidden; }
.cloud-card-head { min-height: 72px; padding: 16px 19px; border-bottom: 1px solid var(--ulumin-line); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.cloud-card-head > div:first-child { display: flex; align-items: center; gap: 11px; }
.cloud-card-icon { width: 37px; height: 37px; flex: 0 0 37px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--ulumin-purple-soft); color: var(--ulumin-purple); }
.cloud-card-head h2 { margin: 0 0 2px; color: #353243; font-size: .91rem; font-weight: 750; letter-spacing: -.01em; }
.cloud-card-head p { margin: 0; color: #9a96a4; font-size: .68rem; }
.cloud-card-body { padding: 19px; }
.cloud-card .form-label, .cloud-modal .form-label { margin-bottom: 5px; color: #64606f; font-size: .67rem; font-weight: 750; }
.cloud-card .form-control, .cloud-card .form-select, .cloud-modal .form-control, .cloud-modal .form-select {
  min-height: 40px; border: 1px solid #e2dfe8; border-radius: 9px; color: #3f3c4a; background-color: #fff; box-shadow: none; font-size: .76rem;
}
.cloud-card .form-control:focus, .cloud-card .form-select:focus, .cloud-modal .form-control:focus, .cloud-modal .form-select:focus { border-color: rgba(123,82,188,.65); box-shadow: 0 0 0 .18rem rgba(123,82,188,.10); }
.cloud-card .form-text { color: #9995a3; font-size: .65rem; }
.cloud-card .btn-primary, .cloud-action-btn.btn-primary, .cloud-modal .btn-primary { background: var(--ulumin-purple); border-color: var(--ulumin-purple); }
.cloud-card .btn-primary:hover, .cloud-action-btn.btn-primary:hover, .cloud-modal .btn-primary:hover { background: var(--ulumin-purple-dark); border-color: var(--ulumin-purple-dark); }
.cloud-card .btn svg, .cloud-action-btn svg { width: 15px; height: 15px; }

.cloud-table { --bs-table-bg: transparent; color: #4d4958; }
.cloud-table thead th { padding: 10px 15px; background: #fbfafd !important; border-bottom: 1px solid var(--ulumin-line); color: #96929f !important; font-size: .61rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.cloud-table tbody td { padding: 12px 15px; background: #fff !important; border-color: #f0eef4; color: #575361 !important; font-size: .72rem; vertical-align: middle; }
.cloud-table-roomy tbody td { padding-top: 14px; padding-bottom: 14px; }
.cloud-table tbody tr:last-child td { border-bottom: 0; }
.cloud-table tbody tr:hover td { background: #fcfbfe !important; }
.cloud-table strong { color: #373442; font-size: .75rem; }
.cloud-table small { color: #9f9ba8; font-size: .63rem; margin-top: 2px; }
.cloud-message-preview { max-width: 560px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cloud-activity-message { min-width: 260px; max-width: 500px; color: #686473 !important; }

.cloud-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: #f0eff3; color: #777381; font-size: .61rem; font-weight: 780; text-transform: capitalize; white-space: nowrap; }
.cloud-status.is-success { background: #e8f7ef; color: var(--ulumin-success); }
.cloud-status.is-danger { background: #fdecee; color: var(--ulumin-danger); }
.cloud-status.is-warning { background: #fff4df; color: var(--ulumin-warning); }
.cloud-status.is-info { background: #e9f2fb; color: var(--ulumin-info); }
.cloud-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cloud-platform { padding: 4px 8px; border: 1px solid #e5e2e9; border-radius: 7px; color: #6d6977; font-size: .61rem; font-weight: 720; text-transform: capitalize; }
.cloud-list-avatar, .cloud-service-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #f1edf8; color: #7651b1; }
.cloud-empty { min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #aaa6b2; font-size: .72rem; }
.cloud-empty svg { width: 17px; height: 17px; }

.cloud-health-row { min-height: 49px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0eef4; }
.cloud-health-row span { display: flex; align-items: center; gap: 9px; color: #716d7b; font-size: .73rem; }
.cloud-health-row span svg { width: 16px; height: 16px; color: var(--ulumin-success); }
.cloud-health-row strong { font-size: .95rem; color: #3b3846; }
.cloud-health-row.is-danger span svg, .cloud-health-row.is-danger strong { color: var(--ulumin-danger); }
.cloud-provider-box { margin-top: 17px; padding: 12px; display: flex; align-items: flex-start; gap: 11px; border-radius: 11px; background: #f5f3f8; color: #716d79; }
.cloud-provider-box.is-online { background: #edf8f2; color: #207a52; }
.cloud-provider-box.is-warning { background: #fff6e7; color: #96620f; }
.cloud-provider-box small, .cloud-provider-box strong { display: block; }
.cloud-provider-box small { color: #8e8996; font-size: .59rem; text-transform: uppercase; letter-spacing: .05em; }
.cloud-provider-box strong { font-size: .72rem; text-transform: capitalize; }
.cloud-provider-box p { margin: 2px 0 0; color: #97939f; font-size: .61rem; }

.cloud-customer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cloud-customer-tile { min-height: 73px; padding: 11px 12px; border: 1px solid #ece9f1; border-radius: 12px; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; background: #fdfcfe; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.cloud-customer-tile:hover { color: inherit; border-color: #d9cce9; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(55,45,75,.06); }
.cloud-customer-tile > div { flex: 1; min-width: 0; }
.cloud-customer-tile strong, .cloud-customer-tile small, .cloud-customer-tile span { display: block; }
.cloud-customer-tile strong { color: #3e3949; font-size: .74rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cloud-customer-tile small { margin-top: 2px; color: #8e8997; font-size: .61rem; }
.cloud-customer-tile div > span { margin-top: 2px; color: #aaa5b1; font-size: .58rem; }
.cloud-customer-tile > svg { width: 15px; height: 15px; color: #aaa5b1; }
.cloud-attention-list, .cloud-mini-activity { display: flex; flex-direction: column; }
.cloud-attention-row, .cloud-mini-activity-row { min-height: 62px; padding: 11px 16px; border-bottom: 1px solid #efedf2; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: inherit; text-decoration: none; }
.cloud-attention-row:last-child, .cloud-mini-activity-row:last-child { border-bottom: 0; }
.cloud-attention-row:hover { color: inherit; background: #fcfbfe; }
.cloud-attention-row strong, .cloud-attention-row small, .cloud-mini-activity-row strong, .cloud-mini-activity-row small { display: block; }
.cloud-attention-row strong, .cloud-mini-activity-row strong { color: #45414e; font-size: .7rem; }
.cloud-attention-row small, .cloud-mini-activity-row small { margin-top: 2px; color: #9d98a5; font-size: .59rem; }

.cloud-filter-bar { min-height: 70px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ulumin-line); }
.cloud-filter-bar .form-control, .cloud-search-box .form-control { background: #fff; }
.cloud-search-box { position: relative; }
.cloud-search-box > svg { position: absolute; z-index: 3; left: 12px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: #9b97a4; pointer-events: none; }
.cloud-search-box .form-control { padding-left: 36px; }
.cloud-result-count { color: #9995a2; font-size: .68rem; white-space: nowrap; }
.cloud-pagination-bar { min-height: 56px; padding: 10px 16px; border-top: 1px solid var(--ulumin-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #928e9c; font-size: .66rem; }
.cloud-pagination-bar .btn { min-width: 72px; }
.cloud-modal { border: 0; border-radius: 15px; box-shadow: 0 25px 80px rgba(30,27,45,.18); overflow: hidden; }
.cloud-modal .modal-header, .cloud-modal .modal-footer { border-color: var(--ulumin-line); }

.cloud-service-grid { display: flex; flex-direction: column; gap: 8px; }
.cloud-service-tile { padding: 10px 11px; border: 1px solid #ece9f1; border-radius: 12px; display: flex; align-items: center; gap: 10px; background: #fdfcfe; }
.cloud-service-tile strong, .cloud-service-tile small { display: block; }
.cloud-service-tile strong { color: #403c49; font-size: .72rem; }
.cloud-service-tile small { margin-top: 2px; color: #9c98a5; font-size: .6rem; }
.cloud-service-tile form { margin-left: 4px; }
.cloud-test-notice { padding: 14px 16px; border: 1px solid #ded4ee; border-radius: 13px; display: flex; align-items: flex-start; gap: 12px; background: #f7f3fc; }
.cloud-test-notice > span { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ulumin-purple-soft); color: var(--ulumin-purple); }
.cloud-test-notice strong { display: block; color: #494452; font-size: .75rem; }
.cloud-test-notice p { margin: 2px 0 0; color: #807b89; font-size: .67rem; }
.cloud-filter-card { overflow: visible; }

.cloud-mobile-nav { --bs-offcanvas-width: min(86vw, 290px); padding: 10px 8px 18px; background: linear-gradient(180deg, var(--ulumin-sidebar), var(--ulumin-sidebar-2)); color: #fff; }
.cloud-mobile-nav .offcanvas-header { min-height: 48px; justify-content: flex-end; }
.cloud-mobile-nav .cloud-sidebar-brand { margin-top: 0; }
.cloud-mobile-nav .cloud-sidebar-status { margin: auto 10px 0; }

@media (max-width: 1199.98px) {
  .cloud-customer-grid { grid-template-columns: 1fr; }
  .cloud-activity-message { min-width: 220px; }
}
@media (max-width: 991.98px) {
  .cloud-workspace { width: 100%; margin-left: 0; }
  .cloud-topbar { height: 62px; padding: 0 18px; }
  .cloud-content { padding: 26px 20px 10px; }
  .cloud-page-head { align-items: flex-start; }
}
@media (max-width: 767.98px) {
  .cloud-page-head { flex-direction: column; margin-bottom: 20px; }
  .cloud-customer-head .d-flex { width: 100%; }
  .cloud-customer-head .btn { flex: 1; }
  .cloud-filter-bar { align-items: stretch; flex-direction: column; }
  .cloud-result-count { align-self: flex-end; }
  .cloud-service-tile { flex-wrap: wrap; }
  .cloud-service-tile form { margin-left: auto; }
}
@media (max-width: 575.98px) {
  .cloud-content { padding: 22px 14px 6px; }
  .cloud-topbar { padding: 0 12px; }
  .cloud-mobile-brand img { width: 96px; }
  .cloud-stat-card { min-height: 105px; padding: 13px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .cloud-stat-card.compact { min-height: 96px; }
  .cloud-stat-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
  .cloud-stat-card strong { font-size: 1.35rem; }
  .cloud-card-head { padding: 14px; align-items: flex-start; }
  .cloud-card-head p { display: none; }
  .cloud-card-body { padding: 15px; }
  .cloud-filter-bar form { flex-wrap: wrap; }
  .cloud-filter-bar .cloud-search-box { width: 100%; flex-basis: 100%; }
  .cloud-pagination-bar { align-items: flex-start; flex-direction: column; }
  .cloud-pagination-bar .btn-group { width: 100%; }
  .cloud-pagination-bar .btn { flex: 1; }
  .cloud-test-notice { padding: 12px; }
}

.cloud-detail-grid { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1.4fr); gap: 11px 18px; }
.cloud-detail-grid dt { color: #96929f; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cloud-detail-grid dd { margin: 0; min-width: 0; color: #4f4b59; font-size: .75rem; overflow-wrap: anywhere; }
.cloud-detail-grid code { color: #665679; font-size: .68rem; }
.cloud-wrap-cell { min-width: 220px; max-width: 430px; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .cloud-detail-grid { grid-template-columns: 1fr; gap: 3px; } .cloud-detail-grid dd { margin-bottom: 9px; } }