/* ==========================================================================
   PHASE 4 SECTION: Tokens/Theme
   ========================================================================== */
:root {
  --bg: #F5F5F5;
  --page-bg: #f7f7f4;
  --page-bg-start: #F7F7F7;
  --page-bg-end: #F3F3F3;
  --surface: #fff;
  --surface-2: #fafaf8;
  --surface-3: #f4f3ee;
  --border: #e6e5de;
  --text: #1a1a2e;
  --text-dim: #5a5a72;
  --text-muted: #8e8ea0;
  --c-azure: #0078d4;
  --c-m365: #d83b01;
  --c-entra: #107c10;
  --c-security: #5c2d91;
  --c-partner: #e97c00;
  --c-intune: #00a4ef;
  --c-winserver: #7a7574;
  --c-azure-bg: rgba(0, 120, 212, .08);
  --c-m365-bg: rgba(216, 59, 1, .08);
  --c-entra-bg: rgba(16, 124, 16, .08);
  --c-security-bg: rgba(92, 45, 145, .08);
  --c-partner-bg: rgba(233, 124, 0, .08);
  --c-intune-bg: rgba(0, 164, 239, .08);
  --c-winserver-bg: rgba(122, 117, 116, .08);
  --green: #16a34a;
  --ionix-product-accent: var(--green);
  --ionix-product-accent-soft: color-mix(in srgb, var(--ionix-product-accent) 8%, var(--surface) 92%);
  --ionix-product-accent-strong: color-mix(in srgb, var(--ionix-product-accent) 22%, var(--surface) 78%);
  --ionix-product-accent-rgb: 22, 163, 74;
  --nav-item-hover-bg: var(--ionix-product-accent-soft);
  --nav-item-active-bg: var(--ionix-product-accent-strong);

  --orange: #d97706;
  --red: #dc2626;
  --sev-crit: #dc2626;
  --sev-imp: #d97706;
  --sev-mod: #2563eb;
  --sev-low: #6b7280;
  --modal-bg: #fff;
  --shadow: rgba(0, 0, 0, .15);
  --topnav-offset: 0px;
  --app-sticky-offset: calc(var(--topnav-offset, 0px) + 8px);
  --ledger-sticky-top: calc(var(--app-sticky-offset, 0px) + 5px);
  --control-height: 36px;
  --page-shell-offset: 14px;
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --networking-sticky-offset: 104px;
  --z-page-sticky: 80;
  --z-global-nav: 1000;
  --z-global-menu: 1240;
  --z-global-menu-popover: 1260;
  --space-300: 12px;
  --space-400: 16px;
  --card-hover-accent: var(--green)
}

[data-theme="dark"] {
  --bg: #0f1117;
  --page-bg: #0f1117;
  --page-bg-start: #111520;
  --page-bg-end: #0f1117;
  --surface: #181a24;
  --surface-2: #1f2231;
  --surface-3: #282b3a;
  --border: #2e3145;
  --text: #e2e4ed;
  --text-dim: #a0a3b5;
  --text-muted: #6b6f82;
  --c-azure: #4da6ff;
  --c-azure-bg: rgba(0, 120, 212, .15);
  --c-m365: #ff8a5c;
  --c-m365-bg: rgba(216, 59, 1, .15);
  --c-entra: #4eca4e;
  --c-entra-bg: rgba(16, 124, 16, .15);
  --c-security: #b088d4;
  --c-security-bg: rgba(92, 45, 145, .15);
  --c-partner: #ffaa44;
  --c-partner-bg: rgba(233, 124, 0, .15);
  --c-intune: #5ec4f5;
  --c-intune-bg: rgba(0, 164, 239, .15);
  --c-winserver: #a89f9e;
  --c-winserver-bg: rgba(122, 117, 116, .15);
  --sev-crit: #ff6b6b;
  --sev-imp: #fbbf24;
  --sev-mod: #60a5fa;
  --sev-low: #9ca3af;
  --modal-bg: #1f2231;
  --shadow: rgba(0, 0, 0, .5);
  --ionix-product-accent-soft: color-mix(in srgb, var(--ionix-product-accent) 16%, var(--surface) 84%);
  --ionix-product-accent-strong: color-mix(in srgb, var(--ionix-product-accent) 28%, var(--surface) 72%);
  --nav-item-hover-bg: color-mix(in srgb, var(--ionix-product-accent) 16%, var(--surface) 84%);
  --nav-item-active-bg: color-mix(in srgb, var(--ionix-product-accent) 22%, var(--surface) 78%);

}

/* ==========================================================================
   PHASE 4 SECTION: Reset/Base
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  overflow-x: visible
}

body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  background: linear-gradient(180deg, var(--page-bg-start) 0%, var(--page-bg-end) 34%, var(--bg) 100%);
  background-attachment: fixed;
  color: var(--text);
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s
}

body,
.app-scroll,
.main-scroll,
.page-scroll,
.content-scroll,
.main-content,
#panel-costs.active {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar,
.app-scroll::-webkit-scrollbar,
.main-scroll::-webkit-scrollbar,
.page-scroll::-webkit-scrollbar,
.content-scroll::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
#panel-costs.active::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

#appRoot {
  display: none;
}

html[data-auth-state="authenticated"][data-app-ready="true"] #appRoot {
  display: block;
}

.auth-splash {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.auth-splash-glow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(980px, 92vw);
  height: min(980px, 92vw);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--green) 15%, transparent) 0%,
      color-mix(in srgb, var(--green) 9%, transparent) 24%,
      transparent 68%);
  opacity: .55;
  pointer-events: none;
  filter: blur(20px);
}

.auth-splash-card {
  --auth-splash-card-bg: rgba(255, 255, 255, .96);
  width: min(760px, 100%);
  background: var(--auth-splash-card-bg);
  border: 1px solid rgba(214, 224, 217, .95);
  border-radius: 28px;
  padding: 44px 42px 38px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.auth-splash-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background:
    conic-gradient(from 0deg,
      rgba(20, 154, 104, .14) 0deg,
      rgba(20, 154, 104, .16) 70deg,
      rgba(20, 154, 104, .92) 122deg,
      rgba(20, 154, 104, .2) 198deg,
      rgba(20, 154, 104, .14) 262deg,
      rgba(20, 154, 104, .78) 320deg,
      rgba(20, 154, 104, .14) 360deg);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: authSplashBorderOrbit 5.4s linear infinite;
}

.auth-splash-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: calc(28px - 2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(252,253,252,.97) 100%);
  pointer-events: none;
  z-index: 0;
}

.auth-splash-card > * {
  position: relative;
  z-index: 1;
}

.auth-splash-wordmark {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .33ch;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(34px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--text);
}

.auth-splash-wordmark-ionix {
  color: var(--text);
}

.auth-splash-wordmark-ledger {
  color: #149a68;
}

.auth-splash-tagline {
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--text-muted) 78%, #8ea18f 22%);
  font-size: 16px;
  line-height: 1.55;
}

.auth-splash-message {
  margin-top: 30px;
  color: color-mix(in srgb, var(--text) 92%, #36584d 8%);
  font-size: clamp(24px, 3vw, 28px);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 700;
}

.auth-splash-progress {
  margin: 28px auto 0;
  width: min(100%, 620px);
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(228, 238, 231, .9) 0%, rgba(217, 229, 220, .96) 100%);
  border: 1px solid rgba(205, 219, 209, .95);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}

.auth-splash-progress-bar {
  display: block;
  width: 42%;
  min-width: 140px;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      rgba(20, 154, 104, .35) 0%,
      #149a68 24%,
      #1aac75 56%,
      #149a68 100%);
  box-shadow: 0 0 0 1px rgba(20, 154, 104, .08), 0 8px 20px rgba(20, 154, 104, .18);
  animation: authSplashLoadingBar 1.9s cubic-bezier(.45, .05, .55, .95) infinite;
  will-change: transform;
}

.auth-splash-helper {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.auth-splash-details {
  margin-top: 16px;
  min-height: 20px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.auth-splash-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.auth-splash-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.auth-splash-btn-primary {
  background: linear-gradient(180deg, #1aac75 0%, #149a68 100%);
  border-color: #149a68;
  color: #fff;
}

.auth-splash-btn:hover,
.auth-splash-btn:focus-visible {
  border-color: #149a68;
  color: #149a68;
  background: #fbfdfb;
  box-shadow: 0 10px 24px rgba(20,154,104,.08);
  transform: translateY(-1px);
}

.auth-splash-btn-primary:hover,
.auth-splash-btn-primary:focus-visible {
  color: #fff;
  background: linear-gradient(180deg, #1db57c 0%, #0f8157 100%);
  box-shadow: 0 14px 30px rgba(20,154,104,.18);
}

.auth-splash-btn:focus-visible {
  outline: none;
}

html[data-auth-state="authenticated"][data-app-ready="true"] .auth-splash {
  display: none;
}

@keyframes authSplashBorderOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes authSplashLoadingBar {
  0% {
    transform: translateX(-135%);
  }
  100% {
    transform: translateX(325%);
  }
}

@media (max-width: 760px) {
  .auth-splash {
    padding: 18px;
  }

  .auth-splash-card {
    padding: 34px 24px 30px;
  }

  .auth-splash-message {
    margin-top: 24px;
    font-size: 22px;
  }

  .auth-splash-progress {
    margin-top: 24px;
    height: 11px;
  }

  .auth-splash-wordmark {
    font-size: 32px;
  }

  .auth-splash-tagline {
    font-size: 15px;
  }
}

@media (max-width: 520px) {
  .auth-splash {
    padding: 14px;
  }

  .auth-splash-card {
    width: 100%;
    padding: 28px 18px 24px;
    border-radius: 24px;
  }

  .auth-splash-card::after {
    border-radius: calc(24px - 2px);
  }

  .auth-splash-wordmark {
    font-size: 28px;
  }

  .auth-splash-tagline {
    margin-top: 10px;
    font-size: 14px;
  }

  .auth-splash-message {
    margin-top: 22px;
    font-size: 20px;
  }

  .auth-splash-helper,
  .auth-splash-details {
    font-size: 13px;
  }

  .auth-splash-actions {
    flex-direction: column;
  }

  .auth-splash-btn {
    width: 100%;
  }
}

/* ==========================================================================
   PHASE 4 SECTION: Shell/Layout
   ========================================================================== */
.ctr {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px
}

/* ==========================================================================
   PHASE 4 SECTION: Navigation
   ========================================================================== */
/* ── Top Navigation ── */
.topnav {
  background: var(--surface);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-global-nav, 1000);
  padding: var(--mobile-safe-top) 24px 0
}

.topnav::before,
.topnav::after {
  display: none
}

.topnav-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  min-width: 0
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 1;
  min-width: 0;
  text-decoration: none;
  margin-right: 2px
}

.topnav-brand-stack {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 2px 0;
  margin-right: 8px
}

.topnav-brand-logo {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: .33ch
}

.topnav-brand-ionix {
  color: var(--text);
  font-weight: 800
}

.topnav-brand-ledger {
  color: var(--green);
  font-weight: 500
}

.topnav-brand-logo-typed {
  min-width: 11.85ch;
  min-height: 1.1em
}

.topnav-brand-divider {
  width: 1px;
  height: 24px;
  background: color-mix(in srgb, var(--border) 88%, #d1d8ce 12%);
  flex: 0 0 auto
}

.topnav-brand-tagline {
  max-width: 100%;
  margin: 0;
  color: color-mix(in srgb, var(--text-muted) 82%, #9aa0b5 18%);
  font-size: 11px;
  line-height: 1.12;
  letter-spacing: -.003em;
  white-space: nowrap
}

.typed-caret {
  display: inline-block;
  width: 2px;
  height: .84em;
  margin-left: 4px;
  background: var(--green);
  vertical-align: baseline;
  animation: caretBlink 850ms step-end infinite
}

@keyframes caretBlink {
  0%, 49% {
    opacity: 1
  }

  50%, 100% {
    opacity: 0
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-splash-card::before,
  .auth-splash-progress-bar {
    animation: none;
  }

  .auth-splash-progress-bar {
    width: 68%;
    transform: translateX(0);
  }

  .auth-splash-btn {
    transition: none;
  }

  .typed-caret {
    animation: none;
    opacity: 0
  }
}

.topnav-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative
}

.mobile-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(0, 0, 0, .34);
  z-index: 980;
}

.topnav-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none
}

.topnav-icon:hover,
.topnav-icon:focus-visible,
.topnav-icon[aria-pressed="true"] {
  background: var(--ionix-product-accent-soft);
  color: var(--ionix-product-accent);
  border-color: color-mix(in srgb, var(--ionix-product-accent) 38%, var(--border) 62%);
}

[data-theme="dark"] .topnav-icon:hover,
[data-theme="dark"] .topnav-icon:focus-visible,
[data-theme="dark"] .topnav-icon[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ionix-product-accent) 16%, var(--surface) 84%);
}

.topnav-icon-attention {
  animation: topnavScopePulse 2.2s ease-in-out infinite;
  border-color: color-mix(in srgb, #f59e0b 40%, var(--border) 60%);
  color: #c97a00;
}

.topnav-icon-attention:hover,
.topnav-icon-attention:focus-visible,
.topnav-icon-attention[aria-pressed="true"] {
  background: color-mix(in srgb, #f59e0b 10%, var(--surface) 90%);
  border-color: color-mix(in srgb, #f59e0b 56%, var(--border) 44%);
  color: #c97a00;
}

[data-theme="dark"] .topnav-icon-attention:hover,
[data-theme="dark"] .topnav-icon-attention:focus-visible,
[data-theme="dark"] .topnav-icon-attention[aria-pressed="true"] {
  background: color-mix(in srgb, #f59e0b 14%, var(--surface) 86%);
}

@keyframes topnavScopePulse {
  0%, 100% {
    border-color: color-mix(in srgb, #f59e0b 40%, var(--border) 60%);
    color: #c97a00;
    background: transparent;
  }
  50% {
    border-color: color-mix(in srgb, #f59e0b 62%, var(--border) 38%);
    color: #d48806;
    background: color-mix(in srgb, #f59e0b 10%, var(--surface) 90%);
  }
}

.profile-menu {
  position: relative;
}

.profile-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all .15s;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-menu-btn:hover,
.profile-menu-btn:focus-visible,
.profile-menu-btn[aria-expanded="true"],
.profile-menu.open .profile-menu-btn {
  background: color-mix(in srgb, var(--ionix-product-accent) 8%, var(--surface) 92%);
  color: var(--ionix-product-accent);
  border-color: color-mix(in srgb, var(--ionix-product-accent) 38%, var(--border) 62%);
}

[data-theme="dark"] .profile-menu-btn:hover,
[data-theme="dark"] .profile-menu-btn:focus-visible,
[data-theme="dark"] .profile-menu-btn[aria-expanded="true"],
[data-theme="dark"] .profile-menu.open .profile-menu-btn {
  background: color-mix(in srgb, var(--ionix-product-accent) 16%, var(--surface) 84%);
}

.profile-menu-avatar {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  width: 390px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  z-index: var(--z-global-menu-popover, 1260);
  padding: 0;
  display: none;
  overflow: hidden;
  max-height: min(84vh, 1100px);
}

.profile-menu.open .profile-menu-dropdown {
  display: block;
}

.profile-menu-user {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.profile-menu-identity {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
}

.profile-menu-avatar-large {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ionix-product-accent) 12%, var(--surface) 88%);
  color: var(--ionix-product-accent);
  font-size: 14px;
  font-weight: 700;
}

.profile-menu-identity-copy {
  min-width: 0;
}

.profile-menu-name {
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
}

.profile-menu-email {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.profile-menu-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--ionix-product-accent) 24%, var(--border) 76%);
  background: color-mix(in srgb, var(--ionix-product-accent) 10%, var(--surface) 90%);
  color: var(--ionix-product-accent);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 500;
}

.profile-menu-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 12px 16px 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.profile-menu-section-label span {
  letter-spacing: 0;
  text-transform: none;
  color: var(--ionix-product-accent);
}

.profile-menu-action,
.profile-menu-setting-row {
  width: calc(100% - 24px);
  margin: 0 12px 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 13px;
  padding: 12px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.profile-menu-action:hover,
.profile-menu-setting-row:hover,
.profile-menu-setting-row:focus-visible {
  background: color-mix(in srgb, var(--ionix-product-accent) 4%, var(--surface) 96%);
  border-color: color-mix(in srgb, var(--ionix-product-accent) 28%, var(--border) 72%);
  transform: translateY(-1px);
}

.profile-menu-setting-row[disabled] {
  opacity: 1;
  cursor: default;
}

.profile-menu-setting-row[disabled]:hover {
  transform: none;
}

.profile-menu-action-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ionix-product-accent) 12%, var(--surface) 88%);
  color: var(--ionix-product-accent);
  font-size: 13px;
  font-weight: 700;
}

.profile-menu-action-badge.tone-admin,
.profile-menu-action-badge.tone-info {
  background: rgba(59, 130, 246, .12);
  color: #3b82f6;
}

.profile-menu-action-badge.tone-warn {
  background: rgba(245, 158, 11, .14);
  color: #f59e0b;
}

.profile-menu-action-badge.tone-danger {
  background: rgba(201, 79, 79, .12);
  color: #c94f4f;
}

.profile-menu-action-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-menu-action-title {
  font-size: 14px;
  font-weight: 600;
}

.profile-menu-action-meta {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.profile-menu-action-tag {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.profile-theme-toggle-switch {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
}

.profile-theme-toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}

.profile-theme-toggle-switch[data-theme-state="dark"] {
  background: var(--ionix-product-accent);
}

.profile-theme-toggle-switch[data-theme-state="dark"]::after {
  transform: translateX(18px);
}

.product-ledger-green { color: var(--green); }
.product-documents-purple { color: #7b61ff; }
.product-insights-blue { color: #3b82f6; }
.product-assessments-orange { color: #f59e0b; }

.profile-menu-setting-row.signout .profile-menu-action-tag,
.profile-menu-setting-row.signout .profile-menu-action-title {
  color: #c94f4f;
}

.navbar-flyout {
  position: fixed;
  top: 0;
  left: 0;
  width: 520px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  z-index: var(--z-global-menu-popover, 1260);
}

.navbar-search-flyout {
  display: none;
}

.navbar-search-flyout.open {
  display: block;
}

.navbar-search-flyout .navbar-flyout-inner {
  max-height: min(84vh, 860px);
}

.navbar-scope-flyout {
  min-width: 520px;
  max-width: 520px;
}

.navbar-flyout-inner {
  max-height: min(72vh, 760px);
  overflow: hidden;
}

.navbar-flyout-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}

.navbar-flyout-head svg {
  width: 18px;
  height: 18px;
  color: var(--ionix-product-accent);
  flex-shrink: 0;
}

.navbar-flyout-head-copy {
  font-size: 14px;
  color: var(--text);
}

.navbar-flyout-panel {
  padding: 14px;
  max-height: calc(min(72vh, 760px) - 54px);
  overflow: auto;
}

.navbar-search-input,
.navbar-filter-box input {
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 0;
  width: 100%;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.navbar-search-input {
  line-height: 1.2;
}

.navbar-kbd {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 7px;
  color: var(--text-muted);
  font-size: 11px;
}

.navbar-clear-btn {
  display: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.navbar-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.navbar-section-label span {
  letter-spacing: 0;
  text-transform: none;
  color: var(--ionix-product-accent);
}

.navbar-section-label.navbar-section-label-scope {
  margin-bottom: 10px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.navbar-section-label.navbar-section-label-scope .navbar-section-label-primary {
  color: var(--text-dim);
}

.navbar-section-label.navbar-section-label-scope .navbar-section-label-secondary {
  color: var(--text-muted);
  font-weight: 500;
}

.navbar-search-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--text-dim);
  font-size: 13px;
}

.navbar-search-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.navbar-search-tab,
.navbar-type-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--text-muted);
  font-size: 12px;
  background: var(--surface);
}

.navbar-search-tab.active {
  background: color-mix(in srgb, var(--ionix-product-accent) 10%, var(--surface) 90%);
  border-color: color-mix(in srgb, var(--ionix-product-accent) 28%, var(--border) 72%);
  color: var(--ionix-product-accent);
}

.navbar-search-result,
.navbar-scope-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  margin-bottom: 8px;
  text-align: left;
  font: inherit;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.navbar-search-result-copy,
.navbar-scope-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.navbar-search-result-title {
  font-size: 14px;
  font-weight: 500;
}

.navbar-search-result-meta,
.navbar-scope-copy span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.navbar-search-result-badge,
.navbar-scope-check {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ionix-product-accent) 12%, var(--surface) 88%);
  color: var(--ionix-product-accent);
  font-weight: 700;
}

.navbar-search-result-badge-blue {
  background: rgba(59, 130, 246, .12);
  color: #3975c5;
}

.navbar-search-result-badge-orange {
  background: rgba(245, 158, 11, .14);
  color: #d47711;
}

.navbar-scope-check.empty {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.navbar-search-result:hover,
.navbar-scope-row:hover,
.navbar-scope-row.is-selected {
  background: color-mix(in srgb, var(--ionix-product-accent) 4%, var(--surface) 96%);
  border-color: color-mix(in srgb, var(--ionix-product-accent) 28%, var(--border) 72%);
  transform: translateY(-1px);
}

.navbar-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.navbar-scope-mode-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 13px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: background .16s ease, border-color .16s ease;
}

.navbar-scope-mode-card:hover {
  background: color-mix(in srgb, var(--ionix-product-accent) 10%, var(--surface) 90%);
  border-color: color-mix(in srgb, var(--ionix-product-accent) 28%, var(--border) 72%);
}

.navbar-scope-mode-card.active {
  background: color-mix(in srgb, var(--ionix-product-accent) 10%, var(--surface) 90%);
  border-color: color-mix(in srgb, var(--ionix-product-accent) 28%, var(--border) 72%);
}

.navbar-scope-mode-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.navbar-scope-mode-desc {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.navbar-filter-box {
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  color: var(--text-muted);
  margin: 12px 0;
  font-size: 13px;
}

.navbar-filter-box svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.navbar-scope-list {
  max-height: 320px;
  overflow: auto;
}

.navbar-scope-list-wrap {
  min-height: 0;
}

.navbar-flyout-footer {
  border-top: 1px solid var(--border);
  margin: 14px -14px -14px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-dim);
  font-size: 13px;
}

.navbar-flyout-footer-actions {
  display: flex;
  gap: 8px;
}

.navbar-btn {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 9px 13px;
  color: var(--text-dim);
  font: inherit;
  cursor: pointer;
}

.navbar-btn.primary {
  background: var(--ionix-product-accent);
  border-color: var(--ionix-product-accent);
  color: #fff;
}

.navbar-btn:hover,
.navbar-btn:focus-visible {
  border-color: color-mix(in srgb, var(--ionix-product-accent) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--ionix-product-accent) 4%, var(--surface) 96%);
}

.navbar-btn.primary:hover,
.navbar-btn.primary:focus-visible {
  border-color: var(--ionix-product-accent);
  background: color-mix(in srgb, var(--ionix-product-accent) 82%, #000 18%);
  color: #fff;
}

.navbar-search-state {
  padding: 10px 2px 2px;
}

.navbar-search-state-title {
  font-size: 14px;
  font-weight: 600;
}

.navbar-search-state-copy {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

.navbar-search-results mark {
  background: linear-gradient(transparent 58%, rgba(var(--ionix-product-accent-rgb), .2) 0);
  color: var(--ionix-product-accent);
  padding: 0;
}

.navbar-search-flyout .navbar-flyout-panel {
  max-height: calc(min(84vh, 860px) - 54px);
}

.topnav-bottom {
  display: flex;
  align-items: flex-end;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  /* Desktop mega-menus must be able to escape the nav row without clipping.
     Mobile drawer scrolling is restored in the mobile breakpoint block. */
  overflow: visible;
  scrollbar-width: none;
  border-bottom: 0
}

.topnav-bottom::-webkit-scrollbar {
  display: none
}

.nav-section {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-right: 16px;
  margin-right: 10px;
  margin-bottom: 0
}

.nav-section::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--border)
}

.nav-section:last-child::after {
  display: none
}

.nav-section:last-child {
  padding-right: 0;
  margin-right: 0
}

.nav-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin-bottom: 2px;
  padding-left: 10px
}



.nav-section-items {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  position: relative;
  margin-bottom: 0;
  border-radius: 10px 10px 0 0
}

.nav-item:hover {
  color: var(--ionix-product-accent);
  background: var(--ionix-product-accent-soft)
}

.nav-item.active {
  color: var(--ionix-product-accent);
  border-bottom-color: var(--ionix-product-accent);
  background: var(--ionix-product-accent-strong);
  font-weight: 600
}

.nav-item-menu-trigger {
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 1px transparent;
  transition: color .15s, background .15s, box-shadow .15s;
  border-radius: 10px 10px 0 0
}

.nav-item-menu-trigger .nav-item-caret {
  width: 8px;
  height: 8px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .15s ease;
  margin-top: -2px;
  opacity: .9
}

.nav-item-menu-trigger:hover {
  color: var(--ionix-product-accent);
  background: color-mix(in srgb, var(--ionix-product-accent) 12%, var(--surface) 88%)
}

.nav-item-menu-trigger.open .nav-item-caret {
  transform: rotate(225deg) translateY(-1px)
}

.nav-item-menu-trigger.open {
  color: var(--ionix-product-accent);
  background: var(--ionix-product-accent-soft);
  border-radius: 10px 10px 0 0;
  border-color: color-mix(in srgb, var(--ionix-product-accent) 18%, var(--border) 82%);
  border-bottom-color: var(--ionix-product-accent-soft);
  box-shadow: none;
  z-index: 1241
}

.nav-item-menu-trigger.nav-item-menu-connected.open {
  z-index: 1242
}

.nav-item-menu-trigger.nav-item-menu-connected.open::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: var(--ionix-product-accent-soft);
  pointer-events: none
}



.nav-item span {
  position: relative;
  z-index: 1
}

.admin-nav-dropdown-host {
  --submenu-bg: var(--ionix-product-accent-soft);
  --submenu-bg-2: color-mix(in srgb, var(--surface) 96%, #f8fafc 4%);
  --line-gap-left: 0px;
  --line-gap-width: 0px;
  --line-left: 0px;
  --line-width: 0px;
  position: absolute;
  inset: 0 0 auto 0;
  pointer-events: none;
  z-index: var(--z-global-menu, 1240)
}

.admin-nav-dropdown-host.open {
  pointer-events: auto
}

.admin-nav-dropdown-panel {
  --bridge-left: 0px;
  --bridge-width: 120px;
  position: absolute;
  min-width: 720px;
  max-width: min(960px, calc(100vw - 40px));
  background: var(--submenu-bg);
  border: 1px solid color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  border-radius: 0 14px 14px 14px;
  box-shadow: 0 14px 28px rgba(16, 24, 40, .12);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.992);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s
}

.admin-nav-dropdown-panel.nav-dropdown-panel-connected::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--bridge-left);
  width: var(--bridge-width);
  height: 4px;
  background: var(--submenu-bg);
  pointer-events: none;
  z-index: 1
}

.admin-nav-dropdown-panel.nav-dropdown-panel-connected > * {
  position: relative;
  z-index: 2
}

.admin-nav-dropdown-panel.admin-nav-dropdown-panel-single {
  min-width: 520px;
  max-width: 520px
}

.admin-nav-dropdown-panel.admin-nav-dropdown-panel-nested {
  min-width: 860px;
  max-width: min(980px, calc(100vw - 40px))
}

.admin-nav-dropdown-panel.admin-nav-dropdown-panel-single.admin-nav-dropdown-panel-nested {
  min-width: 620px;
  max-width: min(700px, calc(100vw - 40px))
}

.admin-nav-dropdown-panel:has(.admin-nav-dropdown-grid.cols-3) {
  min-width: 960px;
  max-width: min(1120px, calc(100vw - 40px))
}

.admin-nav-dropdown-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear 0s
}

/* ==========================================================================
   PHASE 4 SECTION: Dark Theme Overrides
   ========================================================================== */
[data-theme="dark"] .admin-nav-dropdown-host {
  --submenu-bg: var(--ionix-product-accent-soft);
  --submenu-bg-2: color-mix(in srgb, var(--surface-2) 88%, #0b1020 12%)
}

[data-theme="dark"] .admin-nav-dropdown-panel {
  border-color: var(--border);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .45)
}

.admin-nav-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 0
}

.admin-nav-dropdown-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(240px, 1fr))
}

.admin-nav-dropdown-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(220px, 1fr))
}

.admin-nav-dropdown-grid.admin-nav-dropdown-grid-singlecol {
  grid-template-columns: 1fr
}

.admin-nav-domain-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr)
}

.admin-nav-domain-nav {
  padding: 18px 14px;
  border-right: 1px solid color-mix(in srgb, var(--border) 78%, #d6dde6 22%);
  background: color-mix(in srgb, var(--submenu-bg-2) 92%, var(--surface) 8%)
}

.admin-nav-domain-list {
  display: grid;
  gap: 6px
}

.admin-nav-domain-link {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  padding: 9px 10px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease
}

.admin-nav-domain-link:hover,
.admin-nav-domain-link:focus-visible {
  outline: none;
  color: var(--text);
  background: color-mix(in srgb, var(--ionix-product-accent) 12%, var(--surface) 88%)
}

.admin-nav-domain-link.active {
  color: var(--ionix-product-accent);
  border-color: color-mix(in srgb, var(--ionix-product-accent) 35%, var(--border) 65%);
  background: color-mix(in srgb, var(--ionix-product-accent) 13%, var(--surface) 87%)
}

.admin-nav-domain-content {
  min-width: 0
}

.admin-nav-domain-pane {
  display: none
}

.admin-nav-domain-pane.active {
  display: block
}

.admin-nav-menu-col {
  position: relative;
  padding: 10px 12px
}

.admin-nav-menu-col:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 0;
  width: 1px;
  height: calc(100% - 32px);
  background: linear-gradient(to bottom, transparent, var(--border), var(--border), transparent);
  pointer-events: none
}

.admin-nav-menu-surface {
  height: 100%;
  padding: 8px 10px 10px;
  border-radius: 10px;
  background: transparent;
  transition: none
}

[data-theme="dark"] .admin-nav-menu-surface {
  background: transparent
}

.admin-nav-menu-col:hover .admin-nav-menu-surface {
  background: transparent
}

[data-theme="dark"] .admin-nav-menu-col:hover .admin-nav-menu-surface {
  background: transparent
}

.admin-nav-menu-col + .admin-nav-menu-col {
  border-left: none
}

.admin-nav-menu-title {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted)
}

.admin-nav-menu-list+.admin-nav-menu-title {
  margin-top: 12px
}

.admin-nav-menu-list {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.admin-nav-menu-link {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  font-weight: 400;
  border-radius: 10px;
  padding: 6px 8px;
  margin: 0 -8px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  transition: background 180ms ease, transform 180ms ease
}

.admin-nav-menu-link:hover,
.admin-nav-menu-link:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--ionix-product-accent) 13%, var(--surface) 87%);
  color: var(--text);
  transform: translateX(3px)
}

[data-theme="dark"] .admin-nav-menu-link:hover,
[data-theme="dark"] .admin-nav-menu-link:focus-visible {
  background: color-mix(in srgb, var(--ionix-product-accent) 20%, var(--surface) 80%)
}

.admin-nav-menu-link.active {
  background: color-mix(in srgb, var(--ionix-product-accent) 14%, var(--surface) 86%);
  color: var(--text)
}

.admin-nav-menu-link[disabled],
.admin-nav-menu-link[aria-disabled="true"] {
  opacity: .52;
  cursor: default;
  pointer-events: none
}

.admin-nav-menu-link[disabled]:hover,
.admin-nav-menu-link[disabled]:focus-visible,
.admin-nav-menu-link[aria-disabled="true"]:hover,
.admin-nav-menu-link[aria-disabled="true"]:focus-visible {
  background: transparent;
  color: var(--text-dim);
  transform: none
}

.admin-nav-menu-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--ionix-product-accent);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease
}

.admin-nav-menu-link:hover .admin-nav-menu-icon,
.admin-nav-menu-link:focus-visible .admin-nav-menu-icon {
  border-color: color-mix(in srgb, var(--ionix-product-accent) 35%, var(--border) 65%);
  transform: scale(1.04)
}

[data-theme="dark"] .admin-nav-menu-icon {
  border-color: var(--border);
  background: var(--surface-2)
}

.admin-nav-menu-content {
  min-width: 0
}

.admin-nav-menu-item-title {
  display: block;
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--text)
}

.admin-nav-menu-item-desc {
  display: block;
  margin: 0;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--text-muted);
  max-width: none
}

#appNavMenuAzure {
  min-width: 1080px;
  max-width: min(1240px, calc(100vw - 32px))
}

#appNavMenuAzure .azure-mega-grid {
  grid-template-columns: repeat(4, minmax(220px, 1fr))
}

.nav-item.nav-item-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none
}

.nav-badge {
  background: var(--c-azure);
  color: #fff;
  border-radius: 8px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  position: relative;
  z-index: 1
}

.nav-badge.red {
  background: var(--red)
}

.main-content {
  max-width: 1200px;
  margin: var(--topnav-offset) auto 28px;
  padding: 0 20px;
  width: calc(100% - 20px);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  display: flow-root;
  position: relative;
  overflow-x: visible
}

.main-content > .tp {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.main-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  pointer-events: none;
  z-index: 0
}

.admin-page .topnav {
  z-index: 1200
}

header {
  display: none
}

.tb {
  display: none
}

.tp {
  padding-top: var(--page-shell-offset)
}

.tp,
.costx,
.anl,
.networking-block,
.networking-analytics {
  min-width: 0
}

/* ==========================================================================
   PHASE 4 SECTION: Mobile/Responsive
   ========================================================================== */
@media (max-width:980px) {
  :root {
    --networking-sticky-offset: 84px
  }

  body.mobile-nav-open {
    overflow: hidden
  }

  .mobile-nav-toggle {
    display: inline-flex
  }

  .topnav {
    padding-left: 10px;
    padding-right: 10px
  }

  .topnav-top {
    height: auto;
    min-height: 72px;
    padding: 8px 0;
    flex-wrap: wrap;
    gap: 8px
  }

  .topnav-brand {
    flex: 1 1 auto;
    gap: 10px
  }

  .topnav-brand-logo {
    font-size: 18px
  }

  .topnav-brand-tagline {
    display: none
  }

  .top-tools {
    order: 4;
    width: 0;
    margin: 0
  }

  .topnav-icons {
    order: 4;
    margin-left: 0
  }

  .top-search-overlay {
    right: 0;
    width: min(340px, calc(100vw - 20px))
  }

  #gSearchResults {
    min-width: 0;
    width: 100%;
    right: auto;
    left: 0
  }

  .scope-panel {
    position: fixed;
    top: auto;
    left: 10px;
    right: 10px;
    bottom: calc(12px + var(--mobile-safe-bottom));
    width: auto;
    min-width: 0;
    max-height: 78dvh;
    overflow: auto
  }

  .topnav-bottom {
    order: 5;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(86vw, 340px);
    max-width: 340px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 1001;
    padding: calc(18px + var(--mobile-safe-top)) 12px calc(20px + var(--mobile-safe-bottom));
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-104%);
    transition: transform .22s ease;
    display: block
  }

  body.mobile-nav-open .topnav-bottom {
    transform: translateX(0)
  }

  .mobile-nav-backdrop {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto
  }

  .nav-section {
    margin-right: 0;
    padding-right: 0;
    margin-bottom: 8px
  }

  .nav-section::after {
    display: none
  }

  .nav-section-label {
    display: block;
    font-size: 10px;
    margin-bottom: 6px;
    padding-left: 2px
  }

  .nav-section-items {
    display: block
  }

  .nav-item {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    margin-bottom: 4px
  }

  .admin-nav-dropdown-host {
    position: static;
    inset: auto;
    pointer-events: auto;
    z-index: auto
  }

  .admin-nav-dropdown-panel {
    position: static;
    min-width: 0;
    max-width: none;
    border-radius: 10px;
    box-shadow: none;
    transform: none;
    margin: 0 0 8px;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto
  }

  .admin-nav-dropdown-panel.admin-nav-dropdown-panel-single {
    min-width: 0;
    max-width: none
  }

  .admin-nav-dropdown-panel.open {
    display: block
  }

  .admin-nav-dropdown-grid {
    grid-template-columns: 1fr
  }

  #appNavMenuAzure {
    min-width: 0;
    max-width: none
  }

  #appNavMenuAzure .azure-mega-grid {
    grid-template-columns: 1fr
  }

  .admin-nav-menu-col::after {
    display: none
  }

  .admin-nav-domain-layout {
    grid-template-columns: 1fr
  }

  .admin-nav-domain-nav {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, #d6dde6 22%);
    padding: 12px
  }

  .admin-nav-domain-list {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
  }

  .admin-nav-menu-col+.admin-nav-menu-col {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 78%, #d6dde6 22%)
  }

  .main-content {
    width: 100%;
    margin-top: var(--topnav-offset);
    margin-bottom: 16px;
    border-radius: 0;
    padding: 0 12px
  }

  .main-content::before {
    display: none
  }

  .rfb,
  .scope-dd-btn,
  .showback-period-select,
  .authi,
  .fsel {
    min-height: 42px
  }
}

@media(max-width:768px) {
  :root {
    --networking-sticky-offset: 88px
  }

  .topnav-brand-tagline {
    display: none
  }

  .nav-section-label {
    display: none
  }

  .nav-section-items {
    padding-top: 4px
  }

  .nav-item {
    padding: 0 8px 8px;
    font-size: 12px
  }
}

/* ==========================================================================
   PHASE 4 SECTION: Cards/Components
   ========================================================================== */
.tt {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  color: var(--text-dim);
  text-decoration: none
}

.tt:hover {
  border-color: var(--text-muted);
  color: var(--text)
}

.tb {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-top: 20px;
  overflow-x: auto
}

.tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  white-space: nowrap
}

.tab:hover {
  color: var(--text)
}

.tab.active {
  color: var(--c-azure);
  border-bottom-color: var(--c-azure)
}

.tc {
  font-size: 11px;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px
}

.tp {
  display: none
}

.tp.active {
  display: block
}

#panel-costs.tp {
  padding-top: 0;
}

/* ==========================================================================
   PHASE 4 SECTION: Cost Explorer
   ========================================================================== */
#panel-costs.active {
  max-height: none;
  overflow-y: visible;
  overflow-x: visible;
  overscroll-behavior: auto;
}

#panel-costs.active .explorerv2-shell,
#panel-costs.active .costx {
  overflow: visible !important;
}

/* ==========================================================================
   PHASE 4 SECTION: Utilities/Helpers
   ========================================================================== */
.sr {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted)
}

.st {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto
}

.ctl {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 11px 0 11px;
  border-bottom: 1px solid var(--border)
}

.fc {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1
}

.chip {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  user-select: none
}

.chip:hover {
  border-color: var(--text-muted);
  color: var(--text)
}

.chip.ca.active {
  background: var(--c-azure-bg);
  border-color: var(--c-azure);
  color: var(--c-azure)
}

.chip.ce.active {
  background: var(--c-entra-bg);
  border-color: var(--c-entra);
  color: var(--c-entra)
}

.chip.cm.active {
  background: var(--c-m365-bg);
  border-color: var(--c-m365);
  color: var(--c-m365)
}

.chip.cs.active {
  background: var(--c-security-bg);
  border-color: var(--c-security);
  color: var(--c-security)
}

.chip.cp.active {
  background: var(--c-partner-bg);
  border-color: var(--c-partner);
  color: var(--c-partner)
}

.chip.ci.active {
  background: var(--c-intune-bg);
  border-color: var(--c-intune);
  color: var(--c-intune)
}

.chip.cw.active {
  background: var(--c-winserver-bg);
  border-color: var(--c-winserver);
  color: var(--c-winserver)
}

.chip.cd.active {
  background: var(--surface-3);
  border-color: var(--text-muted);
  color: var(--text)
}

.rb {
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  height: 22px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  white-space: nowrap
}

.rb:hover {
  border-color: var(--red);
  color: var(--red)
}

.fsel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 18px 0 8px;
  height: 28px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
  appearance: none;
  max-width: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23bbb'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center
}

.fsel:focus {
  outline: none;
  border-color: var(--c-azure)
}

.fsel option {
  background: var(--surface);
  color: var(--text)
}

.frow {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 0 10px;
  border-bottom: 1px solid var(--border)
}

.frow label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  white-space: nowrap
}

.fa-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
  align-self: center
}

.fa-seg {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0
}

.di {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 8px;
  height: 28px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
  width: 110px
}

.di:focus {
  border-color: var(--c-azure)
}

.di::-webkit-calendar-picker-indicator {
  filter: var(--cal-icon, none);
  cursor: pointer
}

[data-theme="dark"] .di::-webkit-calendar-picker-indicator {
  filter: invert(0.8)
}

.drb {
  padding: 0 10px;
  height: 28px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit
}

.drb:hover {
  border-color: var(--red);
  color: var(--red)
}

.sb {
  position: relative
}

.sb input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px 8px 36px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  width: 260px;
  outline: none;
  transition: border-color .2s
}

.sb input::placeholder {
  color: var(--text-muted)
}

.sb input:focus {
  border-color: var(--c-azure)
}

.sb svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted)
}

.authw {
  position: relative;
  flex-shrink: 0;
  margin-left: auto
}

.authb {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 0 11px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  white-space: nowrap
}

.authb:hover {
  border-color: var(--text-dim);
  color: var(--text)
}

.authb.on {
  color: var(--c-azure);
  border-color: var(--c-azure);
  background: var(--c-azure-bg)
}

.authdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green)
}

.authp {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px;
  z-index: 220;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  display: none
}

.authp.open {
  display: block
}

.authttl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-muted);
  margin-bottom: 8px
}

.authmsg {
  display: none;
  margin-bottom: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.4
}

.authmsg.ok {
  display: block;
  background: rgba(22, 163, 74, .11);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, .25)
}

.authmsg.err {
  display: block;
  background: rgba(220, 38, 38, .11);
  color: var(--red);
  border: 1px solid rgba(220, 38, 38, .25)
}

.authf {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.authi {
  width: 100%;
  height: var(--control-height);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--text);
  font-family: inherit;
  outline: none
}

.authi:hover {
  border-color: var(--green);
  background: rgba(22, 163, 74, .04)
}

.authi:focus {
  border-color: var(--c-azure);
  background: var(--surface)
}

/* ==========================================================================
   PHASE 4 SECTION: Admin
   ========================================================================== */
.admin-meta {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: .04em
}

.admin-select-wrap {
  position: relative
}

.admin-select-wrap.has-custom-dd::after {
  display: none;
}

.admin-select-wrap::after {
  content: '▼';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 11px;
  pointer-events: none
}

.admin-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px;
  cursor: pointer
}

.admin-select.admin-select-native-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  left: 0;
  top: 0;
}

.admin-select-wrap .cust-dd {
  width: 100%;
}

.admin-select-wrap .cust-dd-btn {
  width: 100%;
  height: var(--control-height);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
}

.admin-select-wrap .cust-dd-btn:hover {
  border-color: rgba(22,163,74,.45);
  background: #F7FAF6;
  color: var(--green);
}

.admin-select-wrap .admin-cust-dd-label {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
  text-align: left;
}

.admin-select-wrap .cust-dd-menu,
.admin-select-portal .cust-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 100%;
  max-width: min(100%, calc(100vw - 80px));
  max-height: min(360px, calc(100vh - 120px));
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  z-index: 260;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.admin-select-wrap.cmd-connected-select-wrap {
  z-index: calc(var(--z-global-menu, 1240) + 4);
}

.admin-select-wrap.cmd-connected-select-wrap.open {
  z-index: calc(var(--z-global-menu-popover, 1260) + 8);
}

.admin-select-wrap.cmd-connected-select-wrap.open::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 3px);
  height: 6px;
  background: var(--ionix-product-accent-soft);
  border-left: 1px solid color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  border-right: 1px solid color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  pointer-events: none;
  z-index: calc(var(--z-global-menu-popover, 1260) + 10);
  transform: none;
  color: transparent;
  font-size: 0;
}

.admin-select-wrap.cmd-connected-select-wrap .cust-dd-btn {
  position: relative;
  height: 22px;
  min-width: 120px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  color: var(--ce-cmd-text, var(--text));
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  z-index: 1;
}

.admin-select-wrap.cmd-connected-select-wrap .cust-dd-btn:hover,
.admin-select-wrap.cmd-connected-select-wrap .cust-dd-btn.open,
.admin-select-wrap.cmd-connected-select-wrap.open .cust-dd-btn {
  color: var(--ionix-product-accent);
  background: var(--ionix-product-accent-soft);
  border-color: color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  border-bottom-color: var(--ionix-product-accent-soft);
  box-shadow: none;
  z-index: calc(var(--z-global-menu-popover, 1260) + 9);
}

.admin-select-wrap.cmd-connected-select-wrap .cust-dd-btn.open::after,
.admin-select-wrap.cmd-connected-select-wrap.open .cust-dd-btn::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -3px;
  height: 5px;
  background: var(--ionix-product-accent-soft);
  pointer-events: none;
  z-index: 2;
}

.admin-select-wrap.cmd-connected-select-wrap .admin-cust-dd-label {
  padding-right: 2px;
}

.admin-select-wrap .cust-dd-menu.nav-dropdown-panel-connected,
.admin-select-portal .cust-dd-menu.nav-dropdown-panel-connected,
.scope-picker-panel.scope-picker-panel-connected {
  --submenu-bg: var(--ionix-product-accent-soft);
  --submenu-bg-2: color-mix(in srgb, var(--surface) 96%, #f8fafc 4%);
  background: var(--submenu-bg);
  border: 1px solid color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  border-radius: 0 14px 14px 14px;
  box-shadow: 0 14px 28px rgba(16, 24, 40, .12);
  z-index: calc(var(--z-global-menu-popover, 1260) + 8);
  margin-top: 0;
}

.admin-select-wrap .cust-dd-menu.nav-dropdown-panel-connected,
.admin-select-portal .cust-dd-menu.nav-dropdown-panel-connected {
  top: calc(100% - 2px);
  left: 0;
  right: auto;
  width: max-content;
  min-width: 100%;
  max-width: min(360px, calc(100vw - 32px));
  padding: 8px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  display: block;
  pointer-events: none;
  transform: translateY(8px) scale(.992);
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}

.admin-select-wrap .cust-dd-menu.nav-dropdown-panel-connected::before,
.admin-select-portal .cust-dd-menu.nav-dropdown-panel-connected::before,
.scope-picker-panel.scope-picker-panel-connected::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--bridge-left, 0px);
  width: var(--bridge-width, 120px);
  height: 5px;
  background: var(--submenu-bg);
  pointer-events: none;
  z-index: 3;
}

.admin-select-wrap .cust-dd-menu.nav-dropdown-panel-connected > *,
.admin-select-portal .cust-dd-menu.nav-dropdown-panel-connected > *,
.scope-picker-panel.scope-picker-panel-connected > * {
  position: relative;
  z-index: 2;
}

.admin-select-wrap .cust-dd-menu.open,
.admin-select-portal .cust-dd-menu.open {
  display: block;
}

.admin-select-wrap .cust-dd-menu.nav-dropdown-panel-connected.open,
.admin-select-portal .cust-dd-menu.nav-dropdown-panel-connected.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear 0s;
}

.admin-select-wrap .cust-dd-menu.nav-dropdown-panel-connected.open-up {
  bottom: calc(100% - 2px);
}

.admin-select-wrap .cust-dd-menu.open-up,
.admin-select-portal .cust-dd-menu.open-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.admin-select-wrap .cust-dd-item,
.admin-select-portal .cust-dd-item {
  width: 100%;
  min-height: 34px;
  font-size: 12.5px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.admin-select-wrap .cust-dd-item:hover,
.admin-select-portal .cust-dd-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.admin-select-wrap .cust-dd-menu.nav-dropdown-panel-connected .cust-dd-item,
.admin-select-portal .cust-dd-menu.nav-dropdown-panel-connected .cust-dd-item {
  border-radius: 10px;
  color: var(--text);
  transition: background 180ms ease, transform 180ms ease;
}

.admin-select-wrap .cust-dd-menu.nav-dropdown-panel-connected .cust-dd-item:hover,
.admin-select-wrap .cust-dd-menu.nav-dropdown-panel-connected .cust-dd-item:focus-visible,
.admin-select-portal .cust-dd-menu.nav-dropdown-panel-connected .cust-dd-item:hover,
.admin-select-portal .cust-dd-menu.nav-dropdown-panel-connected .cust-dd-item:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--green) 13%, var(--surface) 87%);
  color: var(--text);
  transform: translateX(3px);
}

.admin-select-wrap .cust-dd-item span:last-child,
.admin-select-portal .cust-dd-item span:last-child {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-select-wrap .cust-dd-dot,
.admin-select-portal .cust-dd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6ca0df;
  flex-shrink: 0;
}

.admin-select-portal {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--z-global-menu-popover, 1260) + 8);
}

.admin-select-portal .cust-dd-menu {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 0;
  max-width: calc(100vw - 16px);
  margin: 0;
  pointer-events: auto;
  z-index: calc(var(--z-global-menu-popover, 1260) + 8);
}

.admin-select-portal .cust-dd-menu.open-up {
  bottom: auto;
}

.admin-select-wrap.has-scope-picker::after {
  display: none;
}

.scope-picker-trigger {
  width: 100%;
}

.admin-select-wrap.cmd-connected-select-wrap .scope-picker-trigger {
  position: relative;
  height: 22px;
  min-width: 120px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  color: var(--ce-cmd-text, var(--text));
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  z-index: 1;
}

.admin-select-wrap.cmd-connected-select-wrap .scope-picker-trigger:hover,
.admin-select-wrap.cmd-connected-select-wrap .scope-picker-trigger.open,
.admin-select-wrap.cmd-connected-select-wrap.open .scope-picker-trigger {
  color: var(--ionix-product-accent);
  background: var(--ionix-product-accent-soft);
  border-color: color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  border-bottom-color: var(--ionix-product-accent-soft);
  box-shadow: none;
  z-index: calc(var(--z-global-menu-popover, 1260) + 9);
}

.admin-select-wrap.cmd-connected-select-wrap .scope-picker-trigger.open::after,
.admin-select-wrap.cmd-connected-select-wrap.open .scope-picker-trigger::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -3px;
  height: 5px;
  background: var(--ionix-product-accent-soft);
  pointer-events: none;
  z-index: 2;
}

.scope-picker-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.scope-picker-caret {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

.scope-picker-panel {
  position: fixed;
  z-index: calc(var(--z-global-menu-popover, 1260) + 4);
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 22px 48px rgba(15, 23, 42, .16);
  padding: 14px;
  overflow: hidden;
}

.scope-picker-panel.open {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scope-picker-panel.scope-picker-panel-connected {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.992);
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}

.scope-picker-panel.scope-picker-panel-connected.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear 0s;
}

.admin-select-wrap .scope-picker-panel.scope-picker-panel-anchored {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 96px);
  overflow: hidden;
  z-index: calc(var(--z-global-menu-popover, 1260) + 8);
}

.admin-select-wrap.open .scope-picker-panel.scope-picker-panel-anchored {
  z-index: calc(var(--z-global-menu-popover, 1260) + 8);
}

.scope-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.scope-picker-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.scope-picker-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.scope-picker-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-muted);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.scope-picker-search-row {
  display: flex;
}

.scope-picker-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scope-picker-filter-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}

.scope-picker-filter-btn:hover {
  border-color: var(--text-dim);
  color: var(--text);
}

.scope-picker-filter-btn.is-active {
  background: rgba(0, 120, 212, .08);
  border-color: rgba(0, 120, 212, .22);
  color: var(--c-azure);
}

.scope-picker-search {
  width: 100%;
  height: 40px;
}

.scope-picker-columns,
.scope-picker-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(140px, .9fr) minmax(140px, .8fr) minmax(180px, 1fr);
  gap: 12px;
  align-items: center;
}

.scope-picker-columns {
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.scope-picker-body {
  min-height: 180px;
  overflow: auto;
  padding-right: 4px;
}

.scope-picker-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scope-picker-section + .scope-picker-section {
  margin-top: 10px;
}

.scope-picker-section-label {
  padding: 2px 10px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scope-picker-row {
  width: 100%;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-dim);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.scope-picker-row:hover {
  background: var(--surface-2);
  border-color: rgba(22, 163, 74, .16);
  color: var(--text);
}

.scope-picker-row.is-selected {
  background: rgba(0, 120, 212, .08);
  border-color: rgba(0, 120, 212, .18);
  color: var(--text);
}

.scope-picker-col {
  min-width: 0;
  font-size: 12px;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scope-picker-col-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.scope-picker-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scope-picker-row-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scope-picker-empty {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
}

.ce-scope-menu-content,
.ce-scope-menu-content * {
  box-sizing: border-box;
  min-width: 0;
}

.ce-scope-menu-content {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text);
  overflow: hidden;
}

.ce-scope-top {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-scope-middle {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.ce-scope-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ce-scope-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}

.ce-scope-sub {
  margin-top: 3px;
  max-width: 420px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.ce-scope-close {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: 0 0 auto;
  font-size: 18px;
}

.ce-scope-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.ce-scope-summary-card {
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, #cdd5df 18%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--submenu-bg-2, var(--surface)) 88%, var(--surface) 12%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.ce-scope-summary-card span,
.ce-scope-summary-card em {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.15;
  font-style: normal;
}

.ce-scope-summary-card strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ce-scope-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 6px;
  align-items: center;
  overflow: hidden;
}

.ce-scope-search {
  width: 100%;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  border-radius: 10px;
  background: var(--submenu-bg-2, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
  padding: 0 12px;
  line-height: 34px;
}

.ce-scope-search::placeholder {
  color: var(--text-muted);
}

.ce-scope-search:focus-visible {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border) 58%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 16%, transparent);
}

.ce-scope-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 34px;
  height: auto;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--submenu-bg-2, var(--surface)) 82%, var(--surface-2) 18%);
  white-space: normal;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
  overflow: hidden;
}

.ce-scope-tabs .scope-picker-filter-btn {
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  transition: color .15s ease, background .15s ease;
}

.ce-scope-tabs .scope-picker-filter-btn:hover {
  color: var(--text);
  border-color: transparent;
}

.ce-scope-tabs .scope-picker-filter-btn.is-active {
  background: var(--green);
  border-color: transparent;
  color: #fff;
}

.ce-scope-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(156px, .24fr) minmax(0, .76fr);
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.ce-scope-sidebar,
.ce-scope-list-panel {
  border: 1px solid color-mix(in srgb, var(--border) 82%, #cdd5df 18%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--submenu-bg-2, var(--surface)) 90%, var(--surface) 10%);
}

.ce-scope-sidebar {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.ce-scope-section-label {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}

.ce-scope-rec-list,
.ce-scope-filter-list,
.ce-scope-list {
  display: flex;
  flex-direction: column;
}

.ce-scope-rec-list {
  gap: 5px;
}

.ce-scope-rec-card {
  width: 100%;
  min-height: 58px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  text-align: left;
  font: inherit;
  transition: background .15s ease, border-color .15s ease;
}

.ce-scope-rec-card:hover {
  background: color-mix(in srgb, var(--green) 7%, var(--surface) 93%);
  border-color: color-mix(in srgb, var(--green) 24%, var(--border) 76%);
}

.ce-scope-rec-card.is-selected {
  background: color-mix(in srgb, var(--green) 12%, var(--surface) 88%);
  border-color: color-mix(in srgb, var(--green) 36%, var(--border) 64%);
}

.ce-scope-rec-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-scope-rec-main strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ce-scope-rec-main em,
.ce-scope-rec-money {
  color: var(--text-muted);
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.2;
}

.ce-scope-rec-money {
  color: var(--green);
  font-weight: 800;
  white-space: nowrap;
}

.ce-scope-rec-pills {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ce-scope-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--border) 22%);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ce-scope-pill.good {
  background: color-mix(in srgb, var(--green) 12%, var(--surface) 88%);
  color: var(--green);
}

.ce-scope-pill.warn {
  background: color-mix(in srgb, var(--orange, #f59e0b) 14%, var(--surface) 86%);
  color: var(--orange, #b45309);
}

.ce-scope-pill.count {
  background: color-mix(in srgb, var(--surface-2) 78%, var(--border) 22%);
  color: var(--text-muted);
}

.ce-scope-pill.customer {
  background: color-mix(in srgb, var(--c-azure, #0078d4) 10%, var(--surface) 90%);
  color: var(--c-azure, #0078d4);
}

.ce-scope-filter-list {
  gap: 5px;
}

.ce-scope-filter-btn {
  height: 29px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
}

.ce-scope-filter-btn:hover,
.ce-scope-filter-btn.is-active {
  background: color-mix(in srgb, var(--green) 9%, var(--surface) 91%);
  border-color: color-mix(in srgb, var(--green) 20%, var(--border) 80%);
  color: var(--text);
}

.ce-scope-filter-btn strong {
  min-width: 22px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--border) 64%, var(--surface) 36%);
  color: var(--text-muted);
  font-size: 10px;
}

.ce-scope-list-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ce-scope-list-toolbar {
  min-height: 35px;
  padding: 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, #cdd5df 18%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ce-scope-list-toolbar strong {
  font-size: 12px;
  font-weight: 850;
  color: var(--text);
}

.ce-scope-list-toolbar span {
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--border) 30%);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ce-scope-list {
  gap: 4px;
  padding: 6px;
  flex: 0 0 auto;
  min-height: 0;
  max-height: calc((10 * 72px) + (9 * 4px) + 12px);
  overflow-y: auto;
  overflow-x: hidden;
}

.ce-scope-row {
  width: 100%;
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(132px, auto);
  gap: 10px;
  align-items: start;
  text-align: left;
  font: inherit;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  overflow: hidden;
}

.ce-scope-row:hover {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--green) 6%);
  border-color: color-mix(in srgb, var(--green) 18%, var(--border) 82%);
  color: var(--text);
}

.ce-scope-row.is-selected {
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 15%, var(--surface) 85%), color-mix(in srgb, var(--green) 6%, var(--surface) 94%));
  border-color: color-mix(in srgb, var(--green) 42%, var(--border) 58%);
  color: var(--text);
}

.ce-scope-row-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c-azure, #0078d4) 10%, var(--surface) 90%);
  color: var(--c-azure, #0078d4);
  font-size: 10px;
  font-weight: 850;
}

.ce-scope-row-icon-owner {
  background: color-mix(in srgb, var(--green) 12%, var(--surface) 88%);
  color: var(--green);
}

.ce-scope-row-icon-customer {
  background: color-mix(in srgb, var(--purple, #8b5cf6) 10%, var(--surface) 90%);
  color: var(--purple, #7c3aed);
}

.ce-scope-row-main,
.ce-scope-row-spend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ce-scope-row-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ce-scope-row-title,
.ce-scope-row-sub,
.ce-scope-row-spend strong,
.ce-scope-row-spend em {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ce-scope-row-title {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1.15;
}

.ce-scope-row-sub,
.ce-scope-row-spend em {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.15;
}

.ce-scope-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.ce-scope-row-spend {
  align-items: flex-end;
  justify-self: end;
  align-self: center;
}

.ce-scope-row-spend strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  max-width: 100%;
}

.ce-scope-empty {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

.ce-scope-footer {
  flex: 0 0 auto;
  min-height: 44px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, #cdd5df 18%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ce-scope-footer > span {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.ce-scope-footer > div {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.ce-scope-footer-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  border-radius: 8px;
  background: var(--submenu-bg-2, var(--surface));
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
}

.ce-scope-footer-btn:hover {
  border-color: color-mix(in srgb, var(--green) 38%, var(--border) 62%);
  color: var(--green);
}

.ce-scope-footer-btn.primary {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

[data-theme="dark"] .ce-scope-summary-card,
[data-theme="dark"] .ce-scope-sidebar,
[data-theme="dark"] .ce-scope-list-panel {
  background: color-mix(in srgb, var(--submenu-bg-2, var(--surface-2)) 88%, #0b1020 12%);
}

@media(max-width:760px) {
  .ce-scope-menu-content {
    width: 100%;
    max-width: calc(100vw - 32px);
  }

  .ce-scope-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ce-scope-search-row,
  .ce-scope-body {
    grid-template-columns: 1fr;
  }

  .ce-scope-tabs {
    width: 100%;
    justify-content: flex-start;
  }

  .ce-scope-list {
    max-height: none;
  }

  .ce-scope-row {
    min-height: 72px;
    grid-template-columns: 24px minmax(0, 1fr) minmax(104px, auto);
    grid-template-areas:
      "icon main spend"
      "icon main spend"
      "icon main spend";
  }

  .ce-scope-row-icon { grid-area: icon; }
  .ce-scope-row-main { grid-area: main; }
  .ce-scope-row-spend { grid-area: spend; }

  .ce-scope-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.vnet-compact-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.vnet-customer-cell {
  font-weight: 600;
  color: var(--text);
}

.autha {
  display: flex;
  gap: 7px
}

.autha button {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12px;
  padding: 0 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s
}

.autha button:hover {
  border-color: var(--green);
  color: var(--green);
  background: #F7FAF6
}

.autha button.pri {
  background: var(--c-azure);
  border-color: var(--c-azure);
  color: #fff
}

.autha button.pri:hover {
  filter: brightness(.95)
}

.authmeta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px
}

.authu {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  word-break: break-all
}

.gsw {
  position: relative;
  width: 280px;
  margin-left: 0;
  margin-right: 0;
  flex-shrink: 0
}

.gsb {
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--surface) 74%, transparent 26%);
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
  border-radius: 11px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease
}

.gsb:hover {
  border-color: var(--green);
  background: #F7FAF6
}

[data-theme="dark"] .gsb:hover {
  background: color-mix(in srgb, var(--green) 16%, var(--surface) 84%);
}

.gsb:focus-within {
  border-color: color-mix(in srgb, var(--green) 54%, var(--border) 46%);
  background: color-mix(in srgb, var(--surface) 85%, transparent 15%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent 84%)
}

.gsb>svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin: 0 7px 0 10px;
  pointer-events: none
}

#gSI {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 4px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  min-width: 0
}

#gSI::placeholder {
  color: var(--text-muted)
}

#gSClear {
  display: none;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 5px;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0
}

#gSClear:hover {
  color: var(--text)
}

.top-search-overlay {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(340px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent 22%);
  background: color-mix(in srgb, var(--surface) 86%, transparent 14%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, .18);
  opacity: 0;
  transform: translateY(-7px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: var(--z-global-menu-popover, 1260)
}

.top-search-overlay.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto
}

.top-search-overlay .gsb {
  background: color-mix(in srgb, var(--surface-2) 88%, transparent 12%);
}

.top-search-overlay .gspanel {
  position: static;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  max-height: 300px;
  box-shadow: none;
}

.gspanel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  z-index: 200;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  display: none
}

.gspanel.open {
  display: block
}

.gsp-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding: 0 4px
}

.gsp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  transition: background .15s;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  font-family: inherit
}

.gsp-item:hover {
  background: var(--surface-2);
  color: var(--text)
}

.gsp-item.active {
  color: var(--text)
}

.gsp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: all .15s
}

.gsp-item.active .gsp-dot {
  background: var(--c-azure);
  border-color: var(--c-azure)
}

.top-tools {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  width: 0;
  min-width: 0;
  flex: 0 0 auto;
  position: relative
}

.filter-summary {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scope-panel {
  position: absolute;
  top: 40px;
  right: 0;
  left: auto;
  z-index: 250;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  min-width: 520px;
  max-width: 760px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

[data-theme="dark"] .top-search-overlay {
  background: color-mix(in srgb, #101422 78%, transparent 22%);
  border-color: color-mix(in srgb, var(--border) 72%, #0f172a 28%);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .52);
}

[data-theme="dark"] .top-search-overlay .gsb,
[data-theme="dark"] .top-search-overlay .gspanel,
[data-theme="dark"] .scope-panel {
  background: color-mix(in srgb, var(--surface) 93%, #0b1020 7%);
}

.scope-dd {
  position: relative
}

.scope-dd-btn {
  width: 100%;
  height: var(--control-height);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  cursor: pointer;
}

.scope-dd-btn:hover {
  border-color: var(--green);
  color: var(--green);
  background: #F7FAF6
}

.scope-dd-btn:focus {
  outline: none;
  border-color: var(--c-azure);
  background: var(--surface)
}

.scope-dd-caret {
  font-size: 11px;
  color: var(--text-muted)
}

.scope-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  z-index: 260;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  max-height: 280px;
  overflow: auto;
}

.scope-dd-menu.open {
  display: block
}

.scope-dd-item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.scope-dd-item:hover {
  background: #F7FAF6;
  color: var(--green)
}

[data-theme="dark"] .scope-dd-btn:hover,
[data-theme="dark"] .scope-dd-item:hover {
  background: color-mix(in srgb, var(--green) 16%, var(--surface) 84%);
}

.scope-dd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f7fd5;
  opacity: .8;
  flex-shrink: 0;
}

.scope-subscription-list {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

#gSearchResults {
  max-height: 320px;
  overflow: auto;
  left: 0;
  right: auto;
  min-width: 100%;
  width: 100%
}

#gSearchResults .gsp-item {
  align-items: flex-start
}

#gSearchResults .gsp-meta {
  font-size: 11px;
  color: var(--text-muted)
}

#gSearchResults .gsp-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text)
}

#gSearchResults .gsp-snippet {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
  margin-top: 2px
}

.tbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 8px;
  font-size: 12px;
  color: var(--text-muted)
}

.tbar .cnt {
  color: var(--text-dim);
  font-weight: 600
}

.rfb {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  min-height: var(--control-height);
  padding: 0 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 6px
}

.rfb:hover {
  border-color: var(--green);
  color: var(--green);
  background: #F7FAF6
}

.rfb.loading svg {
  animation: spin 1s linear infinite
}

.customer-row-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap
}

.customer-row-action {
  min-width: 54px;
  justify-content: center;
  white-space: nowrap;
  padding: 5px 10px
}

.customer-row-action:hover {
  border-color: rgba(22, 163, 74, .45);
  color: var(--green);
  background: #F7FAF6
}

.customer-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.customer-type-badge.platform {
  color: var(--c-azure);
  background: var(--c-azure-bg);
  border-color: rgba(0, 120, 212, .45);
}

.customer-type-badge.client {
  color: var(--c-entra);
  background: var(--c-entra-bg);
  border-color: rgba(16, 124, 16, .45);
}

.customer-type-badge.shared {
  color: var(--orange);
  background: rgba(217, 119, 6, .1);
  border-color: rgba(217, 119, 6, .45);
}

.customer-type-badge.internal {
  color: #475569;
  background: rgba(71, 85, 105, .08);
  border-color: rgba(71, 85, 105, .28);
}

.customer-type-badge.unknown {
  color: var(--text-muted);
  background: var(--surface-2);
  border-color: rgba(100, 116, 139, .22);
}

/* ==========================================================================
   PHASE 4 SECTION: Showback
   ========================================================================== */
.showbackv2-type-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.showbackv2-type-cell .customer-type-badge {
  margin-left: 0;
}

.showbackv2-type-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
}

.showback-link-btn {
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  padding: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.showback-link-btn:hover {
  color: var(--c-azure)
}

.showback-link-btn.is-platform {
  font-weight: 700;
}

.showback-customer-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.showback-customer-cell.is-child {
  padding-left: 14px;
}

.showback-linked-prefix {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
}

.showback-breakdown {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.showback-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-3);
}

.showback-breakdown-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.showback-breakdown-left {
  min-width: 0;
  flex: 1;
}

.showback-breakdown-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.showback-breakdown-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.showback-breakdown-right {
  text-align: right;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  white-space: nowrap;
}

.showback-breakdown-right div {
  margin-top: 2px;
}

.showback-breakdown-right div:first-child {
  margin-top: 0;
  font-size: 13px;
  font-weight: 600;
}

.showback-role-grid {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.showback-role-grid > div {
  min-width: 0;
}

.showback-detail-section {
  margin-top: 18px;
}

.showback-detail-section-tight {
  margin-bottom: 8px;
}

.showback-reconciliation-card {
  margin-top: 8px;
}

.showback-detail-list-shell {
  margin-top: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}

.showback-detail-list-scroll {
  max-height: none;
  overflow: visible;
  padding: 0 10px 10px;
}

.showback-line-details {
  margin-top: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.showback-line-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 9px 10px;
}

.showback-line-details > summary::-webkit-details-marker {
  display: none;
}

.showback-line-details > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
}

.showback-line-details[open] > summary::before {
  content: "▾";
}

.showback-rg-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.showback-rg-summary-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showback-rg-summary-amount {
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.showback-line-details .showback-detail-list-shell {
  margin: 0 8px 8px;
}

.showback-charge-list {
  margin-top: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}

.showback-charge-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.showback-charge-row:last-child {
  border-bottom: none;
}

.showback-charge-main {
  min-width: 0;
}

.showback-charge-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.showback-charge-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}

.showback-charge-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.showback-recon-list {
  background: transparent;
}

.showback-invoice-summary {
  margin: 0 0 18px;
}

.showback-finance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
  margin-bottom: 14px;
}

.showback-finance-item {
  min-width: 0;
}

.showback-finance-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.showback-finance-value {
  font-size: 30px;
  font-size: clamp(18px, 2.5vw, 30px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--text);
}

.showback-finance-value.is-excluded {
  color: var(--orange);
}

.showback-finance-value.is-strong {
  color: var(--green);
}

.showback-net-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(34, 197, 94, .3);
  border-left: 8px solid rgba(34, 197, 94, .8);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 6%, var(--surface) 94%);
}

.showback-net-hero-title {
  font-size: 36px;
  font-size: clamp(23px, 4.3vw, 36px);
  line-height: 1.02;
  font-weight: 700;
  color: var(--text);
}

.showback-net-hero-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.showback-net-hero-value {
  font-size: 42px;
  font-size: clamp(30px, 5.2vw, 42px);
  line-height: 1;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.showback-section-title {
  font-size: 27px;
  font-size: clamp(20px, 2.5vw, 27px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.showback-section-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}

.showback-role-summary-card {
  margin-bottom: 18px;
}

.showback-role-summary-card-tight {
  margin-top: -6px;
}

.showback-role-summary-shell {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px 12px;
}

.showback-role-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.showback-role-summary-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.showback-role-summary-value {
  font-size: 24px;
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.05;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.showback-role-block {
  margin-top: 12px;
}

.showback-role-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.showback-role-block-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.showback-role-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 7px 2px;
  border-bottom: 1px solid var(--border-subtle);
}

.showback-role-line:last-child {
  border-bottom: none;
}

.showback-role-line.is-emphasis {
  background: color-mix(in srgb, var(--green) 7%, var(--surface-2) 93%);
  border-radius: 7px;
  margin-top: 6px;
  padding: 8px 10px;
  border-bottom: none;
}

.showback-role-line-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.showback-role-line-value {
  font-size: 22px;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.05;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.showback-role-line-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--orange);
  font-weight: 500;
}

.showback-detail-stack {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.showback-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.showback-detail-stat {
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-2);
}

.showback-detail-stat.showback-detail-stat-wide {
  grid-column: 1 / -1;
}

.showback-detail-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.showback-detail-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

.showback-detail-card {
  border-top: 1px solid var(--border);
  padding: 16px 0 4px;
  margin-top: 4px;
}

.showback-detail-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.showback-detail-card-title {
  font-size: 32px;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.08;
  font-weight: 700;
  color: var(--text);
}

.showback-detail-card-value {
  font-size: 28px;
  font-size: clamp(16px, 2.1vw, 28px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--text);
}

.showback-detail-card-meta {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.showback-detail-excluded {
  color: var(--orange);
}

.showback-detail-billed {
  color: var(--green);
}

.showback-detail-breakdown {
  margin-top: 10px;
}

.showback-owned-trace-wrap {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.showback-owned-trace-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.showback-detail-grouped-note {
  margin-top: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.sbi-root {
  --sbi-bg: #f6f5f3;
  --sbi-panel: #fbfaf8;
  --sbi-card: #f9f8f6;
  --sbi-border: #dedbd6;
  --sbi-border-soft: #e8e4de;
  --sbi-text: #1f2130;
  --sbi-muted: #72768a;
  --sbi-muted-2: #8f93a3;
  --sbi-green: #1f7a4c;
  --sbi-green-soft: #e8eee5;
  --sbi-green-accent: #90c06a;
  --sbi-orange: #d8781a;
  border-top: 0;
  padding-top: 0;
  color: var(--sbi-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.showback-full-investigation {
  min-height: calc(100dvh - var(--topnav-offset, 72px));
  padding: 20px var(--ledger-content-gutter-width, 20px) 48px;
  background: transparent;
}

.showback-full-investigation__page,
.showback-full-investigation__empty {
  max-width: 1120px;
  margin: 0 auto;
}

.showback-full-investigation__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.showback-full-investigation__eyebrow,
.showback-full-investigation__hero-label {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--green);
}

.showback-full-investigation__title {
  margin: 8px 0 0;
  font-size: 31px;
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 750;
}

.showback-full-investigation__meta {
  margin: 6px 0 0;
  color: #8e8e9b;
  font-size: 12.5px;
}

.showback-full-investigation__head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.showback-full-investigation__status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  height: 30px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}

.showback-full-investigation__status--invoice_ready {
  background: #ecf7ef;
  color: var(--green);
  border-color: rgba(22, 163, 74, .2);
}

.showback-full-investigation__status--needs_review,
.showback-full-investigation__status--excluded {
  background: #fbf2e7;
  color: #d97706;
  border-color: rgba(217, 119, 6, .25);
}

.showback-full-investigation__back-btn,
.showback-full-investigation__primary-btn {
  height: 34px;
  border-radius: 10px;
  padding: 0 13px;
  border: 1px solid #e3e2dc;
  background: #fff;
  color: #56566d;
  font-weight: 700;
}

.showback-full-investigation__primary-btn {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.showback-full-investigation__hero {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  background: #fff;
  border: 1px solid #e3e2dc;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(24,24,33,.03), 0 12px 36px -34px rgba(24,24,33,.34);
  margin-bottom: 14px;
}

.showback-full-investigation__hero-net,
.showback-full-investigation__hero-composition {
  padding: 22px 24px;
}

.showback-full-investigation__hero-net {
  background: linear-gradient(145deg, #ecf7ef, rgba(255,255,255,.5) 72%);
  border-right: 1px solid #e3e2dc;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.showback-full-investigation__hero-amount {
  margin-top: 8px;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 760;
}

.showback-full-investigation__hero-sub {
  margin: 6px 0 0;
  color: #56566d;
  font-size: 12.5px;
  font-weight: 600;
}

.showback-full-investigation__composition-bar {
  display: flex;
  height: 10px;
  background: #f8f8f6;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 12px;
}

.showback-full-investigation__composition-seg.is-azure { background: #0078d4; }
.showback-full-investigation__composition-seg.is-teal { background: #0891b2; }
.showback-full-investigation__composition-seg.is-green { background: var(--green); }

.showback-full-investigation__composition-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #e3e2dc;
}

.showback-full-investigation__composition-row span:nth-child(2) {
  flex: 1;
  color: #56566d;
  font-size: 12.5px;
  font-weight: 600;
}

.showback-full-investigation__composition-row strong {
  font-size: 13.5px;
}

.showback-full-investigation__composition-row.is-total {
  border-top: 1.5px solid #d7d6cf;
  margin-top: 2px;
}

.showback-full-investigation__composition-row.is-total strong {
  color: var(--green);
  font-size: 16px;
}

.showback-full-investigation__composition-mark {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}

.showback-full-investigation__composition-mark.is-azure { background: #0078d4; }
.showback-full-investigation__composition-mark.is-teal { background: #0891b2; }
.showback-full-investigation__composition-mark.is-green { background: var(--green); }

.showback-full-investigation__audit-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.showback-full-investigation__audit {
  background: rgba(255,255,255,.75);
  border: 1px solid #e3e2dc;
  border-radius: 14px;
  padding: 10px 12px;
}

.showback-full-investigation__audit small {
  color: #8e8e9b;
  font-weight: 600;
  font-size: 11px;
}

.showback-full-investigation__audit b {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  letter-spacing: -.02em;
}

.showback-full-investigation__audit b.neg {
  color: #d97706;
}

.showback-full-investigation__section {
  margin-top: 18px;
}

.showback-full-investigation__section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.showback-full-investigation__section-head h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.035em;
}

.showback-full-investigation__section-head p {
  margin: 0;
  color: #8e8e9b;
  font-size: 12px;
}

.showback-full-investigation__role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.showback-full-investigation__role-card,
.showback-full-investigation__card,
.showback-full-investigation__empty-card,
.showback-full-investigation__note {
  background: #fff;
  border: 1px solid #e3e2dc;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(24,24,33,.025);
}

.showback-full-investigation__role-card {
  padding: 16px;
}

.showback-full-investigation__role-head {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.showback-full-investigation__role-badge {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
}

.showback-full-investigation__role-badge.a { background: var(--green); }
.showback-full-investigation__role-badge.b { background: #0891b2; }

.showback-full-investigation__role-title {
  font-size: 14px;
  font-weight: 750;
}

.showback-full-investigation__role-desc {
  font-size: 11.5px;
  color: #8e8e9b;
  margin-top: 3px;
}

.showback-full-investigation__role-val {
  margin-left: auto;
  text-align: right;
}

.showback-full-investigation__role-val b {
  font-size: 18px;
}

.showback-full-investigation__role-list {
  margin-top: 12px;
  border-top: 1px solid #e3e2dc;
}

.showback-full-investigation__minirow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #e3e2dc;
}

.showback-full-investigation__minirow:last-child {
  border-bottom: 0;
}

.showback-full-investigation__minirow span:first-child {
  color: #56566d;
  font-weight: 600;
}

.showback-full-investigation__minirow strong {
  margin-left: auto;
}

.showback-full-investigation__minirow em {
  color: #d97706;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.showback-full-investigation__charges {
  display: grid;
}

.showback-full-investigation__charge-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e3e2dc;
}

.showback-full-investigation__charge-row:last-child {
  border-bottom: 0;
}

.showback-full-investigation__charge-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f8f8f6;
  display: grid;
  place-items: center;
  color: #56566d;
  font-weight: 700;
}

.showback-full-investigation__charge-name,
.showback-full-investigation__ledger-title {
  font-size: 13.5px;
  font-weight: 740;
}

.showback-full-investigation__charge-meta,
.showback-full-investigation__ledger-meta,
.showback-full-investigation__submeta {
  color: #8e8e9b;
  font-size: 11.5px;
  margin-top: 2px;
}

.showback-full-investigation__charge-value {
  text-align: right;
  font-weight: 760;
  font-size: 14px;
}

.showback-full-investigation__ledger-list {
  display: grid;
  gap: 12px;
}

.showback-full-investigation__ledger-head {
  padding: 14px 16px;
  border-bottom: 1px solid #e3e2dc;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.showback-full-investigation__tag {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
}

.showback-full-investigation__tag.good {
  background: #ecf7ef;
  color: var(--green);
}

.showback-full-investigation__tag.warn {
  background: #fbf2e7;
  color: #d97706;
}

.showback-full-investigation__subrow {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: #f8f8f6;
  border-bottom: 1px solid #e3e2dc;
}

.showback-full-investigation__subico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #eef6fd;
  color: #0078d4;
  display: grid;
  place-items: center;
}

.showback-full-investigation__subico.is-shared {
  background: #eaf7fa;
  color: #0891b2;
}

.showback-full-investigation__subname {
  font-family: "DM Mono", var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 500;
}

.showback-full-investigation__service-list {
  display: grid;
}

.showback-full-investigation__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  border-bottom: 1px solid #e3e2dc;
  min-height: 32px;
}

.showback-full-investigation__line span:first-child {
  min-width: 0;
  color: #56566d;
  font-size: 12.5px;
  display: grid;
  gap: 2px;
}

.showback-full-investigation__line-name {
  font-size: 12.5px;
  font-weight: 700;
}

.showback-full-investigation__line-meta {
  color: #8e8e9b;
  font-size: 10.5px;
  font-weight: 500;
}

.showback-full-investigation__line b {
  font-size: 13px;
  text-align: right;
}

.showback-full-investigation__line-amount.is-excluded {
  color: var(--orange, #d97706);
  text-decoration: line-through;
}

.showback-full-investigation__line-status {
  min-width: 68px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--green);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.showback-full-investigation__line-status.is-muted {
  color: #8e8e9b;
}

.showback-full-investigation__line-status.is-excluded {
  color: var(--orange, #d97706);
}

.showback-full-investigation__expand {
  margin: 8px 0 0;
  border-top: 1px solid #e3e2dc;
}

.showback-full-investigation__expand-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 16px;
  font-family: inherit;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  color: #56566d;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.showback-full-investigation__expand-caret {
  color: #8e8e9b;
  transition: transform .18s ease;
}

.showback-full-investigation__expand-inner {
  display: none;
  padding: 0 16px 12px;
}

.showback-full-investigation__expand.is-open .showback-full-investigation__expand-inner {
  display: block;
}

.showback-full-investigation__expand.is-open .showback-full-investigation__expand-caret {
  transform: rotate(180deg);
}

.showback-full-investigation__rg {
  background: #fff;
  border: 1px solid #e3e2dc;
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 8px;
}

.showback-full-investigation__rg b {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.showback-full-investigation__rg small {
  color: #8e8e9b;
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
}

.showback-full-investigation__rg-excluded {
  color: var(--orange, #d97706);
}

.showback-full-investigation__total-foot {
  background: #ecf7ef;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 11.5px;
}

.showback-full-investigation__total-foot strong {
  color: var(--green);
  font-size: 16px;
}

.showback-full-investigation__total-foot em {
  color: var(--orange, #d97706);
  font-style: normal;
  font-weight: 700;
  text-decoration: line-through;
}

.showback-full-investigation__charge-meta--applies {
  margin-top: 3px;
  color: #56566d;
  font-weight: 600;
}

.showback-full-investigation__service-list {
  display: grid;
}

.showback-full-investigation__service {
  border-bottom: 1px solid #e6e8ee;
}

.showback-full-investigation__service:last-child {
  border-bottom: 0;
}

.showback-full-investigation__service > summary {
  list-style: none;
  cursor: pointer;
}

.showback-full-investigation__service > summary::-webkit-details-marker,
.showback-full-investigation__rg-panel > summary::-webkit-details-marker,
.showback-full-investigation__rg-card > summary::-webkit-details-marker {
  display: none;
}

.showback-full-investigation__service-summary {
  display: grid;
  grid-template-columns: 1fr auto 78px 24px;
  gap: 18px;
  align-items: center;
  padding: 13px 16px;
}

.showback-full-investigation__service-summary:hover {
  background: #fbfdfb;
}

.showback-full-investigation__service-caret,
.showback-full-investigation__rg-caret {
  color: #999;
  transition: transform .2s ease;
}

.showback-full-investigation__service[open] .showback-full-investigation__service-caret,
.showback-full-investigation__rg-panel[open] .showback-full-investigation__rg-caret,
.showback-full-investigation__rg-card[open] .showback-full-investigation__rg-caret {
  transform: rotate(180deg);
}

.showback-full-investigation__service-detail {
  padding: 0 16px 16px;
  background: linear-gradient(#fff, #fbfdfb);
}

.showback-full-investigation__detail-box {
  border: 1px solid #ddeee3;
  border-radius: 15px;
  background: #fff;
  overflow: hidden;
}

.showback-full-investigation__detail-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  background: #f4fbf6;
  border-bottom: 1px solid #ddeee3;
}

.showback-full-investigation__detail-title strong {
  display: block;
  font-size: 13px;
}

.showback-full-investigation__detail-title small {
  display: block;
  margin-top: 2px;
  color: #7a7d8f;
  font-size: 12px;
}

.showback-full-investigation__detail-tag,
.showback-full-investigation__rg-pill,
.showback-full-investigation__rg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f1f5f3;
  border: 1px solid #e1e7e3;
  color: #555;
  font-size: 11px;
  font-weight: 850;
  padding: 6px 10px;
}

.showback-full-investigation__detail-row {
  display: grid;
  grid-template-columns: 1.2fr .9fr .7fr .7fr .55fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #edf0f3;
  font-size: 12px;
}

.showback-full-investigation__detail-row:last-child {
  border-bottom: 0;
}

.showback-full-investigation__detail-row span {
  min-width: 0;
}

.showback-full-investigation__detail-row strong {
  display: block;
  font-size: 12px;
  font-weight: 850;
}

.showback-full-investigation__detail-row small {
  display: block;
  margin-top: 2px;
  color: #7a7d8f;
  font-size: 11px;
}

.showback-full-investigation__detail-row.is-header {
  background: #fcfdfd;
  color: #8b8ea1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.showback-full-investigation__detail-row.is-mini {
  grid-template-columns: 1.2fr .8fr .75fr .55fr;
}

.showback-full-investigation__detail-money {
  text-align: right;
  font-weight: 900;
}

.showback-full-investigation__rg-panel {
  margin-top: 8px;
  border-top: 1px solid #e6e8ee;
  background: #fff;
}

.showback-full-investigation__rg-opener {
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, #f8fcf9, #fff);
  border-bottom: 1px solid #e6e8ee;
  cursor: pointer;
}

.showback-full-investigation__rg-opener strong {
  display: block;
  font-size: 13px;
}

.showback-full-investigation__rg-opener small {
  display: block;
  margin-top: 2px;
  color: #7a7d8f;
  font-size: 12px;
}

.showback-full-investigation__rg-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #eaf8ef;
  color: var(--green);
  display: grid;
  place-items: center;
  font-weight: 900;
  flex: 0 0 auto;
}

.showback-full-investigation__rg-count {
  margin-left: auto;
}

.showback-full-investigation__rg-body {
  padding: 16px;
  background: #fbfdfb;
}

.showback-full-investigation__rg-grid {
  display: grid;
  gap: 12px;
}

.showback-full-investigation__rg-card {
  border: 1px solid #dfe8e2;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.showback-full-investigation__rg-card > summary {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto auto 24px;
  gap: 14px;
  align-items: center;
  cursor: pointer;
}

.showback-full-investigation__rg-card > summary:hover {
  background: #fbfdfb;
}

.showback-full-investigation__rg-title {
  display: block;
  font-size: 13px;
  font-weight: 900;
}

.showback-full-investigation__rg-sub {
  display: block;
  margin-top: 3px;
  color: #7a7d8f;
  font-size: 11px;
}

.showback-full-investigation__rg-resources {
  padding: 0 14px 14px;
}

.showback-full-investigation__rg-mini {
  border: 1px solid #edf0f3;
  border-radius: 14px;
  overflow: hidden;
}

.showback-full-investigation__note {
  margin-top: 18px;
  border-radius: 14px;
  padding: 14px 16px;
  color: #8e8e9b;
  font-size: 12px;
}

.showback-full-investigation__empty {
  padding: 20px 0;
}

.showback-full-investigation__empty-card {
  padding: 24px;
}

.showback-full-investigation__empty-card.is-inline {
  padding: 14px 16px;
  border-radius: 13px;
  box-shadow: none;
}

.showback-full-investigation__empty-card h2 {
  margin: 8px 0 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.showback-full-investigation__empty-card p {
  margin: 10px 0 0;
  color: #8e8e9b;
  max-width: 60ch;
}

@media (max-width: 900px) {
  .showback-full-investigation {
    padding: 18px 16px 42px;
  }

  .showback-full-investigation__hero {
    grid-template-columns: 1fr;
  }

  .showback-full-investigation__hero-net {
    border-right: 0;
    border-bottom: 1px solid #e3e2dc;
  }

  .showback-full-investigation__section-head,
  .showback-full-investigation__head {
    flex-direction: column;
    align-items: stretch;
  }

  .showback-full-investigation__role-grid,
  .showback-full-investigation__audit-strip {
    grid-template-columns: 1fr;
  }

  .showback-full-investigation__title {
    font-size: 26px;
  }

  .showback-full-investigation__hero-amount {
    font-size: 38px;
  }

  .showback-full-investigation__service-summary {
    grid-template-columns: 1fr auto;
  }

  .showback-full-investigation__line-status,
  .showback-full-investigation__service-caret,
  .showback-full-investigation__rg-count,
  .showback-full-investigation__rg-card > summary .showback-full-investigation__rg-pill:nth-of-type(2),
  .showback-full-investigation__rg-card > summary .showback-full-investigation__rg-caret {
    display: none;
  }

  .showback-full-investigation__detail-row,
  .showback-full-investigation__detail-row.is-mini,
  .showback-full-investigation__rg-card > summary {
    grid-template-columns: 1fr;
  }

  .showback-full-investigation__detail-money {
    text-align: left;
  }
}

[data-theme="dark"] .sbi-root {
  --sbi-bg: transparent;
  --sbi-panel: rgba(24, 26, 36, 0.35);
  --sbi-card: rgba(24, 26, 36, 0.42);
  --sbi-border: rgba(120, 130, 166, 0.36);
  --sbi-border-soft: rgba(120, 130, 166, 0.26);
  --sbi-text: #e8ebf5;
  --sbi-muted: #c0c7da;
  --sbi-muted-2: #aab3cb;
  --sbi-green: #56c488;
  --sbi-green-soft: rgba(72, 116, 86, 0.3);
  --sbi-green-accent: #8ac16c;
  --sbi-orange: #ff9a3d;
}

.sbi-stats-grid {
  align-items: start;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
  margin-bottom: 10px;
}

.sbi-stat-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sbi-muted);
  line-height: 1.3;
}

.sbi-stat-value {
  font-size: 16px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--sbi-text);
}

.sbi-green {
  color: var(--sbi-green);
}

.sbi-orange {
  color: var(--sbi-orange);
}

.sbi-strike {
  text-decoration: line-through;
}

.sbi-hero {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  background: var(--sbi-green-soft);
  border: 1px solid var(--sbi-border);
  border-radius: 10px;
  overflow: hidden;
  margin: 6px 0 14px;
}

.sbi-hero-accent {
  height: 100%;
  background: var(--sbi-green-accent);
}

.sbi-hero-copy {
  padding: 10px 12px 9px 10px;
}

.sbi-hero-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 2px;
}

.sbi-hero-subtitle {
  margin: 0;
  color: var(--sbi-muted);
  font-size: 11px;
  line-height: 1.4;
}

.sbi-hero-amount {
  padding: 10px 14px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.sbi-section-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.sbi-card {
  background: var(--sbi-card);
  border: 1px solid var(--sbi-border);
  border-radius: 10px;
  padding: 10px 10px 6px;
  box-shadow: 0 1px 0 rgba(31, 33, 48, 0.02);
}

.sbi-top-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--sbi-border-soft);
  margin-bottom: 7px;
}

.sbi-top-row h3 {
  margin: 0 0 3px;
  font-size: 14px;
  line-height: 1.2;
}

.sbi-top-row p {
  margin: 0;
  color: var(--sbi-muted);
  font-size: 11px;
  line-height: 1.45;
  max-width: 620px;
}

.sbi-raw-total-block {
  min-width: 140px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #eaf3ff;
  border: 1px solid #d5e6ff;
  text-align: center;
}

.sbi-raw-total-label {
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f7697;
  margin-bottom: 3px;
}

.sbi-raw-total-value {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
  color: #274c77;
  white-space: nowrap;
}

.sbi-breakdown-section {
  padding: 0 0 2px;
  border-bottom: 1px solid var(--sbi-border-soft);
  margin-bottom: 6px;
}

.sbi-breakdown-section:last-of-type {
  margin-bottom: 6px;
}

.sbi-section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 7px;
  margin-bottom: 3px;
}

.sbi-badge {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #efeeeb;
  color: var(--sbi-text);
  font-weight: 700;
  font-size: 12px;
  margin-top: 1px;
}

.sbi-section-head h4 {
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.2;
}

.sbi-section-head p {
  margin: 0;
  color: var(--sbi-muted);
  font-size: 11px;
  line-height: 1.4;
  max-width: 610px;
}

.sbi-head-value {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.sbi-subline {
  margin: 3px 0 0 27px;
  font-size: 12px;
  font-weight: 600;
}

.sbi-summary-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 7px;
}

.sbi-row-label {
  font-size: 12px;
  font-weight: 600;
}

.sbi-row-value {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sbi-summary-row-soft {
  background: #eef1ea;
  border: 1px solid var(--sbi-border);
}

.sbi-charge-list-footer {
  padding: 5px 8px 7px;
  border-top: 1px solid var(--sbi-border-soft);
}

.sbi-inline-note {
  margin-top: -3px;
  padding: 0 6px 4px;
  color: var(--sbi-muted);
  font-size: 11px;
}

.sbi-subsection {
  margin-top: 12px;
}

.sbi-subsection-note {
  margin: 0 0 5px;
  color: var(--sbi-muted);
  font-size: 11px;
  line-height: 1.45;
}

.sbi-charge-list,
.sbi-total-list {
  background: var(--sbi-card);
  border: 1px solid var(--sbi-border);
  border-radius: 10px;
  overflow: hidden;
}

.sbi-charge-item,
.sbi-total-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 7px 10px;
  align-items: start;
  border-bottom: 1px solid var(--sbi-border-soft);
}

.sbi-charge-item:last-child,
.sbi-total-item:last-child {
  border-bottom: 0;
}

.sbi-charge-item h4 {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.25;
}

.sbi-charge-item p {
  margin: 0;
  color: var(--sbi-muted);
  font-size: 10.5px;
  line-height: 1.4;
  max-width: 620px;
}

.sbi-charge-value,
.sbi-total-value {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  padding-top: 1px;
}

.sbi-total-label {
  font-size: 12px;
  line-height: 1.25;
}

.sbi-total-item-net {
  background: #eef1ea;
}

.sbi-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px 2px;
  border-radius: 5px;
  background: rgba(31, 122, 76, 0.06);
  color: #125c38;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sbi-total-item .sbi-total-value {
  color: var(--sbi-green);
  font-size: 14px;
}

.sbi-detail-sections {
  margin-top: 20px;
}

.sbi-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 14px;
}

.sbi-detail-stat-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sbi-muted-2);
  margin-bottom: 3px;
}

.sbi-detail-stat-value {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
}

.sbi-detail-block + .sbi-detail-block {
  margin-top: 18px;
}

.sbi-detail-card {
  padding: 10px 10px 0;
  border: 1px solid var(--sbi-border);
  border-radius: 10px;
  background: var(--sbi-card);
  overflow: hidden;
}

.sbi-detail-header h3 {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.2;
}

.sbi-detail-meta {
  font-size: 13px;
  color: var(--sbi-text);
  margin-bottom: 5px;
}

.sbi-detail-inline {
  font-size: 11px;
  line-height: 1.45;
}

.sbi-detail-inline.sbi-billed {
  color: var(--sbi-green);
}

.sbi-detail-inline.sbi-excluded {
  color: var(--sbi-orange);
}

.sbi-platform-head {
  padding: 8px 0 5px;
  font-size: 12px;
  color: var(--sbi-muted);
  border-top: 1px solid var(--sbi-border-soft);
  margin-top: 8px;
}

.sbi-detail-card .sbi-platform-head:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.sbi-platform-head strong {
  color: var(--sbi-text);
}

.sbi-platform-subscriptions {
  margin-top: 4px;
  color: #a6aab8;
  font-size: 11px;
  line-height: 1.4;
  word-break: break-word;
}

.sbi-net-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin-top: 5px;
}

.sbi-net-summary-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sbi-muted-2);
  margin-bottom: 2px;
}

.sbi-net-summary-value {
  font-size: 24px;
  font-size: clamp(15px, 2.2vw, 24px);
  line-height: 1.1;
  font-weight: 600;
  color: var(--sbi-text);
}

.sbi-line-table {
  border-top: 1px solid var(--sbi-border-soft);
  margin-top: 6px;
}

.sbi-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--sbi-border-soft);
}

.sbi-line-row:first-child {
  border-top: 0;
}

.sbi-line-name {
  font-size: 12px;
  line-height: 1.35;
}

.sbi-consumed {
  color: var(--sbi-muted);
  font-size: 0.9em;
}

.sbi-line-amount {
  font-size: 12px;
  white-space: nowrap;
}

.sbi-line-amount-strike {
  text-decoration: line-through;
  color: var(--sbi-muted);
}

.sbi-line-status {
  min-width: 80px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.sbi-line-status-billed {
  color: var(--sbi-green);
}

.sbi-line-status-excluded {
  color: var(--sbi-orange);
}

.sbi-line-table-compact {
  margin-top: 5px;
}

.sbi-line-table-compact .sbi-line-row {
  padding: 5px 0;
  gap: 10px;
}

.sbi-line-row-metric .sbi-line-name {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sbi-muted-2);
}

.sbi-line-row-metric .sbi-line-amount {
  font-size: 13px;
  font-weight: 700;
}

.sbi-subscription-groups {
  margin-top: 12px;
}

.sbi-subscription-details,
.sbi-resource-group-card {
  border: 1px solid var(--sbi-border);
  border-radius: 8px;
  background: var(--sbi-card);
  overflow: hidden;
}

.sbi-subscription-details {
  background: var(--sbi-card);
}

.sbi-subscription-summary,
.sbi-resource-group-summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.sbi-subscription-summary::-webkit-details-marker,
.sbi-resource-group-summary::-webkit-details-marker {
  display: none;
}

.sbi-subscription-summary {
  padding: 8px 12px;
}

.sbi-summary-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--sbi-text);
}

.sbi-summary-subtext {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--sbi-muted);
}

.sbi-summary-icon {
  color: var(--sbi-muted);
  font-size: 13px;
  transition: transform 0.2s ease;
}

.sbi-subscription-details[open] .sbi-summary-icon {
  transform: rotate(180deg);
}

.sbi-resource-groups-list {
  padding: 0 8px 8px;
  border-top: 1px solid var(--sbi-border-soft);
  background: transparent;
}

.sbi-resource-group-card {
  margin-top: 8px;
  border-style: solid;
  background: var(--sbi-card);
}

.sbi-resource-group-summary {
  padding: 7px 10px;
}

.sbi-group-name {
  font-size: 12px;
  font-weight: 700;
  color: #5b6078;
}

.sbi-group-count {
  color: var(--sbi-muted);
  font-weight: 600;
}

.sbi-group-total {
  font-size: 12px;
  font-weight: 700;
  color: #5b6078;
  white-space: nowrap;
}

.sbi-resource-group-body {
  padding: 6px 10px 10px;
  border-top: 1px dashed var(--sbi-border);
  background: transparent;
}

.sbi-group-raw {
  color: var(--sbi-muted);
  font-size: 11px;
  margin-bottom: 6px;
}

.sbi-assigned-resource {
  padding: 7px 0;
  border-top: 1px solid var(--sbi-border-soft);
}

.sbi-assigned-resource:first-of-type {
  border-top: 0;
}

.sbi-assigned-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}

.sbi-assigned-name,
.sbi-assigned-price {
  font-size: 12px;
  font-weight: 700;
  color: #5b6078;
}

.sbi-assigned-meta {
  margin-top: 3px;
  color: #9a9eb0;
  font-size: 11px;
  line-height: 1.4;
  word-break: break-word;
}

.sbi-assigned-status-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  color: var(--sbi-muted);
  font-size: 11px;
  text-transform: lowercase;
}

.sbi-assigned-status {
  color: var(--sbi-green);
  font-weight: 700;
}

.sbi-excluded-text {
  color: var(--sbi-orange);
}

.sbi-section-footer-total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 8px -14px 0;
  padding: 8px 14px;
  background: #eef1ea;
  border-top: 1px solid var(--sbi-border);
}

.sbi-root .showback-line-details {
  border: 1px solid var(--sbi-border);
  border-radius: 8px;
  background: var(--sbi-card);
  overflow: hidden;
  margin-top: 8px;
}

.sbi-root .showback-line-details > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  padding: 7px 10px;
  color: #5b6078;
  font-size: 12px;
  font-weight: 700;
}

.sbi-root .showback-line-details > summary::before {
  content: none;
}

.sbi-root .showback-line-details > summary::-webkit-details-marker {
  display: none;
}

.sbi-root .showback-line-details > summary .showback-rg-summary-label,
.sbi-root .showback-line-details > summary .showback-rg-summary-amount {
  color: #5b6078;
  font-size: 12px;
  font-weight: 700;
}

.sbi-root .showback-line-details .showback-detail-list-shell {
  margin: 5px 8px 8px;
  border: 1px solid var(--sbi-border-soft);
  border-radius: 7px;
  background: transparent;
}

.sbi-section-footer-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: 2px 8px 3px;
  border-radius: 6px;
  background: rgba(31, 122, 76, 0.08);
  color: #125c38;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sbi-section-footer-value {
  color: var(--sbi-green);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 700;
  white-space: nowrap;
}

[data-theme="dark"] .sbi-group-name,
[data-theme="dark"] .sbi-group-total,
[data-theme="dark"] .sbi-assigned-name,
[data-theme="dark"] .sbi-assigned-price,
[data-theme="dark"] .sbi-root .showback-line-details > summary,
[data-theme="dark"] .sbi-root .showback-line-details > summary .showback-rg-summary-label,
[data-theme="dark"] .sbi-root .showback-line-details > summary .showback-rg-summary-amount {
  color: var(--sbi-text);
}

[data-theme="dark"] .sbi-platform-subscriptions,
[data-theme="dark"] .sbi-assigned-meta,
[data-theme="dark"] .sbi-group-count {
  color: var(--sbi-muted);
}

[data-theme="dark"] .sbi-section-footer-total,
[data-theme="dark"] .sbi-summary-row-soft,
[data-theme="dark"] .sbi-total-item-net {
  background: rgba(86, 196, 136, 0.1);
}

[data-theme="dark"] .sbi-section-footer-chip,
[data-theme="dark"] .sbi-chip {
  background: rgba(86, 196, 136, 0.14);
  color: #90e2b9;
}

[data-theme="dark"] .sbi-raw-total-block {
  background: rgba(77, 131, 194, 0.16);
  border-color: rgba(139, 180, 226, 0.4);
}

[data-theme="dark"] .sbi-raw-total-label {
  color: #b8d1ed;
}

[data-theme="dark"] .sbi-raw-total-value {
  color: #d3e7ff;
}

@media (max-width: 760px) {
  .sbi-top-row {
    grid-template-columns: 1fr;
  }

  .sbi-raw-total-block {
    text-align: left;
    min-width: 0;
  }

  .sbi-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
  }

  .sbi-hero {
    grid-template-columns: 10px 1fr;
  }

  .sbi-hero-amount {
    grid-column: 2;
    padding-top: 0;
  }

  .sbi-top-row,
  .sbi-section-head,
  .sbi-charge-item,
  .sbi-total-item,
  .sbi-summary-row,
  .sbi-line-row {
    grid-template-columns: 1fr;
  }

  .sbi-head-value,
  .sbi-charge-value,
  .sbi-total-value,
  .sbi-row-value,
  .sbi-line-status {
    text-align: left;
    min-width: 0;
  }

  .sbi-subline {
    margin-left: 0;
  }

  .sbi-detail-grid {
    grid-template-columns: 1fr;
  }

  .sbi-net-summary-grid {
    grid-template-columns: 1fr;
  }

  .sbi-section-footer-total {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.customer-platform-section {
  margin: 0 0 14px
}

.customer-platform-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.customer-platform-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.customer-platform-meta {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

.tenant-row-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap
}

.tenant-row-action {
  min-width: 58px;
  justify-content: center;
  white-space: nowrap;
  padding: 5px 10px
}

.tenant-row-action:hover {
  border-color: rgba(22, 163, 74, .45);
  color: var(--green);
  background: #F7FAF6
}

.tenant-row-action-delete {
  border-color: var(--red) !important;
  color: var(--red) !important
}

.tenant-row-action-delete:hover {
  background: rgba(220, 38, 38, .08) !important;
  border-color: var(--red) !important;
  color: var(--red) !important
}

.tp .rfb:not(.btn-primary):hover {
  border-color: rgba(22, 163, 74, .45);
  color: var(--green);
  background: #F7FAF6
}

.tp#panel-add-customer .rfb:not(.btn-primary):hover {
  border-color: rgba(22, 163, 74, .45);
  color: var(--green);
  background: #F7FAF6
}

.customer-launch-tools {
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center
}

.customer-launch-left,
.customer-launch-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap
}

.customer-launch-right {
  margin-left: auto;
  justify-content: flex-end
}

.customer-filter-select {
  min-width: 188px;
}

.customer-filter-select.customer-filter-env {
  min-width: 150px;
}

.customer-launch-tools .rfb {
  height: 34px;
  padding: 0 12px;
}

.customer-filter-select .authi,
.customer-search-input,
.customer-toolbar-btn {
  height: 34px;
}

.customer-toolbar-btn {
  min-width: 34px;
  justify-content: center;
}

.customer-toolbar-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.customer-launch-tools .rfb.is-active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(22, 163, 74, .1);
}

.customer-launch-box {
  padding-top: 16px;
  padding-bottom: 16px
}

.customer-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end
}

.admin-accounts-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 290px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0 10px;
}

.admin-accounts-search-box:hover {
  border-color: rgba(22, 163, 74, .45);
}

.admin-accounts-search-box:focus-within {
  border-color: var(--c-azure);
  background: var(--surface);
}

.admin-accounts-search-box svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.admin-accounts-search .customer-search-input {
  width: 100%;
  max-width: 100%;
  border: none;
  background: transparent;
  padding: 0;
}

.admin-accounts-search .customer-search-input:hover,
.admin-accounts-search .customer-search-input:focus {
  border: none;
  background: transparent;
}

@media (max-width: 1280px) {
  .customer-launch-tools,
  .customer-launch-left,
  .customer-launch-right {
    flex-wrap: wrap;
  }

  .customer-launch-right {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}

.service-choice-btn {
  min-width: 220px;
  justify-content: center;
  font-weight: 600
}

.service-choice-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.mapping-main-label {
  font-weight: 700;
  color: var(--text)
}

.mapping-sub-label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45
}

.customer-connection-box,
.customer-connection-box * {
  text-align: left
}

.customer-connection-head {
  justify-content: space-between
}

.customer-connection-box .anl-bs {
  max-width: none;
  margin-bottom: 14px
}

.customer-connection-box table thead th,
.customer-connection-box table tbody td {
  text-align: left
}

.customer-connection-note {
  text-align: left
}

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

.audit-summary {
  min-height: 40px
}

.audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px
}

.audit-stat {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2))
}

.audit-stat-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text)
}

.audit-stat-label {
  margin-top: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 700
}

.audit-feed {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.audit-entry {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2))
}

.audit-entry-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px
}

.audit-entry-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.audit-entry-user {
  font-size: 14px;
  font-weight: 700;
  color: var(--text)
}

.audit-entry-time {
  text-align: right
}

.audit-entry-age {
  font-size: 13px;
  font-weight: 700;
  color: var(--text)
}

.audit-entry-exact {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px
}

.audit-entry-details {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-3);
  font: 12px/1.55 'JetBrains Mono', monospace;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto
}

.audit-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em
}

.audit-pill.info {
  background: var(--c-azure-bg);
  color: var(--c-azure)
}

.audit-pill.success {
  background: rgba(22, 163, 74, .1);
  color: var(--green)
}

.audit-pill.warm {
  background: rgba(217, 119, 6, .12);
  color: var(--orange)
}

.audit-pill.danger {
  background: rgba(220, 38, 38, .1);
  color: var(--red)
}

.servicecat-shell {
  padding-bottom: 32px;
}

.servicecat-page {
  min-height: 160px;
}

#panel-service-catalog-overview .costx-head {
  gap: var(--space-400);
  margin-bottom: var(--space-400);
}

#panel-service-catalog-overview .budgetv2-header-tools {
  gap: var(--space-400);
  margin-top: 0;
}

#serviceCatalogOverviewPage {
  display: grid;
  gap: var(--space-400);
}

#serviceCatalogOverviewPage > * {
  margin: 0;
}

.servicecat-overview-grid,
.servicecat-assign-grid,
.servicecat-rules-grid {
  margin-bottom: 14px;
}

.servicecat-nav-grid,
.servicecat-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.servicecat-quick-actions,
.servicecat-form-actions,
.servicecat-row-actions,
.servicecat-detail-actions,
.servicecat-template-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.servicecat-assign-panel {
  padding: 16px 18px;
}

.servicecat-assign-panel .anl-bt {
  margin-bottom: 4px;
}

.servicecat-assign-panel .anl-bs {
  margin-bottom: 12px;
}

.servicecat-type-grid,
.servicecat-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.servicecat-type-card,
.servicecat-helper-card,
.servicecat-nav-card,
.servicecat-template-card,
.servicecat-detail-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 14px 16px;
}

.servicecat-type-card strong,
.servicecat-helper-card strong,
.servicecat-nav-card strong,
.servicecat-detail-card strong {
  display: block;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 6px;
}

.servicecat-type-card p,
.servicecat-helper-card p,
.servicecat-nav-card p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.servicecat-nav-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, var(--surface-2) 14%) 0%, color-mix(in srgb, var(--surface-2) 88%, var(--surface) 12%) 100%);
  box-shadow: none !important;
}

.servicecat-nav-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.servicecat-nav-card-top span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 46%, transparent 54%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent 22%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.servicecat-nav-card .rfb {
  margin-top: auto;
}

.servicecat-nav-card-assign {
  border-color: color-mix(in srgb, var(--green) 18%, var(--border) 82%);
}

.servicecat-nav-card-rules {
  border-color: color-mix(in srgb, var(--orange) 18%, var(--border) 82%);
}

.servicecat-nav-card-templates {
  border-color: color-mix(in srgb, var(--c-azure) 18%, var(--border) 82%);
}

.servicecat-overview-mini-stat {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-azure);
}

.servicecat-activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.servicecat-activity-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface) 30%);
}

.servicecat-activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-azure);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-azure-bg) 56%, transparent 44%);
}

.servicecat-activity-dot-assignment {
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent 88%);
}

.servicecat-activity-copy {
  min-width: 0;
}

.servicecat-activity-copy strong {
  font-size: 13px;
  color: var(--text);
}

.servicecat-activity-copy span,
.servicecat-activity-item small {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.servicecat-controls {
  align-items: flex-end;
  margin-bottom: 14px;
}

.servicecat-toolbar {
  align-items: flex-end;
  gap: 16px;
}

.servicecat-toolbar strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.servicecat-toolbar-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.servicecat-cell-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.servicecat-cell-main strong {
  font-size: 13px;
  color: var(--text);
}

.servicecat-cell-main span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.servicecat-form-shell {
  margin-bottom: 18px;
}

.servicecat-create-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.servicecat-create-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.servicecat-create-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}

.servicecat-create-subtitle {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 760px;
}

.servicecat-create-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--green) 25%, var(--border) 75%);
  background: color-mix(in srgb, var(--green) 8%, var(--surface) 92%);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
}

.servicecat-subsection {
  margin-top: 10px;
}

.servicecat-subsection-title {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.servicecat-form-section {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--surface-2) 12%) 0%, color-mix(in srgb, var(--surface) 96%, var(--surface-2) 4%) 100%);
  padding: 16px;
}

.servicecat-form-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.servicecat-form-section-index {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c-azure-bg) 78%, var(--surface) 22%);
  color: var(--c-azure);
  font-size: 11px;
  font-weight: 800;
}

.servicecat-form-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.servicecat-form-section-copy {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.servicecat-form-section-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.servicecat-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.servicecat-form-wide {
  grid-column: 1 / -1;
}

.servicecat-textarea {
  min-height: 92px;
  height: auto;
  padding: 10px 12px;
  resize: vertical;
}

.servicecat-readonly {
  background: color-mix(in srgb, var(--surface-2) 92%, var(--surface) 8%);
  color: var(--text-dim);
  cursor: default;
}

.servicecat-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
}

.servicecat-toggle-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 11px 13px;
  font-size: 12px;
  color: var(--text-muted);
}

.servicecat-toggle-card.is-disabled {
  opacity: .72;
}

.servicecat-toggle-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}

.servicecat-toggle-head input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.servicecat-helper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

#panel-service-catalog-overview .servicecat-nav-grid,
#panel-service-catalog-overview .servicecat-overview-grid,
#panel-service-catalog-overview .servicecat-type-grid,
#panel-service-catalog-overview .servicecat-helper-grid {
  gap: var(--space-400);
  margin-bottom: 0;
}

#panel-service-catalog-overview .executivev2-summary-strip,
#panel-service-catalog-overview .executivev2-kpi-row,
#panel-service-catalog-overview .executivev2-summary-card,
#panel-service-catalog-overview .executivev2-kpi-card,
#panel-service-catalog-overview .servicecat-nav-card,
#panel-service-catalog-overview .servicecat-type-card,
#panel-service-catalog-overview .servicecat-helper-card,
#panel-service-catalog-overview .anl-box {
  box-shadow: none !important;
  filter: none !important;
}

#panel-service-catalog-overview .executivev2-summary-card,
#panel-service-catalog-overview .executivev2-kpi-card,
#panel-service-catalog-overview .servicecat-nav-card,
#panel-service-catalog-overview .servicecat-type-card,
#panel-service-catalog-overview .servicecat-helper-card,
#panel-service-catalog-overview .anl-box {
  transition: border-color .18s ease, outline-color .18s ease;
  outline: 1px solid transparent;
  outline-offset: -1px;
}

#panel-service-catalog-overview .executivev2-summary-card:hover,
#panel-service-catalog-overview .executivev2-summary-card:focus-within,
#panel-service-catalog-overview .executivev2-kpi-card:hover,
#panel-service-catalog-overview .executivev2-kpi-card:focus-within,
#panel-service-catalog-overview .servicecat-nav-card:hover,
#panel-service-catalog-overview .servicecat-nav-card:focus-within,
#panel-service-catalog-overview .servicecat-type-card:hover,
#panel-service-catalog-overview .servicecat-type-card:focus-within,
#panel-service-catalog-overview .servicecat-helper-card:hover,
#panel-service-catalog-overview .servicecat-helper-card:focus-within,
#panel-service-catalog-overview .anl-box:hover,
#panel-service-catalog-overview .anl-box:focus-within {
  border-color: var(--card-hover-accent);
  outline-color: var(--card-hover-accent);
  box-shadow: none !important;
}

.servicecat-inline-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.servicecat-segmented-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.servicecat-segmented-group.is-disabled {
  opacity: .68;
}

.servicecat-segmented-btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
  background: color-mix(in srgb, var(--surface-2) 82%, var(--surface) 18%);
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.servicecat-segmented-btn:hover {
  border-color: color-mix(in srgb, var(--c-azure) 28%, var(--border) 72%);
  color: var(--text);
}

.servicecat-segmented-btn.is-active {
  border-color: color-mix(in srgb, var(--c-azure) 42%, var(--border) 58%);
  background: color-mix(in srgb, var(--c-azure-bg) 78%, var(--surface) 22%);
  color: var(--c-azure);
}

.servicecat-inline-toggle-row,
.servicecat-inline-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.servicecat-inline-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 62%, var(--surface) 38%);
}

.servicecat-inline-toggle.is-disabled {
  opacity: .7;
}

.servicecat-inline-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.servicecat-inline-toggle-copy strong {
  font-size: 12px;
  color: var(--text);
}

.servicecat-inline-toggle-copy small {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.servicecat-inline-toggle-switch {
  position: relative;
  width: 40px;
  height: 24px;
  flex-shrink: 0;
}

.servicecat-inline-toggle-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.servicecat-inline-toggle-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-3) 78%, var(--border) 22%);
  transition: background .16s ease;
}

.servicecat-inline-toggle-switch span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
  transition: transform .16s ease;
}

.servicecat-inline-toggle-switch input:checked + span {
  background: color-mix(in srgb, var(--green) 58%, var(--surface) 42%);
}

.servicecat-inline-toggle-switch input:checked + span::after {
  transform: translateX(16px);
}

.servicecat-picker-list,
.servicecat-assignment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.servicecat-picker-row,
.servicecat-assignment-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 9px 11px;
}

.servicecat-assignment-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}

.servicecat-assignment-item.active {
  border-color: rgba(22, 163, 74, .45);
  background: color-mix(in srgb, var(--green) 8%, var(--surface) 92%);
}

.servicecat-assignment-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.servicecat-picker-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.servicecat-picker-main input[type="checkbox"] {
  margin-top: 0;
}

.servicecat-picker-main span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.servicecat-picker-main strong {
  font-size: 13px;
  color: var(--text);
  line-height: 1.2;
}

.servicecat-picker-main small,
.servicecat-assignment-item span,
.servicecat-assignment-item small {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

.servicecat-weight-field {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  min-width: 92px;
  margin-left: auto;
}

.servicecat-weight-field small {
  font-size: 11px;
  color: var(--text-muted);
}

.servicecat-target-toolbar {
  align-items: flex-end;
  margin: 0 0 8px;
}

.servicecat-form-dropdown {
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 56%, var(--surface) 44%);
}

.servicecat-form-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}

.servicecat-form-dropdown-head strong {
  font-size: 12px;
  color: var(--text);
}

.servicecat-form-dropdown-head span {
  font-size: 11px;
  color: var(--text-muted);
}

.servicecat-form-dropdown-body {
  padding: 0 8px 8px;
}

.servicecat-tag-value-list {
  max-height: 240px;
}

.servicecat-split-table,
.servicecat-expanded-assignments {
  margin-top: 12px;
}

.servicecat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.servicecat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--surface-2) 18%) 0%, color-mix(in srgb, var(--surface) 94%, var(--surface-2) 6%) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.servicecat-card:hover {
  border-color: color-mix(in srgb, var(--c-azure) 42%, var(--border) 58%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}

.servicecat-card.is-expanded {
  border-color: color-mix(in srgb, var(--c-azure) 56%, var(--border) 44%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-azure) 12%, transparent 88%), 0 16px 32px rgba(15, 23, 42, .08);
}

.servicecat-card.is-inactive {
  opacity: .78;
}

.servicecat-card-top,
.servicecat-card-badges,
.servicecat-card-actions,
.servicecat-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.servicecat-card-chevron {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  transition: color .18s ease;
}

.servicecat-card:hover .servicecat-card-chevron,
.servicecat-card.is-expanded .servicecat-card-chevron {
  color: var(--c-azure);
}

.servicecat-card-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
}

.servicecat-card-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  min-height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.servicecat-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
}

.servicecat-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.servicecat-stat-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.servicecat-stat span:not(.servicecat-stat-label) {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-dim);
  font-weight: 600;
}

.servicecat-stat-highlight {
  color: var(--c-azure) !important;
}

.servicecat-card-meta {
  gap: 6px;
}

.servicecat-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent 22%);
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent 24%);
  font-size: 11px;
  color: var(--text-dim);
}

.servicecat-card-actions {
  margin-top: auto;
}

.servicecat-card-action {
  min-width: 0;
}

.servicecat-card-action-primary {
  color: var(--c-azure);
  border-color: color-mix(in srgb, var(--c-azure) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--c-azure-bg) 72%, var(--surface) 28%);
}

.servicecat-card-action-primary:hover {
  border-color: var(--c-azure);
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure-bg) 84%, var(--surface) 16%);
}

.servicecat-card-action-assign {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 24%, var(--border) 76%);
  background: color-mix(in srgb, var(--green) 8%, var(--surface) 92%);
}

.servicecat-card-action-assign:hover {
  border-color: var(--green);
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, var(--surface) 88%);
}

.servicecat-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}

.servicecat-type-badge-fixed {
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure-bg) 85%, var(--surface) 15%);
}

.servicecat-type-badge-target {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, var(--surface) 90%);
}

.servicecat-type-badge-shared {
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 12%, var(--surface) 88%);
}

.servicecat-type-badge-resource {
  color: var(--c-security);
  background: color-mix(in srgb, var(--c-security-bg) 72%, var(--surface) 28%);
}

.servicecat-card-expansion {
  grid-column: 1 / -1;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
  border-radius: 16px;
  padding: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, var(--surface) 8%) 0%, color-mix(in srgb, var(--surface) 70%, var(--surface-2) 30%) 100%);
}

.servicecat-expanded-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.expanded-assignments-title {
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.servicecat-link-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.servicecat-summary-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 64%, var(--surface) 36%);
}

.servicecat-summary-card strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.servicecat-summary-card span {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  color: var(--text);
}

.servicecat-summary-card small {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
}

.servicecat-assign-panel-customers .servicecat-picker-search {
  margin-bottom: 8px;
}

.servicecat-assign-panel-customers .servicecat-picker-search label {
  margin-bottom: 1px;
}

.servicecat-picker-list-customers {
  gap: 6px;
  max-height: 344px;
  padding: 2px 6px 2px 0;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border) 70%, var(--surface-3) 30%) transparent;
}

.servicecat-picker-list-customers::-webkit-scrollbar {
  width: 10px;
}

.servicecat-picker-list-customers::-webkit-scrollbar-track {
  background: transparent;
}

.servicecat-picker-list-customers::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 74%, var(--surface-3) 26%);
  background-clip: padding-box;
}

.servicecat-picker-list-customers::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-muted) 28%, var(--border) 72%);
  background-clip: padding-box;
}

.servicecat-assign-panel-customers .servicecat-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 7px 10px;
}

.servicecat-assign-panel-customers .servicecat-weight-field .authi {
  min-height: 34px;
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}

.servicecat-assign-info-panel {
  padding-top: 14px;
  padding-bottom: 14px;
}

.servicecat-assign-info-panel .anl-bs {
  margin-bottom: 8px;
}

.servicecat-assign-info-panel-empty .anl-bs {
  margin-bottom: 0;
}

.servicecat-compact-advisory {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 0;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--border) 84%, transparent 16%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 56%, var(--surface) 44%);
  line-height: 1.4;
}

.servicecat-assign-panel-preview .anl-bs {
  margin-bottom: 10px;
}

.servicecat-assign-panel-preview .servicecat-preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 0;
}

.servicecat-preview-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.servicecat-assign-panel-preview .servicecat-form-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
}

.servicecat-assign-panel-preview .servicecat-form-actions .rfb {
  min-height: 36px;
}

.servicecat-assign-panel .costx-field {
  gap: 4px;
}

.servicecat-assign-panel .costx-controls {
  margin-top: 10px;
}

.servicecat-create-tail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.servicecat-create-tail-item {
  min-width: 0;
}

.servicecat-rule-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.servicecat-rule-summary div {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 12px 14px;
}

.servicecat-rule-summary strong {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.servicecat-rule-summary span {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}

.servicecat-target-chip-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.servicecat-template-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.servicecat-template-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.servicecat-template-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.servicecat-template-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text);
}

.servicecat-template-desc {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.servicecat-template-availability {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.servicecat-template-rows {
  display: grid;
  gap: 8px;
}

.servicecat-template-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
}

.servicecat-template-row:first-child {
  padding-top: 2px;
  border-top: 0;
}

.servicecat-template-row strong {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.servicecat-template-row span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

.servicecat-template-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent 24%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent 22%);
  font-size: 11px;
  color: var(--text-dim);
}

.servicecat-template-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
}

.servicecat-template-foot-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.servicecat-template-foot-copy strong {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.servicecat-template-foot-copy span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

.servicecat-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.servicecat-template-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 84%, var(--surface-2) 16%) 0%, color-mix(in srgb, var(--surface-2) 92%, var(--surface) 8%) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.servicecat-template-card:hover {
  border-color: color-mix(in srgb, var(--c-azure) 42%, var(--border) 58%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}

.servicecat-template-card.is-preview {
  border-color: color-mix(in srgb, var(--c-azure) 40%, var(--border) 60%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-azure) 12%, transparent 88%), 0 16px 28px rgba(15, 23, 42, .07);
}

.servicecat-template-actions {
  justify-content: flex-end;
}

.servicecat-template-actions .rfb {
  min-width: 0;
}

.servicecat-template-preview-panel {
  margin-bottom: 16px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 18%, var(--border) 82%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, var(--c-azure-bg) 28%) 0%, color-mix(in srgb, var(--surface-2) 90%, var(--surface) 10%) 100%);
  box-shadow: 0 18px 34px rgba(15, 23, 42, .06);
}

.servicecat-template-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.servicecat-template-preview-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.servicecat-template-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.servicecat-template-preview-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.servicecat-template-preview-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.servicecat-template-preview-column strong {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-azure);
}

.servicecat-template-preview-column p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.servicecat-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.servicecat-detail-card span {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}

.badge-warning {
  background: color-mix(in srgb, var(--orange) 12%, var(--surface) 88%);
  color: var(--orange);
}

.objectcat-shell {
  padding-bottom: 32px;
}

.objectcat-page {
  min-height: 160px;
}

.objectcat-summary-strip,
.objectcat-kpi-row,
.objectcat-overview-grid {
  margin-bottom: 18px;
}

#panel-object-catalog-types .objectcat-types-summary-strip {
  margin-bottom: 18px;
}

.objectcat-header-tools {
  align-items: flex-end;
}

.objectcat-hero-grid,
.objectcat-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .9fr);
  gap: 14px;
  margin-bottom: 14px;
}

.objectcat-intro-panel,
.objectcat-note-panel,
.objectcat-table-panel,
.objectcat-detail-panel {
  min-width: 0;
}

.objectcat-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.objectcat-nav-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 170px;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--surface-2) 18%) 0%, color-mix(in srgb, var(--surface) 96%, var(--surface-2) 4%) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.objectcat-nav-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

.objectcat-nav-card .rfb {
  margin-top: auto;
}

.objectcat-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.objectcat-nav-top strong {
  font-size: 13px;
  color: var(--text);
}

.objectcat-nav-top span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 44%, transparent 56%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent 22%);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-dim);
}

.objectcat-nav-card.tone-mapping {
  border-color: color-mix(in srgb, var(--c-azure) 18%, var(--border) 82%);
}

.objectcat-nav-card.tone-types {
  border-color: color-mix(in srgb, var(--green) 18%, var(--border) 82%);
}

.objectcat-nav-card.tone-instances {
  border-color: color-mix(in srgb, var(--orange) 18%, var(--border) 82%);
}

.objectcat-nav-card.tone-rules {
  border-color: color-mix(in srgb, var(--c-security) 18%, var(--border) 82%);
}

#panel-object-catalog-overview .executivev2-summary-strip,
#panel-object-catalog-overview .executivev2-kpi-row,
#panel-object-catalog-overview .executivev2-summary-card,
#panel-object-catalog-overview .executivev2-kpi-card,
#panel-object-catalog-overview .objectcat-nav-card,
#panel-object-catalog-overview .anl-box,
#panel-object-catalog-overview .objectcat-activity-item,
#panel-object-catalog-overview .objectcat-review-item {
  box-shadow: none !important;
  filter: none !important;
}

#panel-object-catalog-overview .executivev2-kpi-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#panel-object-catalog-overview .objectcat-nav-card,
#panel-object-catalog-overview .anl-box,
#panel-object-catalog-overview .objectcat-activity-item,
#panel-object-catalog-overview .objectcat-review-item {
  transition: border-color .18s ease, outline-color .18s ease;
  outline: 1px solid transparent;
  outline-offset: -1px;
}

#panel-object-catalog-overview .objectcat-intro-panel .objectcat-nav-card:hover,
#panel-object-catalog-overview .objectcat-intro-panel .objectcat-nav-card:focus-within {
  border-color: var(--green);
  outline-color: var(--green);
  box-shadow: none !important;
}

#panel-object-catalog-instances .executivev2-summary-strip,
#panel-object-catalog-instances .executivev2-summary-card {
  box-shadow: none !important;
  filter: none !important;
}

#panel-object-catalog-instances .executivev2-summary-strip {
  margin-bottom: 18px;
}

#panel-object-catalog-rules .executivev2-summary-strip,
#panel-object-catalog-rules .executivev2-summary-card {
  box-shadow: none !important;
  filter: none !important;
}

#panel-object-catalog-rules .executivev2-summary-strip {
  margin-bottom: 18px;
}

.objectcat-activity-list,
.objectcat-review-list,
.objectcat-instance-list,
.objectcat-rule-list,
.objectcat-note-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.objectcat-activity-item,
.objectcat-review-item,
.objectcat-instance-item,
.objectcat-rule-card,
.objectcat-note-item {
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 62%, var(--surface) 38%);
}

.objectcat-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.objectcat-activity-item.tone-good {
  border-left: 3px solid var(--green);
}

.objectcat-activity-item.tone-warn {
  border-left: 3px solid var(--orange);
}

.objectcat-activity-copy strong,
.objectcat-review-item strong,
.objectcat-instance-item strong,
.objectcat-rule-card strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.objectcat-activity-copy span,
.objectcat-review-item span,
.objectcat-instance-item span,
.objectcat-rule-sub,
.objectcat-activity-item small,
.objectcat-review-item small {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.objectcat-review-item,
.objectcat-instance-item,
.objectcat-rule-card,
.objectcat-type-card,
.objectcat-link-btn {
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.objectcat-review-item {
  padding: 12px 14px;
}

.objectcat-review-item:hover,
.objectcat-instance-item:hover,
.objectcat-rule-card:hover,
.objectcat-type-card:hover,
.objectcat-link-btn:hover {
  border-color: color-mix(in srgb, var(--c-azure) 34%, var(--border) 66%);
}

.objectcat-toolbar {
  gap: 16px;
  align-items: flex-end;
}

.objectcat-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.objectcat-detail-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

.objectcat-detail-sub {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.objectcat-metric-grid,
.objectcat-rule-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.objectcat-metric-card {
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 64%, var(--surface) 36%);
}

.objectcat-metric-card strong,
.objectcat-inline-metric strong {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.objectcat-metric-card span,
.objectcat-inline-metric span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

.objectcat-detail-section {
  margin-bottom: 14px;
}

.objectcat-detail-section strong {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.objectcat-detail-section p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.objectcat-table-wrap table tbody tr.objectcat-row-active {
  background: color-mix(in srgb, var(--c-azure-bg) 62%, var(--surface) 38%);
}

.objectcat-link-btn {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-azure);
}

.objectcat-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.objectcat-type-card {
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--surface-2) 18%) 0%, color-mix(in srgb, var(--surface) 96%, var(--surface-2) 4%) 100%);
  padding: 16px;
}

.objectcat-type-card.is-active,
.objectcat-instance-item.is-active,
.objectcat-rule-card.is-active {
  border-color: color-mix(in srgb, var(--c-azure) 44%, var(--border) 56%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-azure) 12%, transparent 88%), 0 14px 28px rgba(15, 23, 42, .06);
}

.objectcat-type-top,
.objectcat-instance-top,
.objectcat-rule-top,
.objectcat-instance-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.objectcat-instance-item {
  padding: 14px 15px;
}

#panel-object-catalog-instances .objectcat-instance-title {
  min-width: 0;
  flex: 1 1 auto;
}

#panel-object-catalog-instances .objectcat-instance-top {
  align-items: flex-start;
}

#panel-object-catalog-instances .objectcat-instance-meta {
  flex-wrap: nowrap;
  align-items: center;
}

#panel-object-catalog-instances .objectcat-instance-source {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

#panel-object-catalog-instances .objectcat-instance-badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  flex-wrap: wrap;
}

#panel-object-catalog-instances .objectcat-instance-meta-badge,
#panel-object-catalog-instances .objectcat-instance-status-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent 22%);
  background: color-mix(in srgb, var(--surface-2) 78%, var(--surface) 22%);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-dim);
  white-space: nowrap;
}

#panel-object-catalog-instances .objectcat-resource-badge {
  color: var(--text-dim);
}

#panel-object-catalog-instances .objectcat-confidence-badge.is-high {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 11%, var(--surface) 89%);
  border-color: color-mix(in srgb, var(--green) 22%, var(--border) 78%);
}

#panel-object-catalog-instances .objectcat-confidence-badge.is-medium {
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 12%, var(--surface) 88%);
  border-color: color-mix(in srgb, var(--orange) 22%, var(--border) 78%);
}

#panel-object-catalog-instances .objectcat-confidence-badge.is-low {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--surface) 90%);
  border-color: color-mix(in srgb, var(--red) 22%, var(--border) 78%);
}

#panel-object-catalog-instances .objectcat-instance-status-badge.is-confirmed {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 11%, var(--surface) 89%);
  border-color: color-mix(in srgb, var(--green) 22%, var(--border) 78%);
}

#panel-object-catalog-instances .objectcat-instance-status-badge.is-review {
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 12%, var(--surface) 88%);
  border-color: color-mix(in srgb, var(--orange) 22%, var(--border) 78%);
}

#panel-object-catalog-instances .objectcat-instance-status-badge.is-overridden {
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure-bg) 76%, var(--surface) 24%);
  border-color: color-mix(in srgb, var(--c-azure) 20%, var(--border) 80%);
}

@media (max-width: 860px) {
  #panel-object-catalog-instances .objectcat-instance-meta {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #panel-object-catalog-instances .objectcat-instance-badges {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

.objectcat-instance-scope {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.objectcat-rule-card {
  padding: 14px 15px;
}

.objectcat-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

#panel-object-catalog-rules .objectcat-rule-top {
  align-items: flex-start;
}

#panel-object-catalog-rules .objectcat-rule-top strong,
#panel-object-catalog-rules .objectcat-rule-sub,
#panel-object-catalog-rules .objectcat-detail-title,
#panel-object-catalog-rules .objectcat-detail-sub,
#panel-object-catalog-rules .objectcat-metric-card span,
#panel-object-catalog-rules .objectcat-inline-metric span,
#panel-object-catalog-rules .objectcat-detail-section p {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#panel-object-catalog-rules .objectcat-rule-top .badge,
#panel-object-catalog-rules .objectcat-detail-head .badge {
  flex: 0 0 auto;
}

#panel-object-catalog-rules .objectcat-rule-grid {
  align-items: stretch;
}

#panel-object-catalog-rules .objectcat-rule-meta-field,
#panel-object-catalog-rules .objectcat-rule-meta-card {
  position: relative;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface) 28%);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
}

#panel-object-catalog-rules .objectcat-rule-meta-field::before,
#panel-object-catalog-rules .objectcat-rule-meta-card::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-azure) 52%, var(--border) 48%);
}

#panel-object-catalog-rules .objectcat-rule-meta-card::before {
  inset: 12px auto 12px 0;
}

#panel-object-catalog-rules .objectcat-rule-meta-field strong,
#panel-object-catalog-rules .objectcat-rule-meta-field span,
#panel-object-catalog-rules .objectcat-rule-meta-card strong,
#panel-object-catalog-rules .objectcat-rule-meta-card span {
  padding-left: 10px;
}

#panel-object-catalog-rules .objectcat-rule-confidence-inline span,
#panel-object-catalog-rules .objectcat-rule-confidence-metric span {
  font-weight: 700;
}

#panel-object-catalog-rules .objectcat-rule-confidence.is-high span {
  color: var(--green);
}

#panel-object-catalog-rules .objectcat-rule-confidence.is-medium span {
  color: var(--orange);
}

#panel-object-catalog-rules .objectcat-rule-confidence.is-low span {
  color: var(--red);
}

#panel-object-catalog-rules .objectcat-rule-confidence-inline.is-high,
#panel-object-catalog-rules .objectcat-rule-confidence-metric.is-high {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border) 78%);
  background: color-mix(in srgb, var(--green) 10%, var(--surface) 90%);
}

#panel-object-catalog-rules .objectcat-rule-confidence-inline.is-medium,
#panel-object-catalog-rules .objectcat-rule-confidence-metric.is-medium {
  border-color: color-mix(in srgb, var(--orange) 24%, var(--border) 76%);
  background: color-mix(in srgb, var(--orange) 11%, var(--surface) 89%);
}

#panel-object-catalog-rules .objectcat-rule-confidence-inline.is-low,
#panel-object-catalog-rules .objectcat-rule-confidence-metric.is-low {
  border-color: color-mix(in srgb, var(--red) 22%, var(--border) 78%);
  background: color-mix(in srgb, var(--red) 10%, var(--surface) 90%);
}

#panel-object-catalog-rules .objectcat-detail-panel {
  overflow: hidden;
}

#panel-object-catalog-rules .objectcat-detail-head,
#panel-object-catalog-rules .objectcat-rule-detail-grid,
#panel-object-catalog-rules .objectcat-metric-grid,
#panel-object-catalog-rules .objectcat-detail-section,
#panel-object-catalog-rules .servicecat-target-chip-wrap {
  min-width: 0;
}

#panel-object-catalog-rules .objectcat-rule-detail-grid {
  align-items: stretch;
}

#panel-object-catalog-rules .objectcat-metric-card,
#panel-object-catalog-rules .objectcat-inline-metric {
  min-width: 0;
}

.objectcat-inline-metric {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 48%, transparent 52%);
}

#panel-object-catalog-types .objectcat-type-card,
#panel-object-catalog-types .objectcat-type-card:hover,
#panel-object-catalog-types .objectcat-type-card:focus-visible {
  box-shadow: none;
}

#panel-object-catalog-types .objectcat-type-card:hover,
#panel-object-catalog-types .objectcat-type-card:focus-visible {
  border-color: var(--green);
  outline: none;
}

#panel-object-catalog-types .objectcat-type-top {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

#panel-object-catalog-types .objectcat-type-category-badge {
  margin: 0;
}

#panel-object-catalog-types .objectcat-type-top + .servicecat-card-name {
  margin-top: 0;
}

#panel-object-catalog-types .objectcat-type-category-badge[data-objectcat-category="identity"] {
  color: var(--c-entra);
  border-color: color-mix(in srgb, var(--c-entra) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--c-entra-bg) 72%, var(--surface) 28%);
}

#panel-object-catalog-types .objectcat-type-category-badge[data-objectcat-category="connectivity"] {
  color: var(--c-intune);
  border-color: color-mix(in srgb, var(--c-intune) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--c-intune-bg) 72%, var(--surface) 28%);
}

#panel-object-catalog-types .objectcat-type-category-badge[data-objectcat-category="compute"] {
  color: var(--c-azure);
  border-color: color-mix(in srgb, var(--c-azure) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--c-azure-bg) 72%, var(--surface) 28%);
}

#panel-object-catalog-types .objectcat-type-category-badge[data-objectcat-category="data platform"] {
  color: var(--c-partner);
  border-color: color-mix(in srgb, var(--c-partner) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--c-partner-bg) 72%, var(--surface) 28%);
}

#panel-object-catalog-types .objectcat-type-category-badge[data-objectcat-category="security platform"] {
  color: var(--c-security);
  border-color: color-mix(in srgb, var(--c-security) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--c-security-bg) 72%, var(--surface) 28%);
}

#panel-object-catalog-types .objectcat-type-category-badge[data-objectcat-category="network security"] {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 24%, var(--border) 76%);
  background: color-mix(in srgb, var(--red) 10%, var(--surface) 90%);
}

#panel-object-catalog-types .objectcat-type-category-badge[data-objectcat-category="storage"] {
  color: var(--c-winserver);
  border-color: color-mix(in srgb, var(--c-winserver) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--c-winserver-bg) 72%, var(--surface) 28%);
}

.objectcat-note-item {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-dim);
}

#panel-object-catalog-mappings .objectcat-mapping-grid {
  grid-template-columns: minmax(0, 1.32fr) minmax(360px, .88fr);
  align-items: start;
}

#panel-object-catalog-mappings .objectcat-mapping-list-panel,
#panel-object-catalog-mappings .objectcat-mapping-detail-panel {
  border-radius: 18px;
}

#panel-object-catalog-mappings .objectcat-mapping-list-panel {
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, var(--surface-2) 14%) 0%, color-mix(in srgb, var(--surface) 98%, var(--surface-2) 2%) 100%);
}

#panel-object-catalog-mappings .objectcat-mapping-toolbar {
  padding: 18px 20px 14px;
  margin-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  background: color-mix(in srgb, var(--surface) 72%, var(--surface-2) 28%);
}

#panel-object-catalog-mappings .objectcat-mapping-toolbar strong {
  font-size: 14px;
  letter-spacing: -.01em;
}

#panel-object-catalog-mappings .objectcat-mapping-toolbar .servicecat-toolbar-sub {
  max-width: 680px;
}

#panel-object-catalog-mappings .objectcat-mapping-table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#panel-object-catalog-mappings .objectcat-mapping-table-wrap table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

#panel-object-catalog-mappings .objectcat-mapping-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--surface) 76%, var(--surface-2) 24%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#panel-object-catalog-mappings .objectcat-mapping-table-wrap tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  background: transparent;
}

#panel-object-catalog-mappings .objectcat-mapping-table-wrap tbody tr {
  transition: background .18s ease, box-shadow .18s ease;
}

#panel-object-catalog-mappings .objectcat-mapping-table-wrap tbody tr:hover {
  background: color-mix(in srgb, var(--c-azure-bg) 26%, var(--surface) 74%);
}

#panel-object-catalog-mappings .objectcat-mapping-table-wrap tbody tr.objectcat-row-active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-azure-bg) 72%, var(--surface) 28%) 0%, color-mix(in srgb, var(--c-azure-bg) 38%, var(--surface) 62%) 100%);
  box-shadow: inset 3px 0 0 var(--c-azure);
}

#panel-object-catalog-mappings .objectcat-mapping-table-wrap tbody tr.objectcat-row-active td {
  background: transparent;
}

#panel-object-catalog-mappings .objectcat-col-type {
  width: 31%;
}

#panel-object-catalog-mappings .objectcat-col-ledger {
  width: 24%;
}

#panel-object-catalog-mappings .objectcat-col-category {
  width: 14%;
}

#panel-object-catalog-mappings .objectcat-col-status {
  width: 16%;
}

#panel-object-catalog-mappings .objectcat-col-plural {
  width: 13%;
}

#panel-object-catalog-mappings .objectcat-col-action {
  width: 88px;
}

#panel-object-catalog-mappings .objectcat-mapping-type-link {
  display: inline-flex;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
}

#panel-object-catalog-mappings .objectcat-mapping-type-text {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

#panel-object-catalog-mappings .servicecat-cell-main {
  gap: 3px;
}

#panel-object-catalog-mappings .servicecat-cell-main strong {
  font-size: 12.5px;
}

#panel-object-catalog-mappings .objectcat-mapping-category,
#panel-object-catalog-mappings .objectcat-mapping-plural {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

#panel-object-catalog-mappings .objectcat-mapping-detail-panel {
  position: sticky;
  top: 18px;
  padding: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 86%, var(--surface) 14%) 0%, color-mix(in srgb, var(--surface) 94%, var(--surface-2) 6%) 100%);
}

#panel-object-catalog-mappings .objectcat-mapping-detail-shell {
  display: grid;
  gap: 14px;
}

#panel-object-catalog-mappings .objectcat-mapping-detail-head {
  margin-bottom: 0;
}

#panel-object-catalog-mappings .objectcat-mapping-hero,
#panel-object-catalog-mappings .objectcat-mapping-detail-card {
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, var(--surface-2) 22%);
}

#panel-object-catalog-mappings .objectcat-mapping-hero {
  display: grid;
  gap: 10px;
}

#panel-object-catalog-mappings .objectcat-mapping-hero-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#panel-object-catalog-mappings .objectcat-mapping-hero-body {
  display: grid;
  gap: 5px;
}

#panel-object-catalog-mappings .objectcat-mapping-hero-title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--text);
}

#panel-object-catalog-mappings .objectcat-mapping-hero-copy {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
}

#panel-object-catalog-mappings .objectcat-mapping-metric-grid {
  margin-bottom: 0;
}

#panel-object-catalog-mappings .objectcat-mapping-detail-card {
  margin-bottom: 0;
}

#panel-object-catalog-mappings .objectcat-mapping-detail-card p {
  color: var(--text-dim);
}

#panel-object-catalog-mappings .objectcat-mapping-actions {
  margin-top: 2px;
  padding-top: 2px;
}

@media (max-width: 1180px) {
  .objectcat-hero-grid,
  .objectcat-split-grid {
    grid-template-columns: 1fr;
  }

  #panel-object-catalog-mappings .objectcat-mapping-detail-panel {
    position: static;
    top: auto;
  }
}

@media (max-width: 980px) {
  .servicecat-form-grid,
  .servicecat-rule-summary,
  .servicecat-detail-grid,
  .servicecat-expanded-grid,
  .servicecat-inline-toggle-row,
  .servicecat-inline-toggle-grid,
  .servicecat-link-summary-grid,
  .servicecat-create-tail-grid,
  .servicecat-template-preview-body {
    grid-template-columns: 1fr;
  }

  .servicecat-card-grid {
    grid-template-columns: 1fr;
  }

  .servicecat-card-stats {
    grid-template-columns: 1fr 1fr;
  }

  .servicecat-controls,
  .servicecat-target-toolbar,
  .servicecat-header-tools {
    align-items: stretch;
  }

  .objectcat-metric-grid,
  .objectcat-rule-detail-grid,
  .objectcat-rule-grid {
    grid-template-columns: 1fr;
  }

  #panel-object-catalog-overview .executivev2-kpi-row {
    grid-template-columns: 1fr 1fr;
  }

  #panel-object-catalog-mappings .executivev2-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #panel-object-catalog-mappings .objectcat-mapping-table-wrap table,
  #panel-object-catalog-mappings .objectcat-mapping-table-wrap thead,
  #panel-object-catalog-mappings .objectcat-mapping-table-wrap tbody,
  #panel-object-catalog-mappings .objectcat-mapping-table-wrap tr,
  #panel-object-catalog-mappings .objectcat-mapping-table-wrap th,
  #panel-object-catalog-mappings .objectcat-mapping-table-wrap td {
    display: block;
  }

  #panel-object-catalog-mappings .objectcat-mapping-table-wrap thead {
    display: none;
  }

  #panel-object-catalog-mappings .objectcat-mapping-table-wrap tbody {
    padding: 12px;
    display: grid;
    gap: 12px;
  }

  #panel-object-catalog-mappings .objectcat-mapping-table-wrap tbody tr {
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 92%, var(--surface-2) 8%);
  }

  #panel-object-catalog-mappings .objectcat-mapping-table-wrap tbody td {
    border-bottom: 0;
    padding: 8px 14px;
  }

  #panel-object-catalog-mappings .objectcat-mapping-table-wrap tbody td:last-child {
    padding-top: 12px;
    padding-bottom: 14px;
  }
}

@media (max-width: 640px) {
  #panel-object-catalog-overview .executivev2-kpi-row {
    grid-template-columns: 1fr;
  }

  #panel-object-catalog-mappings .executivev2-kpi-row {
    grid-template-columns: 1fr;
  }

  .servicecat-card-stats {
    grid-template-columns: 1fr;
  }

  .servicecat-card-actions .rfb {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }

  .servicecat-create-intro {
    flex-direction: column;
  }

  .servicecat-template-grid {
    grid-template-columns: 1fr;
  }

  .servicecat-template-head,
  .servicecat-template-foot,
  .servicecat-template-preview-head {
    flex-direction: column;
    align-items: stretch;
  }

  .servicecat-template-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .servicecat-template-actions {
    justify-content: stretch;
  }

  .servicecat-template-actions .rfb {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
}

.audit-empty {
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center
}

.conn-test-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.conn-test-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2))
}

.conn-test-card.ok {
  border-color: rgba(22, 163, 74, .22)
}

.conn-test-card.fail {
  border-color: rgba(220, 38, 38, .22)
}

.conn-test-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px
}

.conn-test-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text)
}

.conn-test-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px
}

.conn-test-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em
}

.conn-test-status.ok {
  background: rgba(22, 163, 74, .1);
  color: var(--green)
}

.conn-test-status.fail {
  background: rgba(220, 38, 38, .1);
  color: var(--red)
}

.conn-test-section {
  margin-top: 4px
}

.conn-test-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 8px
}

.conn-test-subs {
  margin: 0;
  padding-left: 18px
}

.conn-test-subs li {
  margin-bottom: 8px
}

.conn-test-subs code {
  font-size: 11px
}

.conn-test-error {
  border: 1px solid rgba(220, 38, 38, .18);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(220, 38, 38, .05);
  color: var(--red);
  font-size: 12px;
  line-height: 1.5
}

.env-select-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end
}

.env-chip-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface-2)
}

.env-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .15s
}

.env-chip:hover {
  border-color: rgba(22, 163, 74, .45);
  color: var(--green);
  background: #F7FAF6
}

.env-chip input {
  margin: 0
}

.env-chip input:checked+span {
  color: var(--green)
}

.cust-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px
}

.cust-detail-stat {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 14px 18px;
  background: var(--surface);
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  overflow: hidden
}

.cust-detail-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--c-azure)
}

.cust-detail-stat:nth-child(2)::before {
  background: var(--c-entra)
}

.cust-detail-stat:nth-child(3)::before {
  background: var(--c-partner)
}

.cust-detail-stat:nth-child(4)::before {
  background: var(--c-security)
}

.cust-detail-stat:nth-child(5)::before {
  background: var(--c-m365)
}

.cust-detail-stat:nth-child(6)::before {
  background: var(--c-intune)
}

.cust-detail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 6px
}

.cust-detail-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2
}

.cust-detail-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px
}

.cust-detail-section {
  margin-top: 18px
}

.cust-detail-hdr {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.cust-detail-tenant {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 16px 16px 20px;
  background: var(--surface);
  margin-bottom: 12px;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  overflow: hidden
}

.cust-detail-tenant::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--c-security)
}

.cust-detail-tenant-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px
}

.cust-detail-tenant-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text)
}

.cust-detail-tenant-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px
}

.cust-detail-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.cust-detail-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface)
}

.cust-detail-badge.env {
  color: var(--c-azure);
  background: var(--c-azure-bg);
  border-color: rgba(0, 120, 212, .18)
}

.cust-detail-badge.success {
  color: var(--green);
  background: rgba(22, 163, 74, .1);
  border-color: rgba(22, 163, 74, .2)
}

.cust-detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.cust-detail-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px 12px 16px;
  background: var(--surface);
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  overflow: hidden
}

.cust-detail-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--c-azure)
}

.cust-detail-cols .cust-detail-card:nth-child(2)::before {
  background: var(--c-entra)
}

.cust-detail-cols .cust-detail-card:nth-child(3)::before {
  background: var(--c-partner)
}

.cust-detail-cols .cust-detail-card:nth-child(4)::before {
  background: var(--c-intune)
}

.cust-detail-card ul {
  margin: 8px 0 0 18px
}

.cust-detail-card li {
  margin-bottom: 6px
}

.cust-detail-card code {
  font-size: 11px
}

.cust-detail-empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text-muted);
  box-shadow: none !important
}

/* ==========================================================================
   PHASE 4 SECTION: Tables
   ========================================================================== */
.tw {
  overflow: hidden;
  background: var(--surface)
}

table {
  width: 100%;
  border-collapse: collapse
}

thead th {
  text-align: left;
  padding: 9px 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
  cursor: pointer;
  user-select: none
}

thead th:hover {
  color: var(--text-dim)
}

thead th .sa {
  margin-left: 4px;
  opacity: .4
}

thead th.sorted .sa {
  opacity: 1;
  color: var(--c-azure)
}

tbody tr {
  border-bottom: 1px solid var(--surface-3);
  transition: background .15s
}

tbody tr:last-child {
  border-bottom: none
}

tbody tr:hover {
  background: var(--surface-2)
}

tbody tr.ck {
  cursor: pointer
}

td {
  padding: 10px 16px;
  font-size: 13px;
  vertical-align: middle
}

/* ==========================================================================
   PHASE 4 SECTION: Responsive Tables
   ========================================================================== */
@media (max-width:768px) {
  .tw table.responsive-mobile,
  .tw table.responsive-mobile tbody,
  .tw table.responsive-mobile tr,
  .tw table.responsive-mobile td {
    display: block;
    width: 100%;
  }

  .tw table.responsive-mobile thead {
    display: none;
  }

  .tw table.responsive-mobile tbody tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    margin-bottom: 10px;
    padding: 8px 10px;
  }

  .tw table.responsive-mobile tbody tr:hover {
    background: var(--surface);
  }

  .tw table.responsive-mobile td {
    border: none;
    padding: 7px 0;
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .tw table.responsive-mobile td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    flex: 0 0 42%;
    max-width: 42%;
  }

  .tw table.responsive-mobile td[colspan] {
    display: block;
    padding: 0;
  }

  .tw table.responsive-mobile td[colspan]::before {
    content: none;
  }
}

#resourceInventoryTableWrap td[colspan="7"] > div > table {
  width: 100%;
  table-layout: fixed;
}

#resourceInventoryTableWrap td[colspan="7"] > div > table th,
#resourceInventoryTableWrap td[colspan="7"] > div > table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#resourceInventoryTableWrap td[colspan="7"] > div > table td > div {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#resourceInventoryTableWrap td[colspan="7"] > div > table code {
  display: block;
  font-size: 10px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tdt a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
  line-height: 1.4
}

.tdt a:hover {
  color: var(--c-azure)
}

.tdt .tt2 {
  font-weight: 500;
  line-height: 1.4
}

.nb {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  background: var(--c-azure-bg);
  color: var(--c-azure);
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .3px;
  border: 1px solid rgba(0, 120, 212, .2)
}

.cb {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap
}

.cb.sa2 {
  background: var(--c-azure-bg);
  color: var(--c-azure)
}

.cb.sm2 {
  background: var(--c-m365-bg);
  color: var(--c-m365)
}

.cb.se2 {
  background: var(--c-entra-bg);
  color: var(--c-entra)
}

.cb.ss2 {
  background: var(--c-security-bg);
  color: var(--c-security)
}

.cb.sp2 {
  background: var(--c-partner-bg);
  color: var(--c-partner)
}

.cb.si2 {
  background: var(--c-intune-bg);
  color: var(--c-intune)
}

.cb.sw2 {
  background: var(--c-winserver-bg);
  color: var(--c-winserver)
}

.cb.sd2 {
  background: var(--surface-3);
  color: var(--text-dim)
}

.customer-env-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start
}

.customer-env-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: var(--surface);
  color: var(--text-dim)
}

.customer-env-badge.development {
  color: var(--red);
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .65)
}

.customer-env-badge.production {
  color: var(--c-azure);
  background: var(--c-azure-bg);
  border-color: rgba(0, 120, 212, .55)
}

.customer-env-badge.acceptance {
  color: var(--c-entra);
  background: var(--c-entra-bg);
  border-color: rgba(16, 124, 16, .55)
}

.customer-env-badge.testing {
  color: var(--c-security);
  background: var(--c-security-bg);
  border-color: rgba(92, 45, 145, .55)
}

[data-theme="dark"] .customer-env-badge.development {
  background: rgba(255, 107, 107, .12);
  border-color: rgba(255, 107, 107, .5);
  color: #ff8a8a
}

[data-theme="dark"] .customer-env-badge.production {
  background: rgba(77, 166, 255, .12);
  border-color: rgba(77, 166, 255, .45);
  color: #7cbcff
}

[data-theme="dark"] .customer-env-badge.acceptance {
  background: rgba(78, 202, 78, .12);
  border-color: rgba(78, 202, 78, .45);
  color: #77d977
}

[data-theme="dark"] .customer-env-badge.testing {
  background: rgba(176, 136, 212, .12);
  border-color: rgba(176, 136, 212, .45);
  color: #c2a6e5
}

.tdd {
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap
}

.tds {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap
}

.stb {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap
}

.stb.dev {
  background: rgba(217, 119, 6, .1);
  color: #d97706
}

.stb.prev {
  background: rgba(0, 120, 212, .08);
  color: var(--c-azure)
}

.stb.ga {
  background: rgba(22, 163, 74, .1);
  color: #16a34a
}

.stb.ret {
  background: rgba(220, 38, 38, .1);
  color: var(--red)
}

.stb.def {
  background: var(--surface-3);
  color: var(--text-dim)
}

[data-theme="dark"] .stb.dev {
  background: rgba(251, 191, 36, .12);
  color: #fbbf24
}

[data-theme="dark"] .stb.prev {
  background: rgba(77, 166, 255, .12);
  color: #4da6ff
}

[data-theme="dark"] .stb.ga {
  background: rgba(78, 202, 78, .12);
  color: #4eca4e
}

[data-theme="dark"] .stb.ret {
  background: rgba(255, 107, 107, .12);
  color: #ff6b6b
}

.tret {
  color: var(--red);
  font-weight: 700
}

.svb {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600
}

.svb.critical {
  background: rgba(220, 38, 38, .1);
  color: var(--sev-crit)
}

.svb.important {
  background: rgba(217, 119, 6, .1);
  color: var(--sev-imp)
}

.svb.moderate {
  background: rgba(37, 99, 235, .1);
  color: var(--sev-mod)
}

.svb.low {
  background: rgba(107, 114, 128, .1);
  color: var(--sev-low)
}

.rby {
  color: var(--red);
  font-weight: 600
}

.rbm {
  color: var(--orange)
}

.rbn {
  color: var(--green)
}

.ls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 16px
}

.ldr {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-top-color: var(--c-azure);
  border-radius: 50%;
  animation: spin .8s linear infinite
}

.ls p {
  color: var(--text-muted);
  font-size: 13px
}

.es {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 14px
}

.eb {
  background: rgba(255, 60, 60, .08);
  border: 1px solid rgba(255, 60, 60, .2);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #ff6b6b;
  display: none
}

.pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  font-size: 13px
}

.pg button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: all .2s
}

.pg button:hover {
  border-color: var(--text-muted);
  color: var(--text)
}

.pg button:disabled {
  opacity: .3;
  cursor: default
}

.pg span {
  color: var(--text-muted)
}

footer {
  padding: 32px 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 48px
}

.footer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.mo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 1200;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 24px 24px;
  overflow-y: auto
}

.mo.open {
  display: flex
}

.md {
  background: var(--modal-bg);
  border-radius: 16px;
  max-width: 800px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: none;
  border: 1px solid var(--border)
}

.mh {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border)
}

.showback-detail-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.showback-detail-pdf-btn {
  height: 32px;
  padding: 0 12px;
}

.mh h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  flex: 1;
  margin-right: 16px
}

.mc {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface-2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.mc:hover {
  background: var(--surface-3)
}

.mb {
  padding: 24px 28px
}

html:not([data-theme="dark"]) .mb.showback-customer-invoice {
  background: #f6f5f3;
}

html:not([data-theme="dark"]) .mb.showback-customer-invoice .sbi-root {
  --sbi-card: #ffffff;
  --sbi-panel: #ffffff;
}

.mttl {
  font-size: 18px;
  font-weight: 700;
  color: var(--text)
}

.msub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted)
}

.mm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px
}

.ml {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 4px
}

.mv {
  font-size: 14px;
  color: var(--text)
}

.mdsc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
  padding: 16px 0;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word
}

.mdlinks {
  padding: 12px 0;
  border-top: 1px solid var(--border)
}

.mdlinks .ml {
  margin-bottom: 8px
}

.mdlinks a {
  display: block;
  color: var(--c-azure);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.8;
  transition: opacity .2s
}

.mdlinks a:hover {
  opacity: .8
}

.mln {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 20px;
  background: var(--c-azure);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: opacity .2s
}

.mln:hover {
  opacity: .9
}

@media(max-width:768px) {
  .ctl {
    flex-direction: column
  }

  .sb input {
    width: 100%
  }

  .sb {
    width: 100%
  }

  header {
    padding: 24px 0 16px
  }

  .st {
    display: none
  }

  .tab {
    padding: 8px 10px;
    font-size: 11px
  }

  .mm {
    grid-template-columns: 1fr
  }

  #estGrid {
    grid-template-columns: 1fr !important
  }

  #estGrid>div:first-child {
    max-height: 300px !important
  }

  .gsw {
    width: 200px
  }
}

@media(max-width:768px) {
  .audit-entry-head {
    flex-direction: column;
    align-items: flex-start
  }

  .audit-entry-time {
    text-align: left
  }

  .cust-detail-grid {
    grid-template-columns: 1fr 1fr
  }

  .cust-detail-cols {
    grid-template-columns: 1fr
  }

  .env-select-row {
    flex-direction: column;
    align-items: stretch
  }
}

.est-cat {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1
}

.est-svc {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
  border-bottom: 1px solid var(--surface-2)
}

.est-svc:hover {
  background: var(--surface-2)
}

.est-svc.added {
  opacity: .45;
  pointer-events: none
}

.est-svc-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--c-azure-bg);
  color: var(--c-azure);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0
}

.est-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .2s
}

.est-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06)
}

.est-item-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer
}

.est-item-hd .est-svc-icon {
  width: 32px;
  height: 32px;
  font-size: 11px
}

.est-item-body {
  padding: 16px;
  display: none
}

.est-item.open .est-item-body {
  display: block
}

.est-item-cost {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-azure);
  white-space: nowrap
}

.est-item-rm {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s
}

.est-item-rm:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(220, 38, 38, .06)
}

.est-sku-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 12px
}

.est-sku {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all .15s;
  font-size: 12px
}

.est-sku:hover {
  border-color: var(--c-azure)
}

.est-sku.sel {
  border-color: var(--c-azure);
  background: var(--c-azure-bg)
}

.est-sku-name {
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 13px
}

.est-sku-price {
  font-family: 'JetBrains Mono', monospace;
  color: var(--c-azure);
  font-weight: 500
}

.est-sku-unit {
  color: var(--text-muted);
  font-size: 11px
}

.est-cfg {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-2)
}

.est-cfg label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px
}

.est-cfg input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  width: 110px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border .2s
}

.est-cfg input:focus {
  border-color: var(--c-azure)
}

.est-pt-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px
}

.est-pt-tab {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s
}

.est-pt-tab:hover {
  border-color: var(--text-muted)
}

.est-pt-tab.active {
  background: var(--c-azure);
  color: #fff;
  border-color: var(--c-azure)
}

.est-bk-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--surface-2)
}

.est-bk-row:last-child {
  border-bottom: none
}

.est-fc {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap
}

.est-fc:hover {
  border-color: var(--text-dim);
  color: var(--text)
}

.est-fc.active {
  background: var(--c-azure);
  color: #fff;
  border-color: var(--c-azure)
}

/* ── Feature 6: Filter Presets ── */
.preset-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 7px 0 8px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap
}

.pchip {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  user-select: none
}

.pchip:hover {
  border-color: var(--c-azure);
  color: var(--c-azure)
}

.pdelbtn {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  margin-left: 1px;
  transition: color .15s
}

.pdelbtn:hover {
  color: var(--red)
}

/* ── Feature 7: Quick Date Buttons ── */
.qdbt {
  padding: 0 10px;
  height: 28px;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  font-family: inherit
}

.fa-seg .qdbt:last-child {
  border-right: none
}

.qdbt:hover {
  background: var(--surface-2);
  color: var(--text)
}

.qdbt.active {
  background: var(--c-azure-bg);
  color: var(--c-azure);
  font-weight: 600
}

/* ── Phone layout (≤640px) ── */
@media(max-width:640px) {

  /* ── Topnav ── */
  .topnav {
    padding: 0 10px
  }

  .topnav-top {
    height: auto;
    min-height: 50px;
    flex-wrap: wrap;
    padding: 8px 0;
    gap: 6px
  }

  .topnav-brand {
    flex: 1
  }

  .topnav-brand-logo {
    font-size: 16px
  }

  .authw {
    order: 2;
    margin-left: auto
  }

  .authp {
    min-width: 270px;
    right: 0
  }

  .top-tools {
    width: 0;
    margin: 0
  }

  .filter-summary {
    max-width: 100%;
    width: 100%
  }

  .scope-panel {
    min-width: 0;
    max-width: none;
    width: 100%;
    left: 0;
    right: 0
  }

  .scope-subscription-list {
    max-height: 220px
  }

  .top-search-overlay {
    right: 0;
    width: min(320px, calc(100vw - 20px))
  }

  #gSearchResults {
    min-width: 0;
    width: 100%;
    right: auto;
    left: 0
  }

  .gsb {
    border-radius: 8px
  }

  #gSI {
    padding: 6px 4px;
    font-size: 13px
  }

  .topnav-icons {
    gap: 3px
  }

  .topnav-icon {
    width: 32px;
    height: 32px
  }

  .profile-menu-btn {
    width: 32px;
    height: 32px;
  }

  .nav-item {
    font-size: 11px;
    padding: 4px 7px 6px
  }

  /* ── Main content ── */
  .main-content {
    padding: 0 10px !important;
    border-radius: 0 !important
  }

  .main-content::before {
    display: none
  }

  .cust-detail-grid {
    grid-template-columns: 1fr
  }

  /* ── Filter chip row ── */
  .ctl {
    padding: 6px 0;
    gap: 5px
  }

  .fc {
    flex-wrap: wrap;
    gap: 4px
  }

  .chip {
    padding: 2px 8px;
    font-size: 11px
  }

  .sb,
  .sb input {
    width: 100%
  }

  /* ── Filter dropdowns / date row ── */
  .frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px 0;
    align-items: center
  }

  .frow label {
    display: none
  }

  .frow .fsel {
    width: 100%;
    height: 32px
  }

  .frow .drb {
    grid-column: 1/-1;
    width: 100%;
    text-align: center;
    height: 32px
  }

  .fa-sep {
    display: none
  }

  .fa-seg {
    grid-column: 1/-1
  }

  .fa-seg .qdbt {
    flex: 1;
    height: 32px;
    font-size: 11px
  }

  .frow .di {
    width: 100%
  }

  /* ── Table ── */
  .tw {
    border-radius: 0
  }

  /* Products: hide Status(1) Category(3) Source(4); keep Title(2) Date(5) */
  #panel-products th:nth-child(1),
  #panel-products td:nth-child(1),
  #panel-products th:nth-child(3),
  #panel-products td:nth-child(3),
  #panel-products th:nth-child(4),
  #panel-products td:nth-child(4) {
    display: none
  }

  /* Blogs: hide Category(2) Source(3); keep Title(1) Date(4) */
  #panel-blogs th:nth-child(2),
  #panel-blogs td:nth-child(2),
  #panel-blogs th:nth-child(3),
  #panel-blogs td:nth-child(3) {
    display: none
  }

  /* MSRC: hide Last Updated(2) CNA(5) Impact(6); keep Release(1) CVE#(3) Title(4) Severity(7) */
  #panel-msrc th:nth-child(2),
  #panel-msrc td:nth-child(2),
  #panel-msrc th:nth-child(5),
  #panel-msrc td:nth-child(5),
  #panel-msrc th:nth-child(6),
  #panel-msrc td:nth-child(6) {
    display: none
  }

  /* Deployments: hide Article(2) Product Family(4); keep Date(1) Title(3) Reboot(5) */
  #panel-deploys th:nth-child(2),
  #panel-deploys td:nth-child(2),
  #panel-deploys th:nth-child(4),
  #panel-deploys td:nth-child(4) {
    display: none
  }

  /* Service Health: hide Type(2) Service(4) Last Update(6); keep Status(1) Title(3) Started(5) */
  #panel-serviceHealth th:nth-child(2),
  #panel-serviceHealth td:nth-child(2),
  #panel-serviceHealth th:nth-child(4),
  #panel-serviceHealth td:nth-child(4),
  #panel-serviceHealth th:nth-child(6),
  #panel-serviceHealth td:nth-child(6) {
    display: none
  }

  /* Title cell: allow full width */
  .tdt {
    word-break: break-word
  }

  /* Date cell: compact */
  .tdd,
  .tds {
    font-size: 11px;
    white-space: normal
  }

  /* NEW badge: keep visible but smaller */
  .nb {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 16px
  }

  /* ── Toolbar (count + refresh) ── */
  .tbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px
  }

  .rfb {
    font-size: 12px
  }

  /* ── Pagination ── */
  .pg {
    gap: 4px;
    flex-wrap: wrap
  }

  .pg button {
    padding: 4px 10px;
    font-size: 12px
  }

  /* ── Modal — full-height bottom sheet ── */
  .mo {
    padding: 0;
    align-items: flex-end
  }

  .md {
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-width: 100%;
    width: 100%
  }

  .mm {
    grid-template-columns: 1fr
  }

  .showback-finance-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }

  .showback-net-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .showback-net-hero-value {
    font-size: clamp(28px, 9vw, 38px);
    white-space: normal;
  }

  .showback-role-summary-head,
  .showback-role-line,
  .showback-detail-card-head {
    grid-template-columns: 1fr;
    display: block;
  }

  .showback-role-summary-value,
  .showback-role-line-value,
  .showback-detail-card-value {
    margin-top: 4px;
  }

  .showback-detail-stats {
    grid-template-columns: 1fr;
  }

  /* ── System stats banner — vertical stack ── */
  #sysBanner {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 14px 16px
  }

  #sysBanner>div {
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 10px
  }

  #sysBanner>div:last-child {
    border-bottom: none !important;
    padding-bottom: 0;
    margin-bottom: 0
  }

  /* System stat value font: slightly smaller */
  #sysOverallVal,
  #sysTotalItems,
  #sysLastRefresh,
  #sysFeedWarn,
  #sysNewest {
    font-size: 18px !important
  }

  /* ── System grids ── */
  #sysCatGrid {
    grid-template-columns: 1fr 1fr !important
  }

  #sysApiGrid {
    grid-template-columns: 1fr !important
  }

  /* ── Azure estimator ── */
  #estGrid {
    grid-template-columns: 1fr !important
  }

  #estGrid>div:first-child {
    max-height: 220px !important
  }

  #estBannerStats {
    flex-direction: column !important;
    gap: 10px !important
  }

  /* Estimator region/currency: stack full width */
  #estBanner [style*="display:flex;gap:8px"] {
    flex-wrap: wrap !important
  }

  #estRegion,
  #estCurrency {
    width: 100%;
    max-width: none
  }

  /* ── Service health stats bar ── */
  #shStatsBar {
    justify-content: flex-start !important;
    gap: 8px;
    flex-wrap: wrap
  }

  /* ── Preset bar ── */
  .preset-bar {
    flex-wrap: wrap
  }

  /* ── Footer ── */
  footer {
    padding: 12px 0;
    font-size: 11px
  }
}

/* ── Analytics panels ── */
.anl {
  padding: 24px 0 52px
}

.anl-sh {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border)
}

.anl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
  margin-bottom: 26px
}

.anl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: none !important
}

.anl-card-val {
  font-size: 28px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 4px
}

.anl-card-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted)
}

.anl-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px
}

.computev2-kpi-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 0;
}

#computeConsumptionKpiRow .anl-card {
  position: relative;
  overflow: hidden;
  padding: 16px 14px 14px;
  min-width: 0;
}

#computeConsumptionKpiRow .anl-card-val {
  font-size: clamp(15px, 1.35vw, 22px);
  line-height: 1.05;
  letter-spacing: -.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#computeConsumptionKpiRow .anl-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-azure);
  opacity: .9;
}

#computeConsumptionKpiRow .anl-card:nth-child(2)::before { background: var(--green); }
#computeConsumptionKpiRow .anl-card:nth-child(3)::before { background: var(--orange); }
#computeConsumptionKpiRow .anl-card:nth-child(4)::before { background: #7c3aed; }
#computeConsumptionKpiRow .anl-card:nth-child(5)::before { background: #2563eb; }
#computeConsumptionKpiRow .anl-card:nth-child(6)::before { background: #a16207; }

/* ==========================================================================
   PHASE 4 SECTION: Dashboard
   ========================================================================== */
#dashStats {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 10px
}

#dashStats .anl-card {
  position: relative;
  overflow: hidden;
  padding: 16px 14px 14px;
  background: var(--surface);
  box-shadow: none !important
}

#dashStats .anl-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-azure);
  opacity: .9
}

#dashStats .anl-card:nth-child(2)::before {
  background: var(--c-entra)
}

#dashStats .anl-card:nth-child(3)::before {
  background: var(--c-partner)
}

#dashStats .anl-card:nth-child(4)::before {
  background: var(--c-security)
}

#dashStats .anl-card:nth-child(5)::before {
  background: var(--c-intune)
}

#dashStats .anl-card-val {
  font-size: clamp(18px, 2vw, 34px);
  letter-spacing: -.35px;
  line-height: 1.12;
  white-space: nowrap;
  color: var(--text)
}

#dashStats .anl-card-lbl {
  font-size: 10px;
  letter-spacing: .7px;
  color: var(--text-dim)
}

#dashStats .anl-card-sub {
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
  min-height: 30px
}

#dashStats .anl-card:nth-child(1) .anl-card-val {
  color: #0f6cbd
}

#dashStats .anl-card:nth-child(2) .anl-card-val {
  color: #0f7a53
}

#dashStats .anl-card:nth-child(3) .anl-card-val {
  color: #a16207
}

#dashStats .anl-card:nth-child(4) .anl-card-val {
  color: #5b3cc4
}

#dashStats .anl-card:nth-child(5) .anl-card-val {
  color: #0a7ea8
}

[data-theme="dark"] #dashStats .anl-card:nth-child(1) .anl-card-val {
  color: #6fb8ff
}

[data-theme="dark"] #dashStats .anl-card:nth-child(2) .anl-card-val {
  color: #65d6a8
}

[data-theme="dark"] #dashStats .anl-card:nth-child(3) .anl-card-val {
  color: #f5c160
}

[data-theme="dark"] #dashStats .anl-card:nth-child(4) .anl-card-val {
  color: #b89af4
}

[data-theme="dark"] #dashStats .anl-card:nth-child(5) .anl-card-val {
  color: #6dcde9
}

.anl-g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px
}

.anl-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 0;
  box-shadow: none !important
}

.anl-bt {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px
}

.anl-bs {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px
}

.anl-dw {
  display: flex;
  align-items: center;
  gap: 20px
}

.anl-dsv {
  width: 110px;
  height: 110px;
  flex-shrink: 0
}

.anl-leg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0
}

.anl-li {
  display: flex;
  align-items: center;
  gap: 7px
}

.anl-ld {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0
}

.anl-ll {
  font-size: 12px;
  color: var(--text-dim);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.anl-lv {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  min-width: 28px;
  text-align: right
}

.anl-lp {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 34px;
  text-align: right
}

.anl-hr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px
}

.anl-hl {
  font-size: 12px;
  color: var(--text-dim);
  width: 140px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.anl-ht {
  flex: 1;
  height: 7px;
  background: var(--surface-3);
  border-radius: 99px;
  overflow: hidden
}

.anl-hf {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease
}

.anl-hc {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  min-width: 36px;
  text-align: right
}

.anl-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 90px
}

.anl-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  position: relative;
  cursor: default;
  transition: opacity .15s;
  min-height: 2px
}

.anl-bar:hover {
  opacity: .65
}

.anl-bar-tip {
  display: none;
  position: absolute;
  bottom: calc(100%+5px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--surface);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none
}

.anl-bar:hover .anl-bar-tip {
  display: block
}

.anl-blbls {
  display: flex;
  gap: 4px;
  margin-top: 6px
}

.anl-blbl {
  flex: 1;
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  overflow: hidden
}

.anl-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 20px 0;
  text-align: center
}

.anl-sec-gap {
  margin-top: 26px
}

@media(max-width:768px) {
  .anl-g2 {
    grid-template-columns: 1fr
  }

  .anl-cards {
    grid-template-columns: repeat(2, 1fr)
  }

  .anl-hl {
    width: 100px
  }

  .anl-dsv {
    width: 90px;
    height: 90px
  }
}

@media(max-width:1024px) {
  #dashStats {
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr))
  }
}

@media(max-width:768px) {
  #dashStats {
    grid-template-columns: 1fr
  }
}

.dash-glance-grid {
  margin-bottom: 14px
}

.dash-glance-card {
  position: relative;
  overflow: hidden;
  background: var(--surface)
}

.dash-momentum-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.dash-momentum-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.dash-momentum-badge {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-weight: 600
}

.dash-momentum-svg {
  width: 100%;
  height: 160px;
  display: block
}

.dash-momentum-labels {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px
}

.dash-momentum-label {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.dash-momentum-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px
}

.dash-mi {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface)
}

.dash-mi-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted)
}

.dash-mi-v {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.dash-pulse-wrap {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: center
}

.dash-donut {
  width: 120px;
  height: 120px
}

.dash-donut text {
  font-family: 'DM Sans', sans-serif
}

.dash-pulse-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px
}

.dash-chip {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  min-width: 0
}

.dash-chip-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin-bottom: 3px
}

.dash-chip-v {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.dash-chip-v.ok {
  color: var(--green)
}

.dash-chip-v.warn {
  color: var(--orange)
}

.dash-chip-v.bad {
  color: var(--red)
}

@media(max-width:960px) {
  .dash-pulse-wrap {
    grid-template-columns: 1fr
  }

  .dash-donut {
    margin: 0 auto
  }

  .dash-pulse-kpis {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:640px) {
  .dash-pulse-kpis {
    grid-template-columns: 1fr
  }

  .dash-momentum-labels {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .dash-momentum-insights {
    grid-template-columns: 1fr
  }
}

.dash-ops-grid {
  margin-bottom: 14px
}

.dash-ops-card {
  background: var(--surface)
}

.dash-top-list {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.dash-top-item {
  display: flex;
  flex-direction: column;
  gap: 5px
}

.dash-top-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim)
}

.dash-top-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%
}

.dash-top-value {
  font-weight: 700;
  color: var(--text)
}

.dash-top-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden
}

.dash-top-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-azure), var(--green))
}

.dash-svc-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted)
}

.dash-mode-seg {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
  background: var(--surface)
}

.dash-mode-btn {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit
}

.dash-mode-btn.active {
  background: var(--surface-3);
  color: var(--text)
}

.dash-spend-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.dash-spend-svg {
  width: 100%;
  height: 180px;
  display: block
}

.dash-spend-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap
}

.net-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px
}

.net-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.net-kpi {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface)
}

.net-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted)
}

.net-v {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dim)
}

.net-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  height: 86px
}

.net-spark-bar {
  display: inline-block;
  width: 8px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #7da8c5, #9fb8a1)
}

.net-cats {
  display: grid;
  gap: 8px
}

.net-cat-row {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface)
}

.net-cat-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 5px
}

.net-cat-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden
}

.net-cat-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7da8c5, #9fb8a1)
}

.net-top {
  grid-column: 1/-1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface)
}

.net-top-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 8px
}

.net-top-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--surface-3)
}

.net-top-row:last-child {
  border-bottom: none
}

.net-top-name {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 74%
}

.net-top-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text)
}

.net-breakdown-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  margin-bottom: 8px
}

.net-breakdown-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted)
}

.net-breakdown-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.net-usage-cell {
  white-space: nowrap
}

#panel-networking {
  padding-top: 0
}

.networking-sticky-shell {
  position: sticky;
  top: var(--networking-sticky-offset);
  z-index: 900;
  background: var(--surface);
  padding-top: 6px;
  margin-bottom: 10px;
}

.networking-sticky-shell::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface));
  pointer-events: none;
}

.networking-sticky-toolbar {
  padding-top: 8px
}

.networking-page-head {
  padding: 10px 0 8px
}

.networking-page-copy {
  display: grid;
  gap: 6px
}

.network-filter-dd {
  width: 142px
}

.network-customer-select {
  width: 168px
}

.network-date-dd {
  width: 132px
}

.network-clear-btn {
  width: auto;
  min-width: 84px;
  justify-content: center;
  gap: 6px;
  background: rgba(217, 119, 6, .08);
  border-color: rgba(217, 119, 6, .26);
  color: #c56a10;
}

.network-clear-btn:hover {
  border-color: rgba(217, 119, 6, .45);
  background: rgba(217, 119, 6, .12);
  color: #a8570c;
}

.network-date-menu {
  width: 260px;
  min-width: 260px;
  padding: 10px
}

.network-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px
}

.network-date-nav {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit
}

.network-date-nav:hover {
  border-color: var(--text-muted);
  color: var(--text)
}

.network-date-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  flex: 1
}

.network-date-weekdays,
.network-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px
}

.network-date-weekday {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0
}

.network-date-day,
.network-date-empty {
  height: 30px
}

.network-date-day {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer
}

.network-date-day:hover {
  background: var(--surface-2);
  color: var(--text)
}

.network-date-day.selected {
  background: var(--c-azure-bg);
  border-color: rgba(0, 120, 212, .35);
  color: var(--c-azure);
  font-weight: 700
}

.network-date-day.today {
  border-color: var(--border)
}

.network-date-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border)
}

.network-date-clear {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-dim);
  padding: 6px 10px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer
}

.network-date-clear:hover {
  border-color: var(--red);
  color: var(--red)
}

.networking-page-search {
  width: 240px;
  flex: 0 0 240px
}

.networking-page-search .gsb {
  width: 100%
}

#networkPageSearch {
  flex: 1;
  background: transparent;
  border: none;
  padding: 5px 4px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  min-width: 0
}

#networkPageSearch::placeholder {
  color: var(--text-muted)
}

#networkPageSearchClear {
  display: none;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 5px;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0
}

#networkPageSearchClear:hover {
  color: var(--text)
}

.networking-analytics {
  padding: 8px 0 0;
  margin-top: 8px
}

.networkv2-shell {
  margin-top: 0
}

.computeoverview-inline-summary {
  margin: 10px 0 12px;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.computeoverview-kpi-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0
}

#computeOverviewKpiRow .anl-card {
  position: relative;
  overflow: hidden;
  padding: 12px 12px 11px;
  min-height: 84px;
  min-width: 0
}

#computeOverviewKpiRow .anl-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--c-azure);
  opacity: .55
}

#computeOverviewKpiRow .anl-card:nth-child(2)::before {
  background: var(--green)
}

#computeOverviewKpiRow .anl-card:nth-child(3)::before {
  background: var(--orange)
}

#computeOverviewKpiRow .anl-card:nth-child(4)::before {
  background: var(--c-partner)
}

#computeOverviewKpiRow .anl-card-val {
  font-size: clamp(18px, 1.35vw, 23px);
  line-height: 1.05;
  letter-spacing: -.03em;
  min-width: 0;
  overflow-wrap: anywhere
}

#computeOverviewKpiRow .anl-card-lbl {
  margin-top: 1px
}

#computeOverviewKpiRow .anl-card-sub {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35
}

.computeoverview-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(320px, .92fr);
  gap: 14px;
  margin: 12px 0
}

.computeoverview-composition-panel {
  display: flex;
  flex-direction: column
}

.computeoverview-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 12px
}

.computeoverview-section {
  margin-top: 0
}

.computeoverview-optimization-section {
  margin-bottom: 8px
}

.computeoverview-composition-list {
  gap: 12px
}

#panel-compute-overview .anl-box {
  padding: 14px
}

#panel-compute-overview .anl-bs {
  margin-bottom: 10px
}

@media (max-width: 1100px) {
  .computeoverview-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.computeoverview-composition-item {
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border)
}

.computeoverview-composition-item:first-child {
  padding-top: 0
}

.computeoverview-composition-item:last-child {
  padding-bottom: 0;
  border-bottom: none
}

.computeoverview-composition-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted)
}

.computeoverview-composition-meta strong {
  color: var(--text-dim);
  font-weight: 700
}

.computeoverview-composition-summary {
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--text-muted)
}

.networkv2-header-tools {
  justify-content: flex-start;
  flex: 1 1 100%;
  margin-top: 14px
}

.networkv2-search-field {
  min-width: min(320px, 100%);
  flex: 1 1 280px
}

.networkv2-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px
}

.networkv2-panel-meta {
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-muted)
}

.networkv2-trend-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.networkv2-trend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap
}

.networkv2-trend-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text)
}

.networkv2-trend-subtitle {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted)
}

.networkv2-trend-legend {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap
}

.networkv2-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim)
}

.networkv2-trend-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0
}

.networkv2-trend-chart {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden
}

.networkv2-trend-chart svg {
  width: 100%;
  height: 220px;
  display: block
}

.networkv2-trend-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px
}

.networkv2-mini-stat {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2)
}

.networkv2-mini-stat-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted)
}

.networkv2-mini-stat-v {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim)
}

.networkv2-vpn-summary-panel {
  margin-bottom: 14px
}

.vpnx-shell {
  margin-top: 0
}

.vpnx-header-tools {
  justify-content: flex-start;
  flex: 1 1 100%;
  margin-top: 14px
}

.vpnx-search-field {
  min-width: min(320px, 100%);
  flex: 1 1 280px
}

.vpnx-kpi-row .anl-card {
  padding: 16px 14px 14px
}

.vpnx-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 14px;
  margin: 14px 0
}

.vpnx-insights-panel,
.vpnx-table-panel {
  margin-top: 14px
}

.vpnx-bar-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto
}

.vpnx-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center
}

.vpnx-bar-copy {
  min-width: 0
}

.vpnx-bar-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.vpnx-bar-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.vpnx-bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden
}

.vpnx-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-azure), #48a3e6)
}

.vpnx-bar-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap
}

.vpnx-bar-meta strong {
  font-size: 12px;
  color: var(--text)
}

.vpnx-split {
  display: grid;
  gap: 14px
}

.vpnx-split-bar {
  display: flex;
  width: 100%;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2)
}

.vpnx-split-segment {
  height: 100%
}

.vpnx-split-segment.ingress {
  background: var(--c-azure)
}

.vpnx-split-segment.egress {
  background: #c2601d
}

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

.vpnx-split-metric {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2)
}

.vpnx-split-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted)
}

.vpnx-split-value {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text)
}

.vpnx-split-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted)
}

.vpnx-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px
}

.vpnx-insight-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface)
}

.vpnx-insight-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted)
}

.vpnx-insight-v {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text)
}

.vpnx-insight-s {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted)
}

.vpnx-table {
  min-width: 1260px
}

.vpnx-table .tar {
  text-align: right
}

.vpnx-sort-btn {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer
}

.vpnx-sort-btn:hover {
  color: var(--c-azure)
}

.vpnx-connection-row td {
  vertical-align: middle
}

.networkv2-vpn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px
}

.networkv2-vpn-card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface)
}

.networkv2-vpn-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #c2601d;
  opacity: .9
}

.networkv2-vpn-card:nth-child(2)::before {
  background: var(--c-azure)
}

.networkv2-vpn-card:nth-child(3)::before {
  background: var(--green)
}

.networkv2-vpn-card:nth-child(4)::before {
  background: var(--c-partner)
}

.networkv2-vpn-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted)
}

.networkv2-vpn-v {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text)
}

.networkv2-vpn-s {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted)
}

.networkv2-type-grid .network-compare-grid,
.networkv2-type-grid {
  margin-bottom: 0
}

.networkv2-customer-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none
}

.networkv2-table-panel {
  margin-top: 14px;
  margin-bottom: 16px
}

.networkv2-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap
}

.networkv2-status-badge.healthy {
  color: var(--green);
  background: #F7FAF6;
  border-color: rgba(22, 163, 74, .18)
}

.networkv2-status-badge.mapped {
  color: var(--c-azure);
  background: rgba(15, 108, 189, .08);
  border-color: rgba(15, 108, 189, .18)
}

.networkv2-status-badge.review {
  color: #b45309;
  background: rgba(217, 119, 6, .09);
  border-color: rgba(217, 119, 6, .18)
}

.network-hero-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px
}

.network-hero-card {
  position: relative;
  overflow: hidden;
  padding: 16px 14px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface)
}

.network-hero-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-azure);
  opacity: .9
}

.network-hero-card:nth-child(2)::before {
  background: var(--c-entra)
}

.network-hero-card:nth-child(3)::before {
  background: var(--c-partner)
}

.network-hero-card:nth-child(4)::before {
  background: var(--c-security)
}

.network-hero-card:nth-child(5)::before {
  background: var(--c-intune)
}

.network-hero-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted)
}

.network-hero-v {
  margin-top: 6px;
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 800;
  letter-spacing: -.35px;
  line-height: 1.12;
  color: var(--text)
}

.network-hero-breakdown {
  margin-top: 8px
}

.network-hero-s {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  font-weight: 600
}

.network-hero-s-plain {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted)
}

.network-hero-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.network-hero-trend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--surface-2);
  border: 1px solid var(--border)
}

.network-hero-trend.good {
  color: var(--green)
}

.network-hero-trend.good .network-hero-trend-icon {
  background: #F7FAF6;
  border-color: rgba(22, 163, 74, .18);
  color: var(--green)
}

.network-hero-trend.bad {
  color: var(--red)
}

.network-hero-trend.bad .network-hero-trend-icon {
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .18);
  color: var(--red)
}

.network-hero-trend.neutral {
  color: var(--text-muted)
}

.network-hero-trend.neutral .network-hero-trend-icon {
  color: var(--text-muted)
}

.network-hero-v.good {
  color: var(--green) !important
}

.network-hero-v.bad {
  color: var(--red) !important
}

.network-hero-v.neutral {
  color: var(--text-dim) !important
}

.network-unit-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0
}

.network-unit-primary {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.25
}

.network-unit-secondary {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  line-height: 1.35
}

.network-unit-empty {
  font-size: 12px;
  color: var(--text-muted)
}

.network-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px
}

.network-compare-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface)
}

.network-compare-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px
}

.network-compare-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0
}

.network-compare-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text)
}

.network-compare-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4
}

.network-compare-cost {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap
}

.network-compare-bars {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.network-compare-bar {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.network-compare-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted)
}

.network-compare-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden
}

.network-compare-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-azure), var(--green))
}

.network-compare-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px
}

.network-compare-metric {
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2)
}

.network-compare-metric-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted)
}

.network-compare-metric-v {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim)
}

.network-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px
}

.network-dashboard-card {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface)
}

.network-dashboard-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted)
}

.network-dashboard-v {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text)
}

.network-dashboard-s {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted)
}

.network-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px
}

.network-insight-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  position: relative;
  overflow: hidden
}

.network-insight-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-azure);
  opacity: .9
}

.network-insight-card.good::before {
  background: var(--green)
}

.network-insight-card.warn::before {
  background: var(--c-partner)
}

.network-insight-card.bad::before {
  background: var(--red)
}

.network-insight-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted)
}

.network-insight-v {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text)
}

.network-insight-s {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted)
}

.network-customer-note {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-muted)
}

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

.network-customer-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface)
}

.network-customer-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px
}

.network-customer-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 8px
}

.network-customer-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35
}

.network-customer-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px
}

.network-customer-cost {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap
}

.network-customer-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px
}

.network-customer-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted)
}

.network-customer-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden
}

.network-customer-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-azure), var(--green))
}

.network-customer-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px
}

.network-customer-metric {
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2)
}

.network-customer-metric-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted)
}

.network-customer-metric-v {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  line-height: 1.4
}

.network-delta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35
}

.network-delta-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 10px;
  flex-shrink: 0
}

.network-delta-badge.good {
  color: var(--green)
}

.network-delta-badge.good .network-delta-badge-icon {
  color: var(--green);
  border-color: rgba(22, 163, 74, .18);
  background: #F7FAF6
}

.network-delta-badge.bad {
  color: var(--red)
}

.network-delta-badge.bad .network-delta-badge-icon {
  color: var(--red);
  border-color: rgba(220, 38, 38, .18);
  background: rgba(220, 38, 38, .08)
}

.network-delta-badge.neutral {
  color: var(--text-muted)
}

.networking-block {
  padding: 16px 0 0;
  margin-top: 16px
}

.networking-block+.networking-block {
  border-top: 1px solid var(--border)
}

.networking-block-head {
  padding-top: 0;
  padding-bottom: 10px;
  align-items: flex-end
}

.networking-block-copy {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.networking-block-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted)
}

.networking-block-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3
}

.networking-block-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4
}

.networking-inline-note {
  font-size: 11px;
  color: var(--text-muted)
}

.networking-breakdown-table {
  min-width: 1120px
}

.networking-breakdown-row {
  cursor: pointer;
  transition: background .15s ease
}

.networking-breakdown-row:hover {
  background: var(--surface-2)
}

.networking-breakdown-row.is-open {
  background: color-mix(in srgb, var(--c-azure-bg) 62%, var(--surface) 38%)
}

.networking-breakdown-row td {
  vertical-align: middle
}

.networking-expander-cell {
  width: 36px
}

.networking-expander-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer
}

.networking-expander-btn:hover {
  border-color: var(--c-azure);
  color: var(--c-azure)
}

.networking-breakdown-row.is-open .networking-expander-btn {
  background: var(--c-azure-bg);
  border-color: rgba(0, 120, 212, .3);
  color: var(--c-azure)
}

.networking-entity-cell {
  display: grid;
  gap: 3px;
  min-width: 0
}

.networking-entity-title {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.networking-entity-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.networking-stack-cell {
  display: grid;
  gap: 3px
}

.networking-stack-primary {
  font-weight: 700;
  color: var(--text)
}

.networking-stack-secondary {
  font-size: 11px;
  color: var(--text-muted)
}

.networking-detail-row td {
  padding: 0;
  background: var(--surface-2)
}

.networking-detail-shell {
  padding: 14px 16px;
  border-top: 1px solid var(--border)
}

.networking-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px
}

.networking-detail-item {
  display: grid;
  gap: 4px;
  min-width: 0
}

.networking-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted)
}

.networking-detail-value {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  word-break: break-word
}

.networking-detail-value code {
  font-size: 11px
}

.networking-matrix-controls {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: end
}

.networking-control-label {
  margin-bottom: 6px
}

.networking-matrix-actions {
  display: flex;
  justify-content: flex-end
}

.networking-matrix-summary {
  margin-top: 12px
}

.networking-matrix-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.networking-matrix-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700
}

.networking-matrix-table {
  min-width: 1160px
}

.networking-matrix-row {
  cursor: pointer
}

.networking-matrix-row:hover {
  background: var(--surface-2)
}

.networking-matrix-row.is-open {
  background: color-mix(in srgb, rgba(29, 111, 165, .10) 72%, var(--surface) 28%)
}

.networking-flow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px
}

.networking-flow-note {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.2;
  white-space: nowrap
}

.networking-flow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap
}

.networking-flow-badge.inbound {
  color: #1d6fa5;
  background: rgba(29, 111, 165, .1);
  border-color: rgba(29, 111, 165, .18)
}

.networking-flow-badge.outbound {
  color: #c2601d;
  background: rgba(194, 96, 29, .1);
  border-color: rgba(194, 96, 29, .18)
}

.networking-billing-outcome {
  display: grid;
  gap: 3px
}

.networking-billing-primary {
  font-weight: 700;
  color: var(--text)
}

.networking-billing-secondary {
  font-size: 11px;
  color: var(--text-muted)
}

.networking-matrix-detail-shell {
  padding: 14px 16px;
  border-top: 1px solid var(--border)
}

.networking-matrix-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px
}


.network-category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent
}

.network-category-badge.gateway {
  color: #c2601d;
  background: rgba(194, 96, 29, .1);
  border-color: rgba(194, 96, 29, .18)
}

.network-category-badge.peering {
  color: #1d6fa5;
  background: rgba(29, 111, 165, .1);
  border-color: rgba(29, 111, 165, .18)
}

.network-category-badge.expressroute {
  color: #2f7d32;
  background: rgba(47, 125, 50, .1);
  border-color: rgba(47, 125, 50, .18)
}

.network-category-badge.egress {
  color: #7a4aa5;
  background: rgba(122, 74, 165, .1);
  border-color: rgba(122, 74, 165, .18)
}

.network-category-badge.neutral {
  color: var(--text-dim);
  background: var(--surface-2);
  border-color: var(--border)
}

#netBreakdownSearch {
  height: 32px;
  min-width: 250px
}

#vpnConnSearch {
  height: 32px;
  min-width: 250px
}

.cost-trend-insights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px
}

.cost-trend-card {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  position: relative;
  overflow: hidden
}

.cost-trend-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--border)
}

.cost-trend-card.neutral {
  background: rgba(37, 99, 235, .04);
  border-color: rgba(37, 99, 235, .12)
}

.cost-trend-card.neutral::before {
  background: #6aa4d9
}

.cost-trend-card.peak,
.cost-trend-card.bad {
  background: rgba(217, 119, 6, .07);
  border-color: rgba(217, 119, 6, .16)
}

.cost-trend-card.peak::before,
.cost-trend-card.bad::before {
  background: #d97706
}

.cost-trend-card.good {
  background: rgba(22, 163, 74, .07);
  border-color: rgba(22, 163, 74, .16)
}

.cost-trend-card.good::before {
  background: #16a34a
}

.cost-trend-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted)
}

.cost-trend-v {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.cost-trend-card.bad .cost-trend-v,
.cost-trend-card.peak .cost-trend-v {
  color: #b45309
}

.cost-trend-card.good .cost-trend-v {
  color: #15803d
}

.cost-trend-card.neutral .cost-trend-v {
  color: #245c8f
}

@media(max-width:980px) {
  .cost-trend-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:640px) {
  .cost-trend-insights {
    grid-template-columns: 1fr
  }
}

@media(max-width:980px) {
  .governancev2-main-grid,
  .governancev2-signal-grid {
    grid-template-columns: 1fr;
  }

  .governancev2-sidebar,
  .governancev2-trend-panel,
  .governancev2-health-panel,
  .governancev2-queue-panel,
  .governancev2-exception-panel,
  .governancev2-alert-panel,
  .governancev2-table-panel {
    grid-column: 1;
    grid-row: auto;
    height: auto;
  }

  .governancev2-header-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .governancev2-trend-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vpnx-main-grid,
  .vpnx-insight-grid {
    grid-template-columns: 1fr
  }

  .vpnx-split-grid {
    grid-template-columns: 1fr
  }

  .computeoverview-focus-grid,
  .computeoverview-support-grid {
    grid-template-columns: 1fr
  }

  .computeoverview-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .computeoverview-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .networkv2-main-grid {
    grid-template-columns: 1fr
  }

  .networkv2-vpn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .networkv2-trend-foot {
    grid-template-columns: 1fr
  }

  .net-grid {
    grid-template-columns: 1fr
  }

  .net-kpis {
    grid-template-columns: 1fr 1fr
  }

  .network-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .network-compare-grid {
    grid-template-columns: 1fr
  }

  .network-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .network-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .network-customer-grid {
    grid-template-columns: 1fr
  }

  .networking-detail-grid,
  .networking-matrix-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .networking-matrix-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:640px) {
  .governancev2-header-tools,
  .governancev2-trend-grid {
    grid-template-columns: 1fr;
  }

  .governancev2-trend-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .governancev2-trend-kpis {
    grid-template-columns: 1fr;
  }

  .governancev2-route-row,
  .governancev2-exception-row {
    grid-template-columns: 1fr;
  }

  .governancev2-route-value {
    justify-items: start;
    text-align: left;
    min-width: 0;
  }

  .governancev2-action-cell {
    justify-content: flex-start;
  }

  .vpnx-header-tools {
    width: 100%
  }

  .vpnx-search-field {
    min-width: 0;
    width: 100%
  }

  .vpnx-bar-row {
    grid-template-columns: 1fr
  }

  .vpnx-bar-meta {
    justify-items: start
  }

  .networkv2-vpn-grid {
    grid-template-columns: 1fr
  }

  .computeoverview-summary-strip,
  .computeoverview-kpi-row {
    grid-template-columns: 1fr
  }

  .computeoverview-composition-meta {
    flex-direction: column;
    gap: 4px
  }

  .networkv2-header-tools {
    width: 100%
  }

  .networkv2-search-field {
    min-width: 0;
    width: 100%
  }

  .networkv2-trend-chart svg {
    height: 200px
  }

  .net-kpis {
    grid-template-columns: 1fr
  }

  .net-spark {
    height: 72px
  }

  .networking-block-head {
    align-items: flex-start
  }

  .networking-block-copy {
    width: 100%
  }

  .network-filter-dd,
  .network-customer-select,
  .network-date-dd {
    width: 100%
  }

  .network-date-menu {
    width: 100%;
    min-width: 0
  }

  .networking-page-search {
    width: 100%;
    flex: 1 0 100%
  }

  .networking-inline-note {
    width: 100%
  }

  .networking-detail-grid,
  .networking-matrix-detail-grid,
  .networking-matrix-controls {
    grid-template-columns: 1fr
  }

  .networking-matrix-actions {
    justify-content: stretch
  }

  .networking-matrix-actions .rfb {
    width: 100%
  }

  .network-hero-grid {
    grid-template-columns: 1fr
  }

  .network-compare-metrics {
    grid-template-columns: 1fr
  }

  .network-dashboard-grid {
    grid-template-columns: 1fr
  }

  .network-insight-grid {
    grid-template-columns: 1fr
  }

  .network-customer-metrics {
    grid-template-columns: 1fr
  }

  .networking-sticky-shell {
    top: var(--networking-sticky-offset);
    padding-top: 0
  }
}

.costx {
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 18px 16px 16px;
  box-shadow: none !important;
  -webkit-box-shadow: none !important
}

.costx-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 8px
}

.costx-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text)
}

.costx-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  max-width: 700px
}

.costx-quick {
  display: inline-flex;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  background: var(--surface)
}

.costx-quick-btn {
  border: none;
  background: transparent;
  min-height: calc(var(--control-height) - 8px);
  padding: 0 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s
}

.costx-quick-btn.active {
  background: var(--c-azure-bg);
  color: var(--c-azure)
}

.costx-controls {
  display: grid;
  grid-template-columns: 150px 180px 1fr auto;
  gap: 10px;
  align-items: end;
  margin-top: 16px
}

.costx-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0
}

.costx-field .admin-select-wrap {
  width: 100%;
  min-width: 0;
}

.costx-field .admin-select {
  width: 100%;
}

.costx-field label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted)
}

.costx-search .authi {
  height: var(--control-height)
}

.costx-load {
  height: var(--control-height);
  justify-content: center
}

.page-diag-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 4px
}

.access-admin-shared-box {
  padding-top: 10px
}

.access-admin-head {
  padding-top: 0
}

.identity-sources-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.identity-sources-summary-card {
  min-height: 148px;
}

.identity-sources-summary-card .costx-kpi-label {
  margin-bottom: 6px;
}

.identity-sources-summary-card .costx-kpi-value {
  margin-bottom: 6px;
}

.identity-sources-summary-card .showback-kpi-trend {
  min-height: 0;
  max-width: 34ch;
}

.identity-sources-summary-note {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 84%, var(--surface-2) 16%);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.account-settings-page {
  max-width: 1400px;
}

.account-settings-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.account-settings-page-head-left {
  max-width: 760px;
}

.account-settings-page-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-azure);
  margin-bottom: 6px;
}

.account-settings-page-title {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}

.account-settings-page-sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 74ch;
}

.account-settings-page-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.account-settings-page-control {
  min-width: 190px;
}

.account-settings-page-control label,
.account-settings-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.account-settings-page-scope {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--surface-2) 8%), var(--surface));
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .03);
}

.account-settings-page-scope-secondary {
  color: var(--c-azure);
}

.account-settings-inline-note {
  margin-bottom: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 22%, var(--border) 78%);
  background: color-mix(in srgb, var(--c-azure) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--c-azure) 68%, var(--text) 32%);
  font-size: 11px;
  line-height: 1.55;
}

.account-settings-inline-note-compact {
  margin-bottom: 16px;
}

.account-settings-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 24%, var(--border) 76%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-azure) 12%, var(--surface) 88%), color-mix(in srgb, var(--surface-2) 72%, var(--surface) 28%));
}

.account-settings-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-azure);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-azure) 18%, transparent 82%);
  flex: 0 0 auto;
  margin-top: 6px;
}

.account-settings-banner-main {
  min-width: 0;
  flex: 1 1 260px;
}

.account-settings-banner-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-azure);
  line-height: 1.2;
}

.account-settings-banner-sub {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--c-azure) 80%, var(--text-muted) 20%);
  max-width: 46ch;
}

.account-settings-banner-divider {
  width: 1px;
  align-self: stretch;
  min-height: 34px;
  background: color-mix(in srgb, var(--c-azure) 20%, transparent 80%);
}

.account-settings-banner-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 86px;
}

.account-settings-banner-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.account-settings-banner-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.account-settings-banner-note {
  margin-left: 8px;
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 30ch;
  align-self: flex-start;
}

.account-settings-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.account-settings-kpi-cell {
  position: relative;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
}

.account-settings-kpi-cell:last-child {
  border-right: 0;
}

.account-settings-kpi-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--account-kpi-accent, var(--c-azure));
}

.account-settings-kpi-cell[data-tone="good"] {
  --account-kpi-accent: var(--c-good);
}

.account-settings-kpi-cell[data-tone="info"] {
  --account-kpi-accent: var(--c-azure);
}

.account-settings-kpi-cell[data-tone="warn"] {
  --account-kpi-accent: var(--c-warn);
}

.account-settings-kpi-cell[data-tone="danger"] {
  --account-kpi-accent: var(--c-danger);
}

.account-settings-kpi-label {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.account-settings-kpi-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.account-settings-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}

.account-settings-kpi-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.account-settings-kpi-status.ok {
  color: var(--c-good);
  background: color-mix(in srgb, var(--c-good) 10%, transparent 90%);
}

.account-settings-kpi-status.info {
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure) 10%, transparent 90%);
}

.account-settings-kpi-status.warn {
  color: var(--c-warn);
  background: color-mix(in srgb, var(--c-warn) 12%, transparent 88%);
}

.account-settings-kpi-status.danger {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 12%, transparent 88%);
}

.account-settings-kpi-sub {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 34ch;
}

.account-settings-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--surface-2) 8%), var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, .04);
}

.account-settings-card.account-settings-panel-disabled {
  opacity: .78;
}

.account-settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.account-settings-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.account-settings-card-sub {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 76ch;
}

.account-settings-card-meta {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.account-settings-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 14px;
}

.account-settings-panel-grid-override {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-settings-subsection {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-2) 14%);
  min-width: 0;
}

.account-settings-subsection-span-full {
  grid-column: 1 / -1;
}

.account-settings-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.account-settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.account-settings-form-grid-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-settings-field .authi {
  height: 36px;
  border-radius: 8px;
}

.account-settings-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-settings-toggle-grid-secondary {
  margin-top: 10px;
}

.account-settings-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 74px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--surface);
}

.account-settings-toggle[data-tone="good"] {
  border-left-color: var(--c-good);
}

.account-settings-toggle[data-tone="info"] {
  border-left-color: var(--c-azure);
}

.account-settings-toggle[data-tone="warn"] {
  border-left-color: var(--c-warn);
}

.account-settings-toggle[data-tone="danger"] {
  border-left-color: var(--c-danger);
}

.account-settings-toggle[data-tone="muted"] {
  border-left-color: color-mix(in srgb, var(--text-muted) 40%, var(--border) 60%);
}

.account-settings-toggle input {
  margin: 0;
}

.account-settings-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.account-settings-toggle-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.account-settings-toggle-sub {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.account-settings-toggle-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.account-settings-subsection-note {
  margin-top: 12px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.account-settings-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.account-settings-card-footer-note {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 62ch;
}

.account-settings-card-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.identity-sources-page {
  max-width: 1400px;
}

.identity-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.identity-page-head-left {
  max-width: 720px;
}

.identity-page-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-azure);
  margin-bottom: 6px;
}

.identity-page-title {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}

.identity-page-sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 72ch;
}

.identity-page-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.identity-page-control {
  min-width: 280px;
}

.identity-page-control label,
.identity-form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.identity-page-refresh-btn,
.identity-secondary-btn,
.identity-primary-btn,
.identity-add-btn {
  min-height: 36px;
  border-radius: 8px;
}

.identity-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--surface-2) 8%), var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, .04);
}

.identity-card-head,
.identity-table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.identity-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.identity-card-sub {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 72ch;
}

.identity-sources-inline-note {
  margin-bottom: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 22%, var(--border) 78%);
  background: color-mix(in srgb, var(--c-azure) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--c-azure) 68%, var(--text) 32%);
  font-size: 11px;
  line-height: 1.55;
}

.identity-sources-status-banner {
  margin-bottom: 12px;
  padding: 9px 13px;
}

.identity-sources-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 24%, var(--border) 76%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-azure) 12%, var(--surface) 88%), color-mix(in srgb, var(--surface-2) 72%, var(--surface) 28%));
}

.identity-sources-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-azure);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-azure) 18%, transparent 82%);
  flex: 0 0 auto;
  margin-top: 6px;
}

.identity-sources-banner-main {
  min-width: 0;
  flex: 1 1 240px;
}

.identity-sources-banner-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-azure);
  line-height: 1.2;
}

.identity-sources-banner-sub {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--c-azure) 80%, var(--text-muted) 20%);
  max-width: 42ch;
}

.identity-sources-banner-divider {
  width: 1px;
  align-self: stretch;
  min-height: 34px;
  background: color-mix(in srgb, var(--c-azure) 20%, transparent 80%);
}

.identity-sources-banner-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 72px;
}

.identity-sources-banner-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.identity-sources-banner-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.identity-sources-banner-note {
  margin-left: 8px;
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: left;
  max-width: 28ch;
  align-self: flex-start;
}

.identity-sources-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.identity-sources-kpi-cell {
  position: relative;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
}

.identity-sources-kpi-cell:last-child {
  border-right: 0;
}

.identity-sources-kpi-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--identity-kpi-accent, var(--c-azure));
}

.identity-sources-kpi-cell[data-tone="good"] {
  --identity-kpi-accent: var(--c-good);
}

.identity-sources-kpi-cell[data-tone="info"] {
  --identity-kpi-accent: var(--c-azure);
}

.identity-sources-kpi-cell[data-tone="warn"] {
  --identity-kpi-accent: var(--c-warn);
}

.identity-sources-kpi-cell[data-tone="danger"] {
  --identity-kpi-accent: var(--c-danger);
}

.identity-sources-kpi-cell[data-tone="accent"] {
  --identity-kpi-accent: #7c3aed;
}

.identity-sources-kpi-label {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.identity-sources-kpi-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.identity-sources-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}

.identity-sources-kpi-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.identity-sources-kpi-status.ok {
  color: var(--c-good);
  background: color-mix(in srgb, var(--c-good) 10%, transparent 90%);
}

.identity-sources-kpi-status.info {
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure) 10%, transparent 90%);
}

.identity-sources-kpi-status.danger {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 10%, transparent 90%);
}

.identity-sources-kpi-sub {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 34ch;
}

.identity-registration-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.identity-registration-tenant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.identity-registration-tenant-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure) 10%, var(--surface) 90%);
}

.identity-registration-tenant-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.identity-registration-tenant-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.identity-registration-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}

.identity-registration-row:last-child {
  border-bottom: 0;
}

.identity-registration-row:hover {
  background: var(--surface-2);
}

.identity-registration-row.tone-warn {
  background: color-mix(in srgb, var(--c-warn) 5%, var(--surface) 95%);
}

.identity-registration-row.tone-danger {
  background: color-mix(in srgb, var(--c-danger) 6%, var(--surface) 94%);
}

.identity-registration-key {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.identity-registration-value {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  word-break: break-word;
}

.identity-registration-value.identity-registration-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.identity-registration-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 700;
}

.identity-registration-badge.ok {
  color: var(--c-good);
  background: color-mix(in srgb, var(--c-good) 10%, transparent 90%);
}

.identity-registration-badge.warn {
  color: var(--c-warn);
  background: color-mix(in srgb, var(--c-warn) 12%, transparent 88%);
}

.identity-registration-badge.danger {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 12%, transparent 88%);
}

.identity-registration-badge.info {
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure) 10%, transparent 90%);
}

.identity-copy-btn {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}

.identity-registration-row:hover .identity-copy-btn {
  opacity: 1;
}

.identity-copy-btn:hover {
  border-color: var(--border);
  color: var(--text);
}

.identity-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);
  gap: 16px 20px;
}

.identity-form-field .authi,
.identity-filter-wrap .authi {
  height: 36px;
  border-radius: 8px;
}

.identity-form-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.identity-form-span-full {
  grid-column: 1 / -1;
}

.identity-form-toggle-row {
  display: flex;
  align-items: flex-end;
}

.identity-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
}

.identity-toggle input {
  margin: 0;
}

.identity-toggle-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.identity-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.identity-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-top: 10px;
}

.identity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 11px;
  color: var(--text);
}

.identity-chip code {
  font-size: 11px;
}

.identity-chip-remove {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.identity-chip-remove:hover {
  background: var(--surface-3);
  color: var(--c-danger);
}

.identity-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.identity-form-footer-note {
  font-size: 11px;
  color: var(--text-muted);
}

.identity-form-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.identity-table-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.identity-filter-wrap {
  min-width: 180px;
}

.identity-groups-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 22%, var(--border) 78%);
  background: color-mix(in srgb, var(--c-azure) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--c-azure) 70%, var(--text) 30%);
  font-size: 11px;
  line-height: 1.55;
}

.identity-groups-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.identity-group-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.identity-group-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--surface-3);
  color: var(--text-dim);
}

.identity-group-icon.identity-group-icon-admin {
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure) 10%, transparent 90%);
}

.identity-group-icon.identity-group-icon-member {
  color: var(--c-good);
  background: color-mix(in srgb, var(--c-good) 10%, transparent 90%);
}

.identity-group-icon.identity-group-icon-security {
  color: var(--c-warn);
  background: color-mix(in srgb, var(--c-warn) 10%, transparent 90%);
}

.identity-group-icon.identity-group-icon-viewer {
  color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 10%, transparent 90%);
}

.identity-group-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.identity-group-id {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.identity-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}

.identity-pill-admin {
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure) 10%, transparent 90%);
}

.identity-pill-member {
  color: var(--c-good);
  background: color-mix(in srgb, var(--c-good) 10%, transparent 90%);
}

.identity-pill-viewer {
  color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 10%, transparent 90%);
}

.identity-pill-unmapped {
  color: var(--text-muted);
  background: var(--surface-3);
}

.identity-members-cell {
  font-weight: 700;
  color: var(--text);
}

.identity-members-cell.identity-members-zero {
  font-weight: 500;
  color: var(--text-muted);
}

.identity-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.identity-row-action {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.identity-row-action:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}

.identity-group-members-note {
  margin-bottom: 12px;
}

.identity-group-members-table-wrap table th,
.identity-group-members-table-wrap table td {
  vertical-align: middle;
}

.identity-member-source-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.identity-inline-select .authi {
  height: 34px;
}

.identity-row-assign-btn {
  min-width: 74px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
}

.identity-groups-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

.identity-groups-empty {
  padding: 16px 14px;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .account-settings-kpi-row,
  .identity-sources-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .account-settings-panel-grid,
  .account-settings-panel-grid-override,
  .account-settings-form-grid,
  .account-settings-form-grid-wide,
  .account-settings-toggle-grid,
  .identity-form-grid {
    grid-template-columns: 1fr;
  }

  .identity-registration-row {
    grid-template-columns: 1fr;
  }

  .identity-registration-value {
    text-align: left;
  }

  .identity-copy-btn {
    opacity: 1;
  }
}

@media (max-width: 720px) {
  .account-settings-page-control,
  .identity-page-control,
  .identity-filter-wrap,
  .identity-table-tools .admin-select-wrap {
    min-width: 100%;
    width: 100%;
  }

  .account-settings-banner-note,
  .identity-sources-banner-note {
    margin-left: 0;
    text-align: left;
    max-width: none;
  }

  .account-settings-kpi-row,
  .identity-sources-kpi-row {
    grid-template-columns: 1fr;
  }

  .identity-add-row {
    grid-template-columns: 1fr;
  }
}

.access-admin-mini-card {
  min-height: 100%
}

.mini-stat-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.mini-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px
}

.mini-stat-name {
  font-size: 12px;
  color: var(--text-dim)
}

.mini-stat-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text)
}

.access-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px
}

.access-role-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 14px;
  position: relative;
  overflow: hidden
}

.access-role-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c-azure)
}

.access-role-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px
}

.access-role-card-copy {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 10px
}

.access-role-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.access-role-card-tags .tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700
}

.access-assignments-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.access-assignments-page-head-copy {
  max-width: 760px;
}

.access-assignments-page-eyebrow {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-azure);
}

.access-assignments-page-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.15;
}

.access-assignments-page-sub {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.access-assignments-page-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.access-assignments-page-control {
  min-width: 220px;
}

.access-assignments-page-control label,
.access-assignments-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.access-assignments-page-control .authi,
.access-assignments-field .authi {
  height: 36px;
  border-radius: 8px;
}

.access-assignments-scope-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 24%, var(--border) 76%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-azure) 12%, var(--surface) 88%), color-mix(in srgb, var(--surface-2) 72%, var(--surface) 28%));
}

.access-assignments-scope-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-azure);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-azure) 18%, transparent 82%);
  flex: 0 0 auto;
  margin-top: 6px;
}

.access-assignments-scope-main {
  min-width: 0;
  flex: 1 1 260px;
}

.access-assignments-scope-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-azure);
  line-height: 1.2;
}

.access-assignments-scope-sub {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--c-azure) 80%, var(--text-muted) 20%);
  max-width: 48ch;
}

.access-assignments-scope-divider {
  width: 1px;
  align-self: stretch;
  min-height: 34px;
  background: color-mix(in srgb, var(--c-azure) 20%, transparent 80%);
}

.access-assignments-scope-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 86px;
}

.access-assignments-scope-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.access-assignments-scope-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.access-assignments-scope-note {
  margin-left: auto;
  max-width: 34ch;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.access-assignments-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.access-assignments-kpi-cell {
  position: relative;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
}

.access-assignments-kpi-cell:last-child {
  border-right: 0;
}

.access-assignments-kpi-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--access-kpi-accent, var(--c-azure));
}

.access-assignments-kpi-cell[data-tone="good"] {
  --access-kpi-accent: var(--c-good);
}

.access-assignments-kpi-cell[data-tone="info"] {
  --access-kpi-accent: var(--c-azure);
}

.access-assignments-kpi-cell[data-tone="warn"] {
  --access-kpi-accent: var(--c-warn);
}

.access-assignments-kpi-cell[data-tone="danger"] {
  --access-kpi-accent: var(--c-danger);
}

.access-assignments-kpi-label {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.access-assignments-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}

.access-assignments-kpi-sub {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 34ch;
}

.access-assignments-box {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.access-assignments-box-head,
.access-assignments-builder-head,
.access-assignments-legacy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.access-assignments-box-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.access-assignments-box-sub {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 66ch;
}

.access-assignments-box-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.access-assignments-role-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.access-assignments-role-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.access-assignments-role-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--role-accent, var(--c-azure));
}

.access-assignments-role-card[data-role-tone="system"] {
  --role-accent: #0f9c95;
}

.access-assignments-role-card[data-role-tone="admin"] {
  --role-accent: var(--c-danger);
}

.access-assignments-role-card[data-role-tone="ops"] {
  --role-accent: var(--c-warn);
}

.access-assignments-role-card[data-role-tone="finance"] {
  --role-accent: #7c3aed;
}

.access-assignments-role-card:hover {
  border-color: color-mix(in srgb, var(--text-muted) 32%, var(--border) 68%);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.access-assignments-role-card.is-selected {
  border-color: color-mix(in srgb, var(--c-azure) 55%, var(--border) 45%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-azure) 12%, transparent 88%);
}

.access-assignments-role-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.access-assignments-role-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.access-assignments-role-card-count {
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.access-assignments-role-card-copy {
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.access-assignments-role-card-tags,
.access-assignments-perm-list,
.access-assignments-role-detail-perms,
.access-assignments-role-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.access-assignments-perm-chip,
.access-assignments-role-detail-perm {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.access-assignments-perm-chip-muted {
  background: transparent;
  border-style: dashed;
  color: var(--text-muted);
}

.access-assignments-role-detail {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.access-assignments-role-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.access-assignments-role-detail-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.access-assignments-role-detail-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure) 10%, var(--surface) 90%);
}

.access-assignments-role-detail-icon.tone-system {
  color: #0f9c95;
  background: color-mix(in srgb, #0f9c95 12%, var(--surface) 88%);
}

.access-assignments-role-detail-icon.tone-admin {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 10%, var(--surface) 90%);
}

.access-assignments-role-detail-icon.tone-ops {
  color: var(--c-warn);
  background: color-mix(in srgb, var(--c-warn) 10%, var(--surface) 90%);
}

.access-assignments-role-detail-icon.tone-finance {
  color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 10%, var(--surface) 90%);
}

.access-assignments-role-detail-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.access-assignments-role-detail-meta,
.access-assignments-role-detail-status,
.access-assignments-table-meta,
.access-assignments-principal-sub,
.access-assignments-source-chip,
.access-assignments-scope-line.is-muted,
.access-assignments-table-footer,
.access-assignments-legend {
  font-size: 11px;
  color: var(--text-muted);
}

.access-assignments-builder {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.access-assignments-form {
  display: grid;
  grid-template-columns: 180px minmax(0, 1.2fr) 180px 180px 220px auto;
  gap: 10px;
  align-items: end;
}

.access-assignments-field {
  min-width: 0;
}

.access-assignments-field-span-2 {
  grid-column: span 2;
}

.access-assignments-user-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.access-assignments-form-action {
  display: flex;
  align-items: flex-end;
}

.access-assignments-save-btn {
  width: 100%;
  justify-content: center;
  min-height: 36px;
}

.access-assignments-info-note {
  margin-bottom: 14px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 22%, var(--border) 78%);
  background: color-mix(in srgb, var(--c-azure) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--c-azure) 72%, var(--text) 28%);
  font-size: 11px;
  line-height: 1.55;
}

.access-assignments-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.access-assignments-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.access-assignments-table-wrap thead tr {
  background: var(--surface-2);
}

.access-assignments-table-wrap th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.access-assignments-table-wrap td {
  padding: 11px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.access-assignments-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.access-assignments-table-wrap tbody tr:hover td {
  background: var(--surface-2);
}

.access-assignments-principal-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.access-assignments-principal-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}

.access-assignments-principal-icon.group {
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure) 10%, transparent 90%);
}

.access-assignments-principal-icon.user {
  color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 10%, transparent 90%);
}

.access-assignments-principal-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.access-assignments-principal-sub,
.access-assignments-scope-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.access-assignments-role-pill,
.access-assignments-status-pill,
.access-assignments-scope-pill,
.access-assignments-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}

.access-assignments-pill-system {
  color: #0f9c95;
  background: color-mix(in srgb, #0f9c95 10%, transparent 90%);
}

.access-assignments-pill-admin {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 10%, transparent 90%);
}

.access-assignments-pill-ops {
  color: var(--c-warn);
  background: color-mix(in srgb, var(--c-warn) 12%, transparent 88%);
}

.access-assignments-pill-finance {
  color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 10%, transparent 90%);
}

.access-assignments-pill-viewer {
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure) 10%, transparent 90%);
}

.access-assignments-scope-pill,
.access-assignments-source-chip {
  background: var(--surface-3);
  color: var(--text-dim);
}

.access-assignments-status-good {
  color: var(--c-good);
  background: color-mix(in srgb, var(--c-good) 10%, transparent 90%);
}

.access-assignments-status-warn {
  color: var(--c-warn);
  background: color-mix(in srgb, var(--c-warn) 12%, transparent 88%);
}

.access-assignments-status-danger {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 12%, transparent 88%);
}

.access-assignments-status-info {
  color: var(--c-azure);
  background: color-mix(in srgb, var(--c-azure) 10%, transparent 90%);
}

.access-assignments-row-actions {
  display: flex;
  gap: 4px;
}

.access-assignments-icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.access-assignments-icon-btn:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}

.access-assignments-icon-btn.danger:hover {
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 20%, var(--border) 80%);
  background: color-mix(in srgb, var(--c-danger) 7%, var(--surface) 93%);
}

.access-assignments-scope-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.access-assignments-scope-line {
  font-size: 11px;
  color: var(--text);
}

.access-assignments-assignment-mix {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-dim);
}

.access-assignments-source-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
}

.access-assignments-source-dot.group {
  background: var(--c-azure);
}

.access-assignments-source-dot.direct {
  background: #7c3aed;
}

.access-assignments-assignment-sep {
  color: var(--text-muted);
}

.access-assignments-legend,
.access-assignments-table-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
}

.access-assignments-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.access-assignments-legend-total {
  margin-left: auto;
}

.access-assignments-legacy-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.access-assignments-legacy-tools .authi {
  min-width: 260px;
}

.role-catalog-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.role-catalog-page-head-copy {
  max-width: 700px;
}

.role-catalog-page-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--c-azure);
  margin-bottom: 6px;
}

.role-catalog-page-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

.role-catalog-page-sub {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 4px;
}

.role-catalog-page-controls {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.role-catalog-page-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.role-catalog-page-control label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.role-catalog-page-search-control {
  min-width: 260px;
}

.role-catalog-info-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,120,212,.18);
  background: rgba(0,120,212,.08);
  color: var(--c-azure);
  font-size: 11.5px;
  line-height: 1.55;
  margin-bottom: 12px;
}

.role-catalog-scope-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(0,120,212,.09);
  border: 1px solid rgba(0,120,212,.18);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.role-catalog-scope-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--c-azure);
  box-shadow: 0 0 0 5px rgba(0,120,212,.15);
  flex-shrink: 0;
}

.role-catalog-scope-main {
  min-width: 0;
}

.role-catalog-scope-title {
  font-family: var(--mono-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-azure);
}

.role-catalog-scope-sub,
.role-catalog-scope-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.role-catalog-scope-divider {
  width: 1px;
  height: 42px;
  background: rgba(0,120,212,.16);
  flex-shrink: 0;
}

.role-catalog-scope-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.role-catalog-scope-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.role-catalog-scope-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.role-catalog-scope-note {
  margin-left: auto;
  max-width: 270px;
  text-align: right;
}

.role-catalog-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}

.role-catalog-kpi-cell {
  padding: 16px;
  border-right: 1px solid var(--border);
  position: relative;
}

.role-catalog-kpi-cell:last-child {
  border-right: none;
}

.role-catalog-kpi-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

.role-catalog-kpi-cell[data-tone="info"]::before { background: var(--c-azure); }
.role-catalog-kpi-cell[data-tone="good"]::before { background: var(--green); }
.role-catalog-kpi-cell[data-tone="accent"]::before { background: var(--purple); }
.role-catalog-kpi-cell[data-tone="warn"]::before { background: var(--orange); }

.role-catalog-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.role-catalog-kpi-value {
  font-size: 23px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.role-catalog-kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 4px;
}

.role-catalog-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .95fr);
  gap: 12px;
}

.role-catalog-side-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-catalog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.role-catalog-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.role-catalog-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.role-catalog-card-sub,
.role-catalog-card-meta,
.role-catalog-table-meta {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.role-catalog-list {
  display: grid;
  gap: 10px;
}

.role-catalog-role-card {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
  position: relative;
}

.role-catalog-role-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 10px 0 0 10px;
  background: var(--c-azure);
}

.role-catalog-role-card[data-role-tone="system"]::before { background: #0891b2; }
.role-catalog-role-card[data-role-tone="admin"]::before { background: var(--red); }
.role-catalog-role-card[data-role-tone="ops"]::before { background: var(--green); }
.role-catalog-role-card[data-role-tone="finance"]::before { background: var(--purple); }

.role-catalog-role-card:hover,
.role-catalog-role-card.is-selected {
  border-color: rgba(0,120,212,.28);
  box-shadow: 0 0 0 3px rgba(0,120,212,.08);
}

.role-catalog-role-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.role-catalog-role-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.role-catalog-role-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.45;
}

.role-catalog-role-card-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}

.role-catalog-role-card-meta,
.role-catalog-permission-chip-row,
.role-catalog-detail-actions,
.role-catalog-editor-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.role-catalog-role-card-meta {
  margin-top: 10px;
}

.role-catalog-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.role-catalog-role-pill-neutral {
  background: var(--surface-3);
  color: var(--text-dim);
}

.role-catalog-role-pill-sensitive {
  background: rgba(217,119,6,.12);
  color: var(--orange);
}

.role-catalog-detail-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-catalog-detail-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.role-catalog-detail-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--c-azure);
  background: rgba(0,120,212,.1);
}

.role-catalog-detail-icon.tone-system { background: rgba(8,145,178,.12); color: #0891b2; }
.role-catalog-detail-icon.tone-admin { background: rgba(220,38,38,.1); color: var(--red); }
.role-catalog-detail-icon.tone-ops { background: rgba(22,163,74,.1); color: var(--green); }
.role-catalog-detail-icon.tone-finance { background: rgba(124,58,237,.1); color: var(--purple); }

.role-catalog-detail-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.role-catalog-detail-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

.role-catalog-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.role-catalog-detail-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: var(--surface-2);
}

.role-catalog-detail-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.role-catalog-detail-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--text-dim);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.role-catalog-detail-line:last-child {
  border-bottom: none;
}

.role-catalog-detail-line strong {
  color: var(--text);
  text-align: right;
}

.role-catalog-detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.role-catalog-detail-list-item {
  font-size: 11px;
  color: var(--text-dim);
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.role-catalog-permission-groups {
  display: grid;
  gap: 10px;
}

.role-catalog-permission-group {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.role-catalog-permission-group:first-child {
  border-top: none;
  padding-top: 0;
}

.role-catalog-permission-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.role-catalog-permission-chip {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 10.5px;
}

.role-catalog-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.role-catalog-editor-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.role-catalog-editor-field-span-2 {
  grid-column: span 2;
}

.role-catalog-editor-field label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.role-catalog-textarea {
  min-height: 90px;
  resize: vertical;
  padding: 10px 12px;
}

.role-catalog-editor-note,
.role-catalog-editor-footer-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.role-catalog-editor-note {
  margin: 12px 0;
}

.role-catalog-permission-selector {
  display: grid;
  gap: 10px;
}

.role-catalog-permission-selector-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface-2);
}

.role-catalog-permission-selector-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.role-catalog-permission-selector-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.role-catalog-permission-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  cursor: pointer;
}

.role-catalog-permission-option strong {
  display: block;
  font-size: 11px;
  color: var(--text);
}

.role-catalog-permission-option small {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.role-catalog-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.role-catalog-usage-table-wrap {
  overflow-x: auto;
}

.role-catalog-empty {
  padding: 24px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 1180px) {
  .role-catalog-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .role-catalog-main-grid,
  .role-catalog-detail-grid,
  .role-catalog-permission-selector-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .role-catalog-kpi-row,
  .role-catalog-editor-grid {
    grid-template-columns: 1fr;
  }

  .role-catalog-editor-field-span-2 {
    grid-column: span 1;
  }

  .role-catalog-scope-banner {
    flex-wrap: wrap;
  }

  .role-catalog-scope-note {
    margin-left: 0;
    max-width: none;
    text-align: left;
  }
}

.user-list-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.subscription-admin-page {
  padding-top: 10px;
  padding-bottom: 24px;
}

.subscription-admin-head {
  margin-bottom: 12px;
}

.subscription-admin-filter-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  min-width: 0;
}

.subscription-admin-filter-row {
  justify-content: flex-start;
}

.subscription-admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.subscription-admin-grid > .user-list-card,
.subscription-admin-detail-card,
.subscription-admin-shell,
.subscription-admin-edit-main,
.subscription-admin-sidebar,
.subscription-admin-detail-grid > *,
.subscription-admin-field,
.subscription-admin-row-copy {
  min-width: 0;
}

.subscription-admin-table-wrap {
  overflow-x: hidden;
}

.subscription-admin-table-wrap table {
  width: 100%;
  table-layout: fixed;
}

.subscription-admin-detail-card {
  display: none;
}

.subscription-admin-detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.subscription-admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  min-width: 0;
}

.subscription-admin-field .authi,
.subscription-admin-field input,
.subscription-admin-field select,
.subscription-admin-field textarea,
.subscription-admin-page .authi {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.subscription-admin-field label,
.subscription-admin-check {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.subscription-admin-field-wide {
  grid-column: 1 / -1;
}

.subscription-admin-textarea {
  min-height: 74px;
  resize: vertical;
}

.subscription-admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  text-transform: none;
}

.subscription-admin-rg-runtime-wrap {
  display: grid;
  gap: 10px;
}

.subscription-admin-rg-runtime-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.8fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-2);
}

.subscription-admin-rg-name {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.subscription-admin-rg-inherited,
.subscription-admin-rg-empty {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
}

.subscription-admin-rg-runtime-controls {
  display: grid;
  gap: 8px;
}

.subscription-admin-rg-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
}

.subscription-admin-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.subscription-admin-shell.is-editing {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: start;
}

.subscription-admin-sidebar {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
}

.subscription-admin-sidebar-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.subscription-admin-sidebar-list {
  max-height: calc(100vh - 290px);
  overflow: auto;
}

.subscription-admin-sidebar-row {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.subscription-admin-sidebar-row:hover,
.subscription-admin-sidebar-row.is-selected {
  background: rgba(15, 156, 149, .1);
}

.subscription-admin-sidebar-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.subscription-admin-sidebar-id,
.subscription-admin-id-text {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.subscription-admin-edit-main {
  width: 100%;
  min-width: 0;
}

.subscription-admin-edit-form {
  min-width: 0;
}

.subscription-admin-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.subscription-admin-edit-actions,
.subscription-admin-id-block {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.subscription-admin-id-block {
  justify-content: flex-end;
  max-width: 100%;
}

.subscription-admin-id-line {
  align-items: flex-start;
  gap: 12px;
}

.subscription-admin-copy-btn {
  flex: 0 0 auto;
  opacity: 1;
}

.subscription-admin-row .user-list-user-name,
.subscription-admin-row .user-list-user-sub,
.subscription-admin-detail-card strong,
.subscription-admin-detail-card code,
.subscription-admin-edit-main strong,
.subscription-admin-edit-main code {
  max-width: 100%;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .subscription-admin-shell.is-editing {
    grid-template-columns: 1fr;
  }

  .subscription-admin-sidebar-list {
    max-height: 220px;
  }

  .subscription-admin-detail-grid {
    grid-template-columns: 1fr;
  }

  .subscription-admin-rg-runtime-row,
  .subscription-admin-rg-edit-grid {
    grid-template-columns: 1fr;
  }
}

.user-list-page-head-copy {
  max-width: 780px;
}

.user-list-page-eyebrow {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #0f9c95;
}

.user-list-page-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.15;
}

.user-list-page-sub,
.user-list-card-sub,
.user-list-inline-note,
.user-list-card-meta,
.user-list-user-sub,
.user-list-scope-stack-sub {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.user-list-page-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.user-list-page-control {
  min-width: 190px;
}

.user-list-page-control-search {
  min-width: 280px;
}

.user-list-page-control label,
.user-list-whatif-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.user-list-scope-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #0f9c95 24%, var(--border) 76%);
  background: linear-gradient(135deg, color-mix(in srgb, #0f9c95 10%, var(--surface) 90%), color-mix(in srgb, var(--surface-2) 72%, var(--surface) 28%));
}

.user-list-scope-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0f9c95;
  box-shadow: 0 0 0 4px color-mix(in srgb, #0f9c95 18%, transparent 82%);
  flex: 0 0 auto;
  margin-top: 6px;
}

.user-list-scope-main {
  min-width: 0;
  flex: 1 1 260px;
}

.user-list-scope-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  color: #0f9c95;
  line-height: 1.2;
}

.user-list-scope-sub {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: color-mix(in srgb, #0f9c95 74%, var(--text-muted) 26%);
  max-width: 48ch;
}

.user-list-scope-divider {
  width: 1px;
  align-self: stretch;
  min-height: 34px;
  background: color-mix(in srgb, #0f9c95 20%, transparent 80%);
}

.user-list-scope-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 86px;
}

.user-list-scope-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.user-list-scope-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.user-list-scope-note {
  margin-left: auto;
  max-width: 36ch;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.user-list-inline-note {
  margin-bottom: 14px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c-warn) 22%, var(--border) 78%);
  background: color-mix(in srgb, var(--c-warn) 8%, var(--surface) 92%);
}

.user-list-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.user-list-kpi-cell {
  position: relative;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
}

.user-list-kpi-cell:last-child {
  border-right: 0;
}

.user-list-kpi-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--user-kpi-accent, #0f9c95);
}

.user-list-kpi-cell[data-tone="good"] { --user-kpi-accent: var(--c-good); }
.user-list-kpi-cell[data-tone="warn"] { --user-kpi-accent: var(--c-warn); }
.user-list-kpi-cell[data-tone="accent"] { --user-kpi-accent: var(--c-azure); }
.user-list-kpi-cell[data-tone="info"] { --user-kpi-accent: #0f9c95; }

.user-list-kpi-label {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.user-list-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}

.user-list-kpi-sub {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 32ch;
}

.user-list-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr);
  gap: 14px;
  margin-bottom: 14px;
}

.user-list-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.user-list-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.user-list-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.user-list-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.user-list-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.user-list-table-wrap thead tr {
  background: var(--surface-2);
}

.user-list-table-wrap th,
.user-list-table-wrap td {
  padding: 11px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.user-list-table-wrap th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.user-list-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.user-list-table-wrap tbody tr:hover td,
.user-list-row.is-selected td {
  background: var(--surface-2);
}

.user-list-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.user-list-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
  color: #0f9c95;
  background: color-mix(in srgb, #0f9c95 10%, transparent 90%);
}

.user-list-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.user-list-chip-row,
.user-list-detail-chip-row,
.user-list-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.user-list-inline-chip,
.user-list-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}

.user-list-inline-chip { background: var(--surface-3); color: var(--text-dim); }
.user-list-badge.tone-good { color: var(--c-good); background: color-mix(in srgb, var(--c-good) 10%, transparent 90%); }
.user-list-badge.tone-warn { color: var(--c-warn); background: color-mix(in srgb, var(--c-warn) 12%, transparent 88%); }
.user-list-badge.tone-danger { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 12%, transparent 88%); }
.user-list-badge.tone-accent { color: var(--c-azure); background: color-mix(in srgb, var(--c-azure) 10%, transparent 90%); }
.user-list-badge.tone-info { color: #0f9c95; background: color-mix(in srgb, #0f9c95 10%, transparent 90%); }

.user-list-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.user-list-whatif-form {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.user-list-whatif-actions {
  display: flex;
  justify-content: flex-end;
}

.user-list-empty,
.user-list-detail-empty {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-muted);
  line-height: 1.55;
}

.user-whatif-summary-head,
.user-list-detail-grid,
.user-whatif-grid {
  display: grid;
  gap: 12px;
}

.user-whatif-summary-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  margin-bottom: 12px;
}

.user-whatif-summary-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.user-whatif-summary-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.user-whatif-grid,
.user-list-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-whatif-section,
.user-list-detail-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.user-whatif-section-title,
.user-list-detail-card-title {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.user-whatif-line,
.user-list-detail-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.user-whatif-line:last-child,
.user-list-detail-line:last-child {
  border-bottom: 0;
}

.user-whatif-list,
.user-list-detail-list {
  display: grid;
  gap: 8px;
}

.user-whatif-list-item,
.user-list-detail-list-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  line-height: 1.45;
}

@media (max-width: 1200px) {
  .user-list-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .access-assignments-role-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .access-assignments-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .access-assignments-field-span-2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .user-list-main-grid,
  .user-whatif-grid,
  .user-list-detail-grid {
    grid-template-columns: 1fr;
  }

  .user-list-kpi-row,
  .access-assignments-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .access-assignments-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .access-assignments-user-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .user-list-page-control,
  .user-list-page-controls,
  .user-list-page-control-search,
  .user-list-scope-note {
    width: 100%;
    min-width: 100%;
    margin-left: 0;
    max-width: none;
  }

  .user-list-kpi-row,
  .access-assignments-page-control,
  .access-assignments-page-controls,
  .access-assignments-legacy-tools,
  .access-assignments-legacy-tools .authi {
    width: 100%;
    min-width: 100%;
  }

  .access-assignments-role-grid,
  .access-assignments-kpi-row,
  .access-assignments-form {
    grid-template-columns: 1fr;
  }

  .access-assignments-scope-note {
    margin-left: 0;
    max-width: none;
  }
}

.computeconsumption-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.computeconsumption-head-copy {
  max-width: 720px;
}

.computeconsumption-header-tools {
  justify-content: flex-start;
  flex: 1 1 100%;
  margin-top: 14px;
}

.computeconsumption-header-tools .costx-field {
  min-width: 0;
  flex: 0 0 auto;
}

.computeconsumption-search-field {
  min-width: 240px;
}

.computeconsumption-search-field .gsw {
  width: 100%;
  min-width: 0;
}

.computeconsumption-search-field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 5px 4px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  outline: none;
}

.computeconsumption-search-field input::placeholder {
  color: var(--text-muted);
}

#computeConsumptionSearchClear {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 10px 0 6px;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

#computeConsumptionSearchClear:hover {
  color: var(--text);
}

.computeconsumption-refresh-btn {
  min-width: 112px;
}

.computeconsumption-mtd-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) auto minmax(240px, .9fr);
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 18%, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-azure-bg) 68%, var(--surface) 32%) 0%, color-mix(in srgb, var(--surface-2) 88%, transparent) 100%);
}

.computeconsumption-mtd-pill {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-azure) 16%, var(--border));
}

.computeconsumption-mtd-pill-label,
.computeconsumption-mtd-stat-label,
.computeconsumption-kpi-label,
.computeconsumption-state-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.computeconsumption-mtd-pill-value {
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--c-azure);
}

.computeconsumption-mtd-copy {
  min-width: 0;
}

.computeconsumption-mtd-period {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}

.computeconsumption-mtd-subline {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

.computeconsumption-mtd-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
}

.computeconsumption-mtd-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.computeconsumption-mtd-stat-value,
.computeconsumption-kpi-value,
.computeconsumption-state-value {
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}

.computeconsumption-mtd-note,
.computeconsumption-kpi-sub,
.computeconsumption-state-sub {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}

.computeconsumption-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.computeconsumption-kpi-card {
  position: relative;
  padding: 16px 18px;
  overflow: hidden;
}

.computeconsumption-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-azure);
}

.computeconsumption-kpi-card:nth-child(2)::before {
  background: var(--green);
}

.computeconsumption-kpi-card:nth-child(3)::before {
  background: var(--orange);
}

.computeconsumption-kpi-card:nth-child(4)::before {
  background: #7c3aed;
}

.computeconsumption-insights-grid,
.computeconsumption-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.computeconsumption-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.computeconsumption-trend-wrap {
  margin-top: 4px;
}

.computeconsumption-trend-chart-shell {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 94%, transparent), var(--surface));
  overflow: hidden;
}

.computeconsumption-trend-chart-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 10px 8px;
}

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

.computeconsumption-state-item {
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 65%, var(--surface-2) 35%), var(--surface));
}

.computeconsumption-table-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 12px;
}

.computeconsumption-table-head .anl-bs {
  margin-bottom: 0;
}

.computeconsumption-composition-panel,
.computeconsumption-table-panel,
.computeconsumption-support-grid .anl-box {
  margin-top: 0;
}

.computeconsumption-table-wrap,
.computeconsumption-mini-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.computeconsumption-distribution-wrap {
  overflow: visible;
}

.computeconsumption-support-grid {
  margin-top: 0;
}

.computeconsumption-mini-wrap table {
  width: 100%;
  min-width: 420px;
}

.computeconsumption-mini-wrap td,
.computeconsumption-mini-wrap th {
  white-space: nowrap;
}

.computeconsumption-distribution-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.computeconsumption-distribution-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, var(--surface-2) 30%) 0%, color-mix(in srgb, var(--surface-2) 85%, transparent 15%) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.computeconsumption-distribution-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.computeconsumption-distribution-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.computeconsumption-distribution-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}

.computeconsumption-distribution-meta {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.computeconsumption-distribution-metrics {
  display: grid;
  grid-template-columns: auto auto;
  gap: 12px;
  align-items: baseline;
  justify-items: end;
  text-align: right;
  white-space: nowrap;
}

.computeconsumption-distribution-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.computeconsumption-distribution-share {
  min-width: 48px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.computeconsumption-distribution-bar {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-3) 78%, var(--border) 22%);
}

.computeconsumption-distribution-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-azure) 72%, white 28%) 0%, var(--c-azure) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.computeconsumption-breakdown-table {
  min-width: 1120px;
}

.computeconsumption-breakdown-table thead th {
  padding-top: 11px;
  padding-bottom: 11px;
}

.computeconsumption-breakdown-row td {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
}

.computeconsumption-breakdown-row:hover {
  background: color-mix(in srgb, var(--surface-2) 84%, var(--surface) 16%);
}

.computeconsumption-breakdown-row.is-open {
  background: color-mix(in srgb, var(--c-azure-bg) 52%, var(--surface) 48%);
}

.computeconsumption-expander-cell {
  width: 52px;
  padding-right: 0;
}

.computeconsumption-expander-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface) 80%, var(--surface-2) 20%);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.computeconsumption-breakdown-row:hover .computeconsumption-expander-btn,
.computeconsumption-expander-btn:focus-visible {
  border-color: color-mix(in srgb, var(--c-azure) 45%, var(--border) 55%);
  color: var(--c-azure);
  outline: none;
}

.computeconsumption-entity-cell {
  gap: 2px;
}

.computeconsumption-entity-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.computeconsumption-entity-subtitle {
  font-size: 10.5px;
  color: var(--text-dim);
}

.computeconsumption-cost-value {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.computeconsumption-share-cell {
  display: inline-grid;
  justify-items: end;
  gap: 5px;
  min-width: 108px;
}

.computeconsumption-share-value {
  font-size: 13px;
  font-weight: 700;
}

.computeconsumption-share-bar {
  width: 88px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-3) 82%, var(--border) 18%);
  overflow: hidden;
}

.computeconsumption-share-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-azure) 78%, white 22%) 0%, var(--c-azure) 100%);
  opacity: .9;
}

.computeconsumption-delta-muted {
  display: inline-block;
  font-size: 10.5px;
  color: var(--text-dim);
}

.computeconsumption-breakdown-table .networking-stack-cell {
  gap: 2px;
}

.computeconsumption-breakdown-table .networking-stack-primary {
  line-height: 1.25;
}

.computeconsumption-breakdown-table .networking-stack-secondary {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .computeconsumption-distribution-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .computeconsumption-distribution-metrics {
    justify-items: start;
    text-align: left;
  }

  .computeconsumption-distribution-label {
    white-space: normal;
  }
}

.computeconsumption-breakdown-table .networking-detail-row td {
  background: color-mix(in srgb, var(--surface-2) 82%, var(--surface) 18%);
}

.computeconsumption-breakdown-table .networking-detail-shell {
  padding: 12px 16px;
}

.showback-controls {
  grid-template-columns: 180px auto auto minmax(220px, 1fr);
}

.showback-period-select {
  height: var(--control-height);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  padding: 0 34px 0 10px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23bbb'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.showback-period-select:focus {
  border-color: var(--c-azure);
  background-color: var(--surface);
}

.admin-select-wrap .showback-period-select {
  background-image: none;
}

.showback-action-btn {
  height: var(--control-height);
  align-self: end;
  justify-self: start;
  justify-content: center;
  white-space: nowrap;
  min-width: 132px;
}

.showback-search-field {
  align-self: end;
}

.costx-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px
}

.costx-kpi {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px 12px
}

.costx-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted)
}

.costx-kpi-value {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -.03em;
  color: var(--text);
  margin-top: 3px
}

.showback-kpi-trend {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
  min-height: 16px;
  white-space: normal;
  word-break: break-word;
}

.showback-kpi-trend.good {
  color: var(--green);
}

.showback-kpi-trend.bad {
  color: var(--red);
}

.showback-kpi-trend.neutral {
  color: var(--text-muted);
}

.showbackv2-header-tools {
  justify-content: flex-start;
  flex: 1 1 100%;
  margin-top: 14px;
}

.showbackv2-analysis-grid {
  align-items: stretch;
}

.showbackv2-filterbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}

.showbackv2-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.showbackv2-toggle input {
  margin: 0;
}

.showbackv2-stack {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  min-width: 0;
}

.showbackv2-tree-panel {
  min-width: 0;
}

.showbackv2-panel-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.showbackv2-tree-wrap {
  min-height: 0;
  overflow: visible;
}

.showbackv2-tree-root,
.showbackv2-tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.showbackv2-tree-children {
  position: relative;
  margin-left: 22px;
}

.showbackv2-tree-children::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}

.showbackv2-tree-item {
  position: relative;
}

.showbackv2-tree-item.has-parent::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 22px;
  width: 14px;
  height: 1px;
  background: var(--border);
}

.showbackv2-tree-item:last-child > .showbackv2-tree-children::before {
  bottom: calc(100% - 22px);
}

.showbackv2-tree-node {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 6px 10px;
  align-items: start;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  padding: 10px 2px 10px 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.showbackv2-tree-node:hover {
  background: var(--surface-2);
}

.showbackv2-tree-node.is-selected {
  background: var(--surface-2);
  border-color: var(--border);
}

.showbackv2-tree-toggle {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  margin-top: 4px;
}

.showbackv2-tree-toggle.is-leaf {
  visibility: hidden;
}

.showbackv2-tree-copy {
  grid-column: 2;
  min-width: 0;
}

.showbackv2-tree-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.showbackv2-tree-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.showbackv2-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
}

.showbackv2-level.platform {
  color: var(--c-azure);
  background: var(--c-azure-bg);
  border-color: rgba(0, 120, 212, .35);
}

.showbackv2-level.tenant {
  color: #2563eb;
  background: rgba(37, 99, 235, .08);
  border-color: rgba(37, 99, 235, .25);
}

.showbackv2-level.environment {
  color: #0f766e;
  background: rgba(15, 118, 110, .08);
  border-color: rgba(15, 118, 110, .25);
}

.showbackv2-level.customer {
  color: var(--green);
  background: rgba(22, 163, 74, .08);
  border-color: rgba(22, 163, 74, .25);
}

.showbackv2-tree-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.showbackv2-tree-values {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
  text-align: left;
}

.showbackv2-tree-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.showbackv2-tree-share {
  font-size: 11px;
  color: var(--text-muted);
}

.showbackv2-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.showbackv2-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.showbackv2-table th,
.showbackv2-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  white-space: nowrap;
}

.showbackv2-table th {
  position: sticky;
  top: 0;
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 1;
}

.showbackv2-table tbody tr:hover {
  background: var(--surface-2);
}

.showbackv2-table tbody tr[data-showback-select-key] {
  cursor: pointer;
}

.showbackv2-table tbody tr.is-selected {
  background: rgba(0, 120, 212, .06);
}

.showbackv2-entity-cell {
  min-width: 260px;
  white-space: normal;
}

.showbackv2-entity-button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.showbackv2-entity-branch {
  width: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  margin-top: 2px;
}

.showbackv2-entity-copy {
  min-width: 0;
}

.showbackv2-entity-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.showbackv2-entity-name > :first-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showbackv2-entity-name .showback-link-btn {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showbackv2-entity-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.showbackv2-level-cell {
  white-space: nowrap;
}

.showbackv2-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.showbackv2-status.invoice_ready {
  color: var(--green);
  border-color: rgba(22, 163, 74, .3);
  background: rgba(22, 163, 74, .08);
}

.showbackv2-status.needs_review {
  color: var(--orange);
  border-color: rgba(217, 119, 6, .35);
  background: rgba(217, 119, 6, .08);
}

.showbackv2-status.excluded {
  color: #b7791f;
  border-color: rgba(183, 121, 31, .35);
  background: rgba(183, 121, 31, .08);
}

.showbackv2-status.overview {
  color: #2563eb;
  border-color: rgba(37, 99, 235, .25);
  background: rgba(37, 99, 235, .08);
}

.showbackv2-action-btn {
  min-width: 88px;
  justify-content: center;
}

.showbackv2-list {
  display: grid;
  gap: 10px;
}

.showbackv2-list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.showbackv2-list-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.showbackv2-list-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.showbackv2-list-value {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.showbackv2-trend-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 220px;
}

.showbackv2-trend-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: 220px;
}

.showbackv2-trend-bar-fill {
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, rgba(0, 120, 212, .9) 0%, rgba(22, 163, 74, .75) 100%);
  min-height: 12px;
}

.showbackv2-trend-bar-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.showbackv2-trend-bar-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.showbackv2-waterfall {
  display: grid;
  gap: 10px;
}

.showbackv2-waterfall-step {
  display: grid;
  grid-template-columns: minmax(110px, 150px) 1fr auto;
  gap: 12px;
  align-items: center;
}

.showbackv2-waterfall-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.showbackv2-waterfall-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}

.showbackv2-waterfall-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}

.showbackv2-waterfall-bar.is-attributed > span {
  background: rgba(0, 120, 212, .85);
}

.showbackv2-waterfall-bar.is-excluded > span {
  background: rgba(217, 119, 6, .75);
}

.showbackv2-waterfall-bar.is-billable > span {
  background: rgba(22, 163, 74, .78);
}

.showbackv2-waterfall-bar.is-unallocated > span {
  background: rgba(148, 163, 184, .68);
}

.showbackv2-waterfall-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.showbackv2-detail-shell {
  display: grid;
  gap: 14px;
}

.showbackv2-investigation-modal .mb {
  padding-top: 20px;
}

.showbackv2-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.showbackv2-detail-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.showbackv2-detail-open-btn {
  min-width: 148px;
  justify-content: center;
}

.showbackv2-detail-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.showbackv2-detail-subtitle {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.showbackv2-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.showbackv2-detail-stat {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.showbackv2-detail-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.showbackv2-detail-stat-value {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.showbackv2-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.showbackv2-detail-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.showbackv2-detail-card h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.showbackv2-detail-card p {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.showbackv2-empty {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.explorerv2-shell {
  display: flex;
  flex-direction: column;
  gap: var(--ledger-card-grid-gap, 14px);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.ledger-analytical-page {
  --ledger-page-top-chrome-to-kpi-gap: 28px;
  --ledger-kpi-row-to-section-gap: 18px;
  --ledger-section-gap: 18px;
  --ledger-card-grid-gap: 14px;
  --ledger-content-gutter-width: 20px;
}

.cost-explorer-page {
  --cost-section-gap: var(--ledger-section-gap);
  --cost-page-bg: var(--surface);
  --cost-sticky-mask-bg: var(--cost-page-bg);
  --ce-filter-y-gap: 10px;
  gap: 0;
  padding-top: 0;
  background: var(--cost-page-bg);
}

.cost-explorer-page > section,
.cost-explorer-section,
.cost-explorer-page .ce-overview,
.cost-explorer-page .insights-panel,
.cost-explorer-page .explorer-breakdown,
.cost-explorer-page > .explorerv2-table-panel {
  margin-top: 0 !important;
  margin-bottom: var(--ledger-section-gap);
}

.ledger-section-reveal {
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform;
}

#appRoot .tp.active .ledger-section-reveal {
  animation: ledgerSectionReveal 420ms ease-out both;
  animation-delay: calc(var(--reveal-index, 0) * 80ms);
}

@keyframes ledgerSectionReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ledger-section-reveal {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: none !important;
    will-change: auto;
  }
}

.explorerv2-page-copy {
  flex: 1 1 100%;
  min-width: 0;
}

.explorerv2-page-section-label {
  margin-bottom: 8px;
}

.cost-explorer-page .page-eyebrow,
.cost-explorer-title-eyebrow,
#panel-costs .explorerv2-page-section-label {
  margin-top: 5px;
}

#panel-costs .explorerv2-page-section-label {
  font-size: 13px;
  color: var(--green, #16a34a);
  font-weight: 800;
  letter-spacing: .08em;
}

.explorerv2-page-sub {
  margin-top: 0;
}

.ledger-command-chrome {
  --ce-cmd-shell-bg: var(--cost-page-bg, var(--surface));
  --ce-cmd-surface: var(--surface);
  --ce-cmd-surface-2: var(--surface-2);
  --ce-cmd-border: var(--border);
  --ce-cmd-text: var(--text);
  --ce-cmd-text-dim: var(--text-dim);
  --ce-cmd-text-muted: var(--text-muted);
  --ce-cmd-green: var(--green);
  --ce-cmd-green-light: rgba(22,163,74,.10);
  --ce-command-accent: var(--green);
  --ce-command-accent-soft: rgba(22,163,74,.05);
  --ce-command-accent-soft-alt: rgba(22,163,74,.03);
  --ce-command-accent-glow: rgba(22,163,74,.10);
  --ce-command-accent-shimmer: rgba(22,163,74,.08);
  --ce-command-accent-pill: rgba(22,163,74,.10);
  --ce-command-accent-pill-border: rgba(22,163,74,.22);
  --ce-command-accent-ring: rgba(22,163,74,.18);
  --ce-command-accent-ring-soft: rgba(22,163,74,.06);
  --ce-command-accent-ring-strong: rgba(22,163,74,.20);
  --ce-command-accent-ring-faint: rgba(22,163,74,.05);
  --ce-cmd-control-hover-bg: color-mix(in srgb, var(--green) 8%, var(--surface-2) 92%);
  --ce-cmd-control-hover-border: color-mix(in srgb, var(--green) 45%, var(--border) 55%);
  --ce-cmd-control-focus-ring: color-mix(in srgb, var(--green) 20%, transparent);
  --ce-control-height: 44px;
  --ce-command-header-height: 106px;
  --ce-command-bar-height: 72px;
  --ce-header-offset: calc(var(--ledger-sticky-top, 0px) + var(--ce-command-header-height, 106px));
  position: -webkit-sticky;
  position: sticky;
  top: var(--ledger-sticky-top, 0px);
  z-index: var(--z-page-sticky, 80);
  display: block;
  background: var(--ce-cmd-shell-bg);
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  border-radius: 14px;
  align-self: stretch;
  margin: 0;
}

.ledger-command-chrome:has(.cmd-ai-assist-btn:hover),
.ledger-command-chrome:has(.cmd-ai-assist-btn:focus-visible),
.ledger-command-chrome:has(.cmd-ai-assist-btn:active),
.ledger-command-chrome:has(.cmd-ai-assist-btn.is-active) {
  --ce-command-accent: #8b5cf6;
  --ce-command-accent-soft: rgba(139,92,246,.075);
  --ce-command-accent-soft-alt: rgba(139,92,246,.045);
  --ce-command-accent-glow: rgba(139,92,246,.18);
  --ce-command-accent-shimmer: rgba(139,92,246,.18);
  --ce-command-accent-pill: rgba(139,92,246,.13);
  --ce-command-accent-pill-border: rgba(139,92,246,.32);
  --ce-command-accent-ring: rgba(139,92,246,.30);
  --ce-command-accent-ring-soft: rgba(139,92,246,.11);
  --ce-command-accent-ring-strong: rgba(139,92,246,.36);
  --ce-command-accent-ring-faint: rgba(139,92,246,.09);
}

.ledger-command-chrome::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: var(--ce-cmd-shell-bg);
  z-index: 0;
  pointer-events: none;
}

.ledger-command-chrome::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--ledger-sticky-top, 0px));
  height: var(--ledger-sticky-top, 0px);
  background: var(--cost-sticky-mask-bg, var(--cost-page-bg, var(--surface)));
  z-index: 0;
  pointer-events: none;
}

.ledger-command-chrome .cmd {
  position: relative;
  z-index: 1;
  background:var(--ce-cmd-surface);border:1px solid var(--ce-cmd-border);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 32px -12px var(--ce-command-accent-glow);overflow:visible;width:100%;max-width:100%;margin:0
}

.ledger-command-chrome .ce-hero-card {
  transition: box-shadow .24s ease, border-color .24s ease, background .24s ease;
}

.ledger-command-chrome .ce-hero-card.is-ai-expanded {
  border-color: color-mix(in srgb, var(--ce-cmd-border) 60%, #8b5cf6 40%);
  background: var(--ce-cmd-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 10px 30px -22px rgba(139,92,246,.24);
}

.ledger-command-chrome .ce-hero-card.is-ai-expanded {
  isolation: isolate;
}

.ledger-command-chrome .ce-hero-card.is-ai-expanded::before {
  content: none;
}

@keyframes ceAiHeroSweep {
  0% { background-position: -110% 0; }
  55%, 100% { background-position: 110% 0; }
}

.ledger-command-chrome .ce-hero-card.is-ai-expanded > * {
  position: relative;
  z-index: 1;
}

.ledger-command-chrome .ce-hero-card.is-ai-expanded .cmd-top {
  border-bottom-color: transparent;
  background: transparent;
  animation: none;
}

.ledger-command-chrome .ce-hero-card.is-ai-expanded .cmd-top::after {
  opacity: 0;
  animation: none;
}

.ledger-command-chrome .ce-hero-card.is-ai-expanded .cmd-bar {
  border-top: 1px solid color-mix(in srgb, var(--ce-cmd-border) 60%, #8b5cf6 40%);
  background: transparent;
}

.ledger-command-chrome .ce-hero-card.is-ai-expanded .cmd-fresh-dot,
.ledger-command-chrome .ce-hero-card.is-ai-expanded .cmd-eyebrow-dot {
  background: var(--ce-ai-purple, #8b5cf6);
  animation: none;
}

[data-theme="dark"] .ledger-command-chrome .ce-hero-card.is-ai-expanded {
  background: var(--ce-cmd-surface);
}

.ledger-command-chrome .cmd-top {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

.ledger-command-chrome .cmd-bar {
  border-radius: 0 0 14px 14px;
  position: relative;
  z-index: 10;
  overflow: visible;
}

.ledger-command-chrome .cmd-field {
  position: relative;
}

.ledger-command-chrome .cmd-top {
  display:flex;align-items:center;gap:18px;padding:18px 22px;border-bottom:1px solid var(--ce-cmd-border);background:linear-gradient(135deg,var(--ce-command-accent-soft) 0%,transparent 50%,var(--ce-command-accent-soft-alt) 100%);background-size:200% 200%;animation:cmdBannerShift 14s ease-in-out infinite;position:relative;overflow:hidden;transition:background .22s ease,box-shadow .22s ease
}

@keyframes cmdBannerShift {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.ledger-command-chrome .cmd-top::after {
  content:'';position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(110deg,transparent 0%,var(--ce-command-accent-shimmer) 50%,transparent 100%);animation:cmdShimmer 6s ease-in-out infinite;pointer-events:none
}

@keyframes cmdShimmer {0%{left:-30%}60%,100%{left:130%}}

.ledger-command-chrome .cmd-title-block,
.ledger-command-chrome .cmd-status {position:relative;z-index:1}

.ledger-command-chrome .cmd-title {
  font-size:34px;font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--text);display:inline-block
}

.ledger-command-chrome .cmd-fresh-dot {animation:cmdFreshPulse 1.8s ease-in-out infinite}

@keyframes cmdFreshPulse {0%,100%{box-shadow:0 0 0 2px var(--ce-command-accent-ring-strong);transform:scale(1)}50%{box-shadow:0 0 0 5px var(--ce-command-accent-ring-faint);transform:scale(1.15)}}

.ledger-command-chrome .cmd-eyebrow-dot {animation:cmdPulse 2.4s ease-in-out infinite}

.ledger-command-chrome .cmd-stat-val {transition:transform .3s cubic-bezier(.2,.8,.2,1),color .2s}

.ledger-command-chrome .cmd-stat:hover .cmd-stat-val {transform:translateY(-2px);color:var(--green)}

.ledger-command-chrome .cmd-title-block {flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}

.ledger-command-chrome .cmd-eyebrow {
  display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--ce-command-accent)
}

.ledger-command-chrome .cmd-eyebrow-dot {
  width:6px;height:6px;border-radius:50%;background:var(--ce-command-accent);box-shadow:0 0 0 3px var(--ce-command-accent-ring);animation:cmdPulse 2.4s ease-in-out infinite
}

@keyframes cmdPulse {0%,100%{box-shadow:0 0 0 3px var(--ce-command-accent-ring)}50%{box-shadow:0 0 0 5px var(--ce-command-accent-ring-soft)}}

.ledger-command-chrome .cmd-title-row {display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}

.ledger-command-chrome .cmd-title {font-size:34px;font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--ce-cmd-text);display:inline-block}

.ledger-command-chrome .cmd-title-tag {font-size:17px;font-weight:600;color:var(--ce-cmd-text-muted);letter-spacing:0;margin-left:7px}

.ledger-command-chrome .cmd-fresh {
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--ce-command-accent);background:var(--ce-command-accent-pill);border:1px solid var(--ce-command-accent-pill-border);padding:4px 10px;border-radius:999px;letter-spacing:.01em;align-self:center;white-space:nowrap
}

.ledger-command-chrome .cmd-fresh-dot {
  width:5px;height:5px;border-radius:50%;background:var(--ce-command-accent);box-shadow:0 0 0 2px var(--ce-command-accent-ring-strong);animation:cmdPulse 2.4s ease-in-out infinite
}

.ledger-command-chrome .cmd-divider {width:1px;height:18px;background:var(--ce-cmd-border);align-self:center}

.ledger-command-chrome .cmd-sub {font-size:12px;color:var(--ce-cmd-text-dim);line-height:1.45;max-width:420px}

.ledger-command-chrome .cmd-status {display:flex;align-items:center;gap:14px;flex-shrink:0}

.ledger-command-chrome .cmd-stat {display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}

.ledger-command-chrome .cmd-stat-val {font-size:16px;font-weight:700;color:var(--ce-cmd-text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.ledger-command-chrome .cmd-stat-val.gn {color:var(--ce-cmd-green)}

.ledger-command-chrome .cmd-stat-lbl {font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ce-cmd-text-muted);margin-top:3px}

.ledger-command-chrome .cmd-stat-sep {width:1px;height:28px;background:var(--ce-cmd-border)}

.ledger-command-chrome .cmd-bar {display:flex;align-items:center;gap:0;padding:10px 14px;background:var(--ce-cmd-surface-2)}

.ledger-command-chrome .ledger-command-search-results {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  overflow: hidden;
  border-top: 1px solid transparent;
  background: linear-gradient(180deg, var(--ce-cmd-surface), color-mix(in srgb, var(--ce-cmd-surface) 84%, #f5faf5 16%));
  transition: max-height .38s cubic-bezier(.2,.8,.2,1), opacity .22s ease, transform .38s cubic-bezier(.2,.8,.2,1), border-color .18s ease;
}

.ledger-command-chrome.is-searching .cmd {
  border-radius: 14px;
}

.ledger-command-chrome.is-searching .cmd-bar {
  border-radius: 0;
}

.ledger-command-chrome.is-searching .ledger-command-search-results {
  max-height: 430px;
  opacity: 1;
  transform: translateY(0);
  border-top-color: var(--ce-cmd-border);
}

.ledger-command-chrome .ledger-command-search-results-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  width: 100%;
  max-width: 100%;
}

.ledger-command-chrome .ledger-command-search-group {
  border: 1px solid color-mix(in srgb, var(--ce-cmd-border) 88%, var(--green) 12%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ce-cmd-surface) 94%, #f8fcf8 6%);
  overflow: hidden;
  min-width: 0;
}

.ledger-command-chrome .ledger-command-search-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--ce-cmd-surface-2) 88%, #f5fbf4 12%);
  border-bottom: 1px solid var(--ce-cmd-border);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

.ledger-command-chrome .ledger-command-search-group-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--ce-command-accent-pill);
  border: 1px solid var(--ce-command-accent-pill-border);
  color: var(--ce-command-accent);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ledger-command-chrome .ledger-command-search-group-body {
  display: grid;
  gap: 0;
}

.ledger-command-chrome .ledger-command-search-result {
  appearance: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ce-cmd-border) 72%, transparent);
  background: transparent;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  color: var(--ce-cmd-text);
  transition: background .16s ease, transform .16s ease;
}

.ledger-command-chrome .ledger-command-search-result:last-child {
  border-bottom: 0;
}

.ledger-command-chrome .ledger-command-search-result:hover,
.ledger-command-chrome .ledger-command-search-result:focus-visible {
  background: color-mix(in srgb, var(--green) 7%, var(--ce-cmd-surface) 93%);
  outline: none;
}

.ledger-command-chrome .ledger-command-search-result-badge {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--green) 10%, var(--ce-cmd-surface-2) 90%);
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.ledger-command-chrome .ledger-command-search-result-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ledger-command-chrome .ledger-command-search-result-title {
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.35;
  min-width: 0;
  word-break: break-word;
}

.ledger-command-chrome .ledger-command-search-result-meta {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ce-cmd-text-dim);
  min-width: 0;
  word-break: break-word;
}

.ledger-command-chrome .ledger-command-search-result-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ce-cmd-border) 82%, var(--green) 18%);
  background: color-mix(in srgb, var(--ce-cmd-surface-2) 88%, #f5fbf4 12%);
  color: var(--ce-cmd-text-dim);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ledger-command-chrome .ledger-command-search-match {
  color: var(--green);
  background: linear-gradient(transparent 58%, rgba(22,163,74,.18) 0);
  padding: 0;
}

.ledger-command-chrome .ledger-command-search-empty {
  grid-column: 1 / -1;
  border: 1px dashed color-mix(in srgb, var(--ce-cmd-border) 82%, var(--green) 18%);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  background: color-mix(in srgb, var(--ce-cmd-surface) 92%, #f8fcf8 8%);
}

.ledger-command-chrome .ledger-command-search-empty-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ce-cmd-text);
}

.ledger-command-chrome .ledger-command-search-empty-copy {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ce-cmd-text-dim);
}

.ledger-command-chrome .cmd-field {display:flex;align-items:center;gap:10px;padding:0 14px;border-right:1px solid var(--ce-cmd-border);min-height:var(--ce-control-height);height:var(--ce-control-height)}

.ledger-command-chrome .cmd-field:first-child {padding-left:14px}

.ledger-command-chrome .cmd-field.search {flex:1;min-width:200px}

.ledger-command-chrome .cmd-field-icon {color:var(--text-muted);flex-shrink:0;display:flex;align-items:center;justify-content:center;width:18px;height:18px}

.ledger-command-chrome .cmd-field-stack {display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}

.ledger-command-chrome .cmd-field-stack.cmd-field-stack-value {justify-content:center;height:100%}

.ledger-command-chrome .cmd-field-lbl {font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ce-cmd-text-muted);line-height:1}

.ledger-command-chrome .cmd-field select,
.ledger-command-chrome .cmd-field input {
  border:none;outline:none;background:transparent;font-family:inherit;color:var(--ce-cmd-text);font-size:12.5px;font-weight:600;padding:0;height:18px;width:100%;min-width:0;letter-spacing:-.005em
}

.ledger-command-chrome .cmd-field select {
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2316a34a'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;padding-right:14px;cursor:pointer;border-radius:6px;box-shadow:inset 0 0 0 1px transparent;transition:background-color .15s ease,box-shadow .15s ease,color .15s ease
}

.ledger-command-chrome .cmd-field select:hover,
.ledger-command-chrome .cmd-field select:active {
  background-color:var(--ce-cmd-control-hover-bg);box-shadow:inset 0 0 0 1px var(--ce-cmd-control-hover-border)
}

.ledger-command-chrome .cmd-field select:focus-visible {
  background-color:var(--ce-cmd-control-hover-bg);box-shadow:inset 0 0 0 1px var(--ce-cmd-control-hover-border),0 0 0 2px var(--ce-cmd-control-focus-ring);outline:none
}

.ledger-command-chrome .cmd-field input::placeholder {color:var(--ce-cmd-text-muted);font-weight:500}

.ledger-command-chrome .cmd-seg {display:inline-flex;align-items:center;border:1px solid var(--ce-cmd-border);border-radius:999px;background:var(--ce-cmd-surface);padding:3px;height:32px;align-self:center}

.ledger-command-chrome .cmd-seg button {
  border:none;background:transparent;font-family:inherit;font-size:11.5px;color:var(--ce-cmd-text-dim);padding:0 14px;cursor:pointer;font-weight:600;border-radius:999px;height:100%;display:inline-flex;align-items:center;transition:background .18s,color .18s,box-shadow .18s;white-space:nowrap;letter-spacing:-.005em
}

.ledger-command-chrome .cmd-seg button:hover {color:var(--ce-cmd-text)}

.ledger-command-chrome .cmd-seg button.active {
  background:var(--green);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 4px 10px -3px rgba(22,163,74,.45)
}

.ledger-command-chrome .cmd-actions {display:flex;align-items:center;gap:8px;padding:0 6px 0 14px;margin-left:auto}

.ledger-command-chrome .cmd-btn {
  min-height:var(--ce-control-height);height:var(--ce-control-height);padding:0 14px;background:var(--ce-cmd-surface);color:var(--ce-cmd-text-dim);border:1px solid var(--ce-cmd-border);border-radius:8px;font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;letter-spacing:-.005em;transition:border-color .15s,color .15s,background .15s,transform .12s
}

.ledger-command-chrome .cmd-btn:hover,
.ledger-command-chrome .cmd-btn:focus-visible,
.ledger-command-chrome .cmd-btn:active {
  border-color:var(--ce-cmd-control-hover-border);color:var(--ce-cmd-green);background:var(--ce-cmd-control-hover-bg)
}

.ledger-command-chrome .cmd-btn:focus-visible {box-shadow:0 0 0 2px var(--ce-cmd-control-focus-ring);outline:none}

.ledger-command-chrome .cmd-btn:active {transform:none}

.ledger-command-chrome .cmd-btn.primary {
  background:var(--ce-cmd-green);color:#fff;border-color:var(--ce-cmd-green);box-shadow:0 1px 0 rgba(0,0,0,.05),0 4px 12px -4px rgba(22,163,74,.5)
}

.ledger-command-chrome .cmd-btn.primary:hover {background:#138a3e;border-color:#138a3e;color:#fff}

.ledger-command-chrome .cmd-btn.icon-only {padding:0;width:var(--ce-control-height);justify-content:center}

@media (max-width: 980px) {
  .ledger-command-chrome .ledger-command-search-results-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .ledger-command-chrome .ledger-command-search-result {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .ledger-command-chrome .ledger-command-search-result-tag {
    grid-column: 2;
    justify-self: start;
  }
}

.ledger-command-chrome .cmd-spin svg {transition:transform .6s cubic-bezier(.4,0,.2,1)}

.ledger-command-chrome .cmd-spin:hover svg {transform:rotate(180deg)}

.ledger-command-chrome .cmd-field.service {
  min-width: 172px;
}

.ledger-command-chrome .cmd-field.service .cmd-field-stack {
  min-width: 118px;
}

.ledger-command-chrome .cmd-period-last-month-btn {
  min-height: var(--ce-control-height);
  height: var(--ce-control-height);
  align-self: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  font-family: inherit;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.ledger-command-chrome .cmd-field .admin-select-wrap {
  min-width: 0;
  flex: 1;
}

.ledger-command-chrome .cmd-field .cust-dd.admin-cust-dd {
  width: 100%;
}

.ledger-command-chrome .cmd-field .admin-select-wrap.cmd-connected-select-wrap .cust-dd-btn,
.ledger-command-chrome .cmd-field .scope-picker-trigger {
  min-height: var(--ce-control-height);
  height: var(--ce-control-height);
  width: 100%;
  padding: 0 14px;
  border-radius: 8px 8px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.ledger-command-chrome .cmd-field .admin-select-wrap.cmd-connected-select-wrap:not(.open) .cust-dd-btn,
.ledger-command-chrome .cmd-field .admin-select-wrap.cmd-connected-select-wrap:not(.open) .scope-picker-trigger {
  border-radius: 8px;
}

.ledger-command-chrome .cmd-field .admin-select-wrap.cmd-connected-select-wrap .admin-cust-dd-label,
.ledger-command-chrome .cmd-field .scope-picker-label {
  line-height: 1;
}

.ledger-command-chrome .period-menu-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: min(300px, 100%);
  max-inline-size: min(360px, calc(100vw - 32px));
  max-height: min(540px, calc(100vh - 120px));
  overflow-x: hidden;
}

.ledger-command-chrome .period-menu-section {
  position: relative;
}

.ledger-command-chrome .period-menu-header,
.ledger-command-chrome .period-footer {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 2px 0;
  background: var(--submenu-bg, var(--nav-item-hover-bg));
}

.ledger-command-chrome .period-option-list-wrap {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 4px 0 8px;
}

.ledger-command-chrome .period-option-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(420px, calc(100vh - 260px));
  min-height: min(290px, calc(100vh - 340px));
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 2px 20px;
  scrollbar-width: auto;
  scrollbar-color: color-mix(in srgb, var(--green) 42%, var(--border) 58%) color-mix(in srgb, var(--surface) 88%, var(--border) 12%);
}

.ledger-command-chrome .period-option-list::-webkit-scrollbar {
  width: 12px;
}

.ledger-command-chrome .period-option-list::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--surface) 88%, var(--border) 12%);
  border-radius: 999px;
}

.ledger-command-chrome .period-option-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--green) 40%, var(--border) 60%);
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--surface) 88%, var(--border) 12%);
}

.ledger-command-chrome .period-option-list-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0), var(--submenu-bg, var(--nav-item-hover-bg)) 88%);
  pointer-events: none;
  z-index: 2;
}

.ledger-command-chrome .period-quick-actions,
.ledger-command-chrome .period-filter-row {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.ledger-command-chrome .period-quick-actions {
  flex-wrap: wrap;
  align-items: center;
}

.ledger-command-chrome .period-filter-chip {
  border: 1px solid color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  border-radius: 999px;
  background: var(--submenu-bg-2, var(--surface));
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 8px;
  line-height: 1;
  white-space: nowrap;
}

.ledger-command-chrome .period-quick-btn {
  flex: 1 1 96px;
  justify-content: center;
  min-width: 0;
}

.ledger-command-chrome .period-filter-chip:hover,
.ledger-command-chrome .period-filter-chip.is-active {
  border-color: color-mix(in srgb, var(--green) 48%, var(--border) 52%);
  background: color-mix(in srgb, var(--green) 13%, var(--surface) 87%);
  color: var(--text);
}

.ledger-command-chrome .period-search {
  border: 1px solid color-mix(in srgb, var(--border) 78%, #cdd5df 22%);
  border-radius: 10px;
  background: var(--submenu-bg-2, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 12px;
  min-height: 30px;
  outline: none;
  padding: 0 10px;
}

.ledger-command-chrome .period-search::placeholder {
  color: var(--text-muted);
}

.ledger-command-chrome .period-search:focus-visible {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border) 58%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 16%, transparent);
}

.ledger-command-chrome .period-filter-select-wrap {
  position: relative;
  flex: 1 1 132px;
  min-width: 0;
}

.ledger-command-chrome .period-filter-select-wrap::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.75px solid var(--green);
  border-bottom: 1.75px solid var(--green);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  transition: border-color .15s ease, transform .15s ease;
}

.ledger-command-chrome .period-menu-content .period-filter-select {
  width: 100%;
  min-width: 0;
  min-height: var(--ce-control-height);
  height: var(--ce-control-height);
  border: 1px solid color-mix(in srgb, var(--border) 78%, #cdd5df 22%) !important;
  border-radius: 10px !important;
  background: var(--submenu-bg-2, var(--surface)) !important;
  color: var(--ce-cmd-text, var(--text)) !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  outline: none;
  padding: 0 34px 0 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-shadow: none !important;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.ledger-command-chrome .period-menu-content .period-filter-select:hover {
  color: var(--green);
  background: var(--nav-item-hover-bg);
  border-color: color-mix(in srgb, var(--green) 38%, var(--border) 62%);
}

.ledger-command-chrome .period-filter-select-wrap:focus-within::after {
  transform: translateY(-65%) rotate(45deg) scale(1.02);
}

.ledger-command-chrome .period-menu-content .period-filter-select:focus-visible {
  color: var(--green);
  background: var(--nav-item-hover-bg);
  border-color: color-mix(in srgb, var(--green) 48%, var(--border) 52%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 16%, transparent);
}

.ledger-command-chrome .period-active-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}

.ledger-command-chrome .period-active-chips[hidden] {
  display: none;
}

.ledger-command-chrome .period-filter-chip-context,
.ledger-command-chrome .period-filter-chip-active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: default;
  border-color: color-mix(in srgb, var(--border) 84%, #cdd5df 16%);
  background: color-mix(in srgb, var(--submenu-bg-2, var(--surface)) 82%, var(--border) 18%);
  color: var(--text-muted);
  font-size: 10.5px;
  padding: 4px 7px;
}

.ledger-command-chrome .period-filter-chip-active {
  color: var(--text-dim);
}

.ledger-command-chrome .period-footer {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 10px 2px 2px;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, #cdd5df 16%);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ledger-command-chrome .period-footer span {
  min-width: 0;
  flex: 1;
}

.ledger-command-chrome .period-filter-chip-context:hover,
.ledger-command-chrome .period-filter-chip-active:hover {
  border-color: color-mix(in srgb, var(--border) 84%, #cdd5df 16%);
  background: color-mix(in srgb, var(--submenu-bg-2, var(--surface)) 82%, var(--border) 18%);
}

.ledger-command-chrome .period-filter-chip-remove {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

.ledger-command-chrome .period-filter-chip-remove:hover {
  color: var(--green);
}

.ledger-command-chrome .period-year-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  padding: 6px 10px 3px;
}

.ledger-command-chrome .period-year-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: color-mix(in srgb, var(--border) 78%, transparent);
}

.ledger-command-chrome .period-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  min-height: 31px;
  width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  overflow-x: hidden;
}

.ledger-command-chrome .period-option .period-row-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger-command-chrome .period-option .period-row-meta {
  flex: 0 0 auto;
  min-width: 48px;
  max-width: 70px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.ledger-command-chrome .period-menu-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 8px 10px;
}

.ledger-command-chrome .period-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.35;
  padding-top: 7px;
}

.ledger-command-chrome .period-reset-btn {
  border: none;
  background: transparent;
  color: var(--green);
  align-self: flex-start;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 0;
  white-space: nowrap;
}

.ledger-command-chrome .period-reset-btn:hover,
.ledger-command-chrome .period-reset-btn:focus-visible {
  color: color-mix(in srgb, var(--green) 72%, var(--text) 28%);
  outline: none;
}

.ledger-command-chrome .cmd-period-last-month-btn:hover,
.ledger-command-chrome .cmd-period-last-month-btn:focus-visible,
.ledger-command-chrome .cmd-period-last-month-btn.active,
.ledger-command-chrome .cmd-period-last-month-btn[aria-pressed="true"] {
  border-color: var(--ce-cmd-control-hover-border);
  background: var(--ce-cmd-control-hover-bg);
  color: var(--green);
  outline: none;
}

.ledger-command-chrome .cmd-period-last-month-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--ce-cmd-control-focus-ring);
}

@keyframes cmdAiAssistActiveGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(139,92,246,.18), 0 0 0 rgba(139,92,246,0); }
  50% { box-shadow: inset 0 0 0 1px rgba(139,92,246,.34), 0 0 16px rgba(139,92,246,.18); }
}

.ledger-command-chrome .cmd-btn.cmd-ai-assist-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #6b54d6;
  border-color: color-mix(in srgb, #7d63df 34%, var(--border) 66%);
  background: color-mix(in srgb, #8b5cf6 10%, var(--surface) 90%);
  box-shadow: inset 0 0 0 1px rgba(139,92,246,.10);
}

.ledger-command-chrome .cmd-btn.cmd-ai-assist-btn::before {
  content: none;
}

.ledger-command-chrome .cmd-btn.cmd-ai-assist-btn::after {
  content: none;
}

.ledger-command-chrome .cmd-btn.cmd-ai-assist-btn:hover,
.ledger-command-chrome .cmd-btn.cmd-ai-assist-btn:focus-visible,
.ledger-command-chrome .cmd-btn.cmd-ai-assist-btn:active,
.ledger-command-chrome .cmd-btn.cmd-ai-assist-btn.is-active {
  color: #5c44cb;
  border-color: rgba(139,92,246,.65);
  background: color-mix(in srgb, #8b5cf6 14%, var(--surface) 86%);
  animation: cmdAiAssistActiveGlow 3.8s ease-in-out infinite;
  transform: none;
  outline: none;
}

.ledger-command-chrome .cmd-btn.cmd-ai-assist-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, #8b5cf6 30%, transparent);
  outline-offset: 2px;
}

.ledger-command-chrome .cmd-ai-assist-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.ledger-command-chrome .cmd-ai-assist-icon-svg {
  width: 16px;
  height: 16px;
  display: block;
}

[data-theme="dark"] .ledger-command-chrome .cmd-btn.cmd-ai-assist-btn {
  color: #d0bfff;
  border-color: color-mix(in srgb, #9f7fff 56%, var(--border) 44%);
  background: color-mix(in srgb, #8b5cf6 22%, var(--surface) 78%);
}

[data-theme="dark"] .ledger-command-chrome .cmd-btn.cmd-ai-assist-btn:hover,
[data-theme="dark"] .ledger-command-chrome .cmd-btn.cmd-ai-assist-btn:focus-visible,
[data-theme="dark"] .ledger-command-chrome .cmd-btn.cmd-ai-assist-btn:active,
[data-theme="dark"] .ledger-command-chrome .cmd-btn.cmd-ai-assist-btn.is-active {
  color: #e8ddff;
  border-color: rgba(178,145,255,.72);
  background: color-mix(in srgb, #8b5cf6 28%, var(--surface) 72%);
}

.ledger-command-chrome .ledger-ai-hero-slot {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  outline: none;
}

.ledger-command-chrome .ledger-ai-normal-hero {
  display: contents;
}

.ledger-command-chrome .ledger-ai-hero-slot.is-ai-active {
  max-height: calc(100vh - var(--ce-header-offset, 180px) - var(--ce-command-bar-height, 72px));
  max-height: calc(100dvh - var(--ce-header-offset, 180px) - var(--ce-command-bar-height, 72px));
  opacity: 1;
  transform: translateY(0);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(var(--ce-command-bar-height, 72px) + 24px);
  pointer-events: auto;
  background: transparent;
  transition:
    max-height .32s cubic-bezier(.2,.8,.2,1),
    opacity .24s ease,
    transform .28s ease;
}

#panel-costs .ce-ai-brief {
  --ce-ai-purple: #8b5cf6;
  --ce-ai-purple-dark: #6d43e8;
  --ce-ai-purple-soft: rgba(139,92,246,.12);
  --ce-ai-line: color-mix(in srgb, var(--border) 86%, #8b5cf6 14%);
  --ce-ai-blue: #2688d9;
  --ce-ai-green: #12a150;
  --ce-ai-amber: #c98911;
  --ce-ai-red: #d84d4d;
  position: relative;
  isolation: isolate;
  display: block;
  padding: 28px 34px 32px;
  background: transparent;
  border: 0;
  opacity: 1;
  transform: translateY(0);
}

#panel-costs .ce-ai-brief::before {
  content: none;
}

@keyframes ceAiBriefSweep {
  0% { transform: translateX(-100%); }
  45%, 100% { transform: translateX(100%); }
}

#panel-costs .ce-ai-brief-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

#panel-costs .ce-ai-brief__identity { min-width: 0; flex: 1 1 auto; }

#panel-costs .ce-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(139,92,246,.32);
  border-radius: 999px;
  background: var(--ce-ai-purple-soft);
  color: var(--ce-ai-purple-dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#panel-costs .ce-ai-dot {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--ce-ai-purple);
  color: #fff;
  letter-spacing: 0;
  font-size: 10px;
}

#panel-costs .ce-ai-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
}

#panel-costs .ce-ai-meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 60%, transparent);
  margin: 0 8px 2px 0;
}

#panel-costs .ce-ai-headline {
  max-width: 1000px;
  margin: 0 0 14px;
  color: var(--text);
  font-size: 36px;
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: 0;
}

#panel-costs .ce-ai-summary {
  max-width: 980px;
  margin: 0 0 28px;
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 500;
}

#panel-costs .ce-ai-executive-answer {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 34px;
  align-items: start;
  border-top: 1px solid var(--ce-ai-line);
  border-bottom: 1px solid var(--ce-ai-line);
  padding: 22px 0;
  margin-bottom: 30px;
}

#panel-costs .ce-ai-answer-label,
#panel-costs .ce-ai-side-section h2,
#panel-costs .ce-ai-mini-title,
#panel-costs .ce-ai-action-summary h2,
#panel-costs .ce-ai-note h2,
#panel-costs .ce-ai-explain-label {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
}

#panel-costs .ce-ai-answer-text {
  max-width: 860px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.38;
  font-weight: 850;
  letter-spacing: 0;
}

#panel-costs .ce-ai-brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 34px;
  align-items: start;
}

#panel-costs .ce-ai-findings {
  display: grid;
  gap: 28px;
}

#panel-costs .ce-ai-finding {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ce-ai-line);
}

#panel-costs .ce-ai-finding:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

#panel-costs .ce-ai-number {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--ce-ai-purple-soft);
  color: var(--ce-ai-purple-dark);
  font-size: 15px;
  font-weight: 950;
}

#panel-costs .ce-ai-finding h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 23px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0;
}

#panel-costs .ce-ai-finding-lead {
  max-width: 820px;
  margin: 0 0 14px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

#panel-costs .ce-ai-explain-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

#panel-costs .ce-ai-explain {
  padding-left: 14px;
  border-left: 3px solid var(--ce-ai-line);
}

#panel-costs .ce-ai-explain.urgent { border-left-color: var(--ce-ai-red); }
#panel-costs .ce-ai-explain.medium { border-left-color: var(--ce-ai-amber); }
#panel-costs .ce-ai-explain.good { border-left-color: var(--ce-ai-green); }

#panel-costs .ce-ai-explain-label {
  font-size: 10px;
  letter-spacing: .11em;
  margin-bottom: 5px;
}

#panel-costs .ce-ai-explain p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

#panel-costs .ce-ai-action-panel {
  margin-top: 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--ce-ai-line);
  padding: 15px;
}

#panel-costs .ce-ai-action-panel h3 {
  margin: 0 0 10px;
  color: var(--ce-ai-purple-dark);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#panel-costs .ce-ai-action-panel ol,
#panel-costs .ce-ai-action-summary ol {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

#panel-costs .ce-ai-action-panel li + li { margin-top: 4px; }

#panel-costs .ce-ai-sidebar {
  display: grid;
  gap: 18px;
}

#panel-costs .ce-ai-side-section {
  border-left: 1px solid var(--ce-ai-line);
  padding-left: 18px;
}

#panel-costs .ce-ai-side-section h2 {
  margin: 0 0 12px;
}

#panel-costs .ce-ai-side-section p,
#panel-costs .ce-ai-action-summary p,
#panel-costs .ce-ai-note p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

#panel-costs .ce-ai-side-section p + p,
#panel-costs .ce-ai-action-summary p + p { margin-top: 10px; }

#panel-costs .ce-ai-owner-list {
  display: grid;
  gap: 10px;
}

#panel-costs .ce-ai-owner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

#panel-costs .ce-ai-owner span:last-child {
  color: var(--ce-ai-purple-dark);
  font-weight: 950;
  white-space: nowrap;
}

#panel-costs .ce-ai-behavior-section {
  margin-top: 34px;
  border-top: 1px solid var(--ce-ai-line);
  padding-top: 28px;
}

#panel-costs .ce-ai-behavior-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 6px;
}

#panel-costs .ce-ai-behavior-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0;
}

#panel-costs .ce-ai-behavior-head span {
  color: var(--ce-ai-purple-dark);
  font-size: 12px;
  font-weight: 900;
}

#panel-costs .ce-ai-behavior-subtitle {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

#panel-costs .ce-ai-behavior-rows {
  border-top: 1px solid var(--ce-ai-line);
}

#panel-costs .ce-ai-behavior-row {
  display: grid;
  grid-template-columns: minmax(290px,.95fr) minmax(310px,1fr) 240px;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--ce-ai-line);
}

#panel-costs .ce-ai-behavior-row:last-child { border-bottom: 0; }

#panel-costs .ce-ai-behavior-copy {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#panel-costs .ce-ai-behavior-number {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 950;
}

#panel-costs .ce-ai-behavior-number.blue { background: var(--ce-ai-blue); }
#panel-costs .ce-ai-behavior-number.purple { background: var(--ce-ai-purple); }
#panel-costs .ce-ai-behavior-number.green { background: var(--ce-ai-green); }
#panel-costs .ce-ai-behavior-number.amber { background: var(--ce-ai-amber); }

#panel-costs .ce-ai-behavior-copy h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0;
}

#panel-costs .ce-ai-behavior-copy p {
  max-width: 560px;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.58;
}

#panel-costs .ce-ai-behavior-visual {
  border-left: 1px solid var(--ce-ai-line);
  padding-left: 26px;
}

#panel-costs .ce-ai-mini-title {
  font-size: 10px;
  letter-spacing: .11em;
  margin-bottom: 10px;
}

#panel-costs .ce-ai-trend-chart {
  width: 100%;
  height: auto;
  min-height: 96px;
}

#panel-costs .ce-ai-grid-line { stroke: color-mix(in srgb, var(--border) 86%, transparent); stroke-width: 1; }
#panel-costs .ce-ai-blue-line,
#panel-costs .ce-ai-green-line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#panel-costs .ce-ai-blue-line { stroke: var(--ce-ai-blue); }
#panel-costs .ce-ai-green-line { stroke: var(--ce-ai-green); }
#panel-costs .ce-ai-blue-point,
#panel-costs .ce-ai-green-point { stroke: var(--surface); stroke-width: 3; }
#panel-costs .ce-ai-blue-point { fill: var(--ce-ai-blue); }
#panel-costs .ce-ai-green-point { fill: var(--ce-ai-green); }
#panel-costs .ce-ai-trend-chart text { fill: var(--text-muted); font-size: 11px; font-weight: 750; }

#panel-costs .ce-ai-growth-bars {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

#panel-costs .ce-ai-growth-bars div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

#panel-costs .ce-ai-growth-bars i {
  display: block;
  width: var(--w);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ce-ai-purple), #b28cff);
}

#panel-costs .ce-ai-growth-bars b {
  color: var(--ce-ai-purple-dark);
  text-align: right;
  font-size: 12px;
}

#panel-costs .ce-ai-ring-row {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 4px;
}

#panel-costs .ce-ai-mini-ring {
  width: 72px;
  display: grid;
  place-items: center;
  gap: 4px;
}

#panel-costs .ce-ai-mini-ring span {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--text-muted) calc(var(--p,70) * 1%), color-mix(in srgb, var(--border) 76%, transparent) 0);
  color: var(--text);
  position: relative;
  isolation: isolate;
  font-size: 13px;
  font-weight: 950;
}

#panel-costs .ce-ai-mini-ring span::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: var(--surface);
  z-index: -1;
}

#panel-costs .ce-ai-mini-ring.active span {
  background: conic-gradient(var(--ce-ai-purple) calc(var(--p,54) * 1%), color-mix(in srgb, var(--border) 76%, transparent) 0);
  color: var(--ce-ai-purple-dark);
}

#panel-costs .ce-ai-mini-ring small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 850;
}

#panel-costs .ce-ai-visual-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

#panel-costs .ce-ai-behavior-takeaway {
  border-radius: 18px;
  padding: 16px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

#panel-costs .ce-ai-behavior-takeaway strong {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#panel-costs .ce-ai-behavior-takeaway.blue { background: color-mix(in srgb, var(--ce-ai-blue) 10%, var(--surface) 90%); }
#panel-costs .ce-ai-behavior-takeaway.purple { background: var(--ce-ai-purple-soft); color: var(--ce-ai-purple-dark); }
#panel-costs .ce-ai-behavior-takeaway.green { background: color-mix(in srgb, var(--ce-ai-green) 10%, var(--surface) 90%); }
#panel-costs .ce-ai-behavior-takeaway.amber { background: color-mix(in srgb, var(--ce-ai-amber) 12%, var(--surface) 88%); }

#panel-costs .ce-ai-action-summary {
  margin-top: 30px;
  border: 1px solid var(--ce-ai-line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  padding: 18px;
  display: grid;
  grid-template-columns: 1.15fr .85fr .7fr;
  gap: 22px;
  align-items: start;
}

#panel-costs .ce-ai-action-summary h2,
#panel-costs .ce-ai-note h2 {
  margin: 0 0 10px;
}

#panel-costs .ce-ai-action-summary strong,
#panel-costs .ce-ai-note strong { color: var(--text); }

#panel-costs .ce-ai-urgent-text {
  color: var(--ce-ai-red) !important;
  font-weight: 950;
  margin-top: 8px !important;
}

#panel-costs .ce-ai-bottom-note {
  margin-top: 24px;
  border-top: 1px solid var(--ce-ai-line);
  padding-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

#panel-costs .ce-ai-note p {
  font-size: 13px;
}

#panel-costs .ce-ai-brief-status {
  margin: 0 0 16px;
  border: 1px solid rgba(217,119,6,.24);
  border-radius: 10px;
  background: rgba(217,119,6,.08);
  color: var(--text);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.4;
}

#panel-costs .ce-ai-brief-status[data-tone="info"] {
  border-color: rgba(139,92,246,.24);
  background: rgba(139,92,246,.08);
}

#panel-costs .ce-ai-brief__actions,
#panel-costs .ce-ai-brief__error-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

#panel-costs .ce-ai-brief__button,
#panel-costs .ce-ai-brief__icon-btn {
  min-height: 34px;
  border: 1px solid var(--ce-ai-line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-shadow: 0 7px 18px rgba(25,25,45,.045);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

#panel-costs .ce-ai-brief__button:hover,
#panel-costs .ce-ai-brief__button:focus-visible,
#panel-costs .ce-ai-brief__icon-btn:hover,
#panel-costs .ce-ai-brief__icon-btn:focus-visible {
  border-color: rgba(139,92,246,.55);
  background: rgba(139,92,246,.10);
  color: var(--ce-ai-purple-dark);
  outline: none;
}

#panel-costs .ce-ai-brief__button.secondary { color: var(--text-muted); }

#panel-costs .ce-ai-brief__icon-btn {
  width: 34px;
  padding: 0;
}

#panel-costs .ce-ai-brief__stale,
#panel-costs .ce-ai-brief__error {
  border: 1px solid rgba(217,119,6,.24);
  border-radius: 10px;
  background: rgba(217,119,6,.08);
  color: var(--text);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 12.5px;
  line-height: 1.45;
}

#panel-costs .ce-ai-brief__error {
  display: grid;
  gap: 8px;
}

#panel-costs .ce-ai-brief__error span { color: var(--text-muted); }

#panel-costs .ce-ai-brief__skeleton {
  min-height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(139,92,246,.10), rgba(139,92,246,.24), rgba(139,92,246,.10));
  background-size: 180% 100%;
  animation: ceAiSkeleton 1.2s ease-in-out infinite;
}

#panel-costs .ce-ai-brief__skeleton-lg { min-height: 52px; border-radius: 12px; margin: 10px 0 18px; }
#panel-costs .ce-ai-brief__skeleton-card { min-height: 180px; border-radius: 16px; }

@keyframes ceAiSkeleton {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

[data-theme="dark"] #panel-costs .ce-ai-pill,
[data-theme="dark"] #panel-costs .ce-ai-owner span:last-child,
[data-theme="dark"] #panel-costs .ce-ai-action-panel h3,
[data-theme="dark"] #panel-costs .ce-ai-behavior-head span,
[data-theme="dark"] #panel-costs .ce-ai-mini-ring.active span {
  color: #d8c8ff;
}

[data-theme="dark"] #panel-costs .ce-ai-brief__button,
[data-theme="dark"] #panel-costs .ce-ai-brief__icon-btn {
  background: color-mix(in srgb, var(--surface) 84%, #8b5cf6 16%);
}

#panel-costs.ce-ai-brief-export-root,
#panel-costs .ce-ai-brief-export-root {
  background:
    radial-gradient(circle at 12% 0%, rgba(139,92,246,.14), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(38,136,217,.07), transparent 30%),
    linear-gradient(180deg, #fff, #fbfaff 72%, #fff);
  color: #17182f;
  color-adjust: exact;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

#panel-costs.ce-ai-brief-export-root .ce-ai-brief,
#panel-costs .ce-ai-brief-export-root .ce-ai-brief {
  background:
    radial-gradient(circle at 12% 0%, rgba(139,92,246,.14), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(38,136,217,.07), transparent 30%),
    linear-gradient(180deg, #fff, #fbfaff 72%, #fff) !important;
  color: #17182f !important;
  box-shadow: none !important;
  color-adjust: exact;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  #panel-costs .ce-ai-print-hidden,
  #panel-costs .ce-ai-brief__actions,
  #panel-costs .ce-command-bar,
  #panel-costs .cmd-bar,
  #panel-costs .ce-normal-hero-header,
  #panel-costs .ce-ai-brief button {
    display: none !important;
  }
  #panel-costs .ce-ai-brief,
  .ledger-command-chrome .ledger-ai-hero-slot.is-ai-active {
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  .ledger-command-chrome .ledger-ai-hero-slot.is-ai-active {
    padding-bottom: 0 !important;
  }
  #panel-costs .ce-ai-brief {
    background:
      radial-gradient(circle at 12% 0%, rgba(139,92,246,.14), transparent 34%),
      radial-gradient(circle at 92% 10%, rgba(38,136,217,.07), transparent 30%),
      linear-gradient(180deg, #fff, #fbfaff 72%, #fff) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #panel-costs .ce-ai-finding,
  #panel-costs .ce-ai-behavior-row,
  #panel-costs .ce-ai-action-summary,
  #panel-costs .ce-ai-bottom-note {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

@media(max-width:1100px){
  .ledger-command-chrome .cmd-top{flex-wrap:wrap}
  .ledger-command-chrome .cmd-status{order:3;width:100%;justify-content:flex-start;border-top:1px solid var(--border);padding-top:12px;margin-top:4px}
  .ledger-command-chrome .cmd-bar{flex-wrap:wrap}
  .ledger-command-chrome .cmd-field{border-right:none;border-bottom:1px solid var(--border);width:100%}
  .ledger-command-chrome .cmd-actions{margin-left:0;width:100%;padding:8px 0 0;flex-wrap:wrap}
  #panel-costs .ce-ai-brief-topbar { flex-direction: column; }
  #panel-costs .ce-ai-brief__actions { justify-content: flex-start; }
  #panel-costs .ce-ai-executive-answer,
  #panel-costs .ce-ai-brief-grid,
  #panel-costs .ce-ai-bottom-note,
  #panel-costs .ce-ai-action-summary,
  #panel-costs .ce-ai-behavior-row,
  #panel-costs .ce-ai-explain-row { grid-template-columns: 1fr; }
  #panel-costs .ce-ai-headline { font-size: 27px; }
  #panel-costs .ce-ai-answer-text { font-size: 18px; }
  #panel-costs .ce-ai-behavior-visual { border-left: 0; padding-left: 0; }
  #panel-costs .ce-ai-sidebar { border-top: 1px solid var(--ce-ai-line); padding-top: 20px; }
  #panel-costs .ce-ai-side-section { border-left: 0; padding-left: 0; }
}

@media(max-width:700px){
  #panel-costs .ce-ai-brief { padding: 20px; }
  #panel-costs .ce-ai-finding { grid-template-columns: 1fr; }
  #panel-costs .ce-ai-growth-bars div { grid-template-columns: 92px minmax(0, 1fr) 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .ledger-command-chrome .cmd-top,
  .ledger-command-chrome .cmd-top::after,
  .ledger-command-chrome .cmd-fresh-dot,
  .ledger-command-chrome .cmd-eyebrow-dot,
  .ledger-command-chrome .cmd-btn.cmd-ai-assist-btn,
  .ledger-command-chrome .cmd-btn.cmd-ai-assist-btn::before,
  .ledger-command-chrome .cmd-btn.cmd-ai-assist-btn::after,
  .ledger-command-chrome .cmd-ai-assist-icon-svg,
  #panel-costs .ce-ai-brief,
  #panel-costs .ce-ai-brief__skeleton,
  .ledger-command-chrome .ce-hero-card.is-ai-expanded::before,
  .ledger-command-chrome .ce-hero-card.is-ai-expanded::after {
    animation: none !important;
  }

  .ledger-command-chrome .ledger-ai-hero-slot.is-ai-active {
    transition: none !important;
  }

  .ledger-command-chrome .cmd-btn.cmd-ai-assist-btn:hover,
  .ledger-command-chrome .cmd-btn.cmd-ai-assist-btn:focus-visible {
    transform: none;
  }
}

/* ─── KPI row ─── integrated card cluster, no left bars */
.ledger-command-chrome + .ledger-command-to-kpi-section{margin-top:var(--ledger-page-top-chrome-to-kpi-gap)!important;margin-bottom:var(--ledger-kpi-row-to-section-gap)!important}
.ledger-kpi-row{width:100%;max-width:100%;margin:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 32px -16px rgba(22,163,74,.10);display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;position:relative;z-index:1}
.ledger-kpi-row.ce-kpi-strip-six{grid-template-columns:repeat(6,1fr)}
.ledger-kpi-row .kpi{position:relative;padding:16px 18px 14px;background:var(--surface);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,z-index 0s .35s,background .25s ease;cursor:default;border-right:1px solid var(--border);border-radius:14px;transform-origin:center}
.ledger-kpi-row .kpi:last-child{border-right:none}
.ledger-kpi-row .kpi:hover{transform:scale(1.06);background:linear-gradient(180deg,rgba(22,163,74,.05) 0%,var(--surface) 100%);box-shadow:0 1px 3px rgba(0,0,0,.06),0 16px 36px -12px rgba(22,163,74,.22);z-index:5;transition-delay:0s}
.ledger-kpi-row .kpi-lbl{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--text-muted);margin-bottom:12px;line-height:1.25;min-height:24px;text-transform:none}
.ledger-kpi-row .kpi-lbl-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent,var(--green));flex-shrink:0;background:color-mix(in oklab,var(--accent,var(--green)) 10%,transparent);border-radius:6px;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .25s}
.ledger-kpi-row .kpi-lbl-icon svg{display:block;width:12px;height:12px;flex:0 0 12px;color:currentColor;stroke:currentColor}
.ledger-kpi-row .kpi:hover .kpi-lbl-icon{transform:scale(1.1) rotate(-3deg);background:color-mix(in oklab,var(--accent,var(--green)) 16%,transparent)}
.ledger-kpi-row .kpi-val{font-size:28px;font-weight:700;letter-spacing:-.028em;line-height:1.05;color:var(--text);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ledger-kpi-row .kpi:hover .kpi-val{transform:translateY(-1px) scale(1.02)}
.ledger-kpi-row .kpi-val.green{color:var(--green)}
.ledger-kpi-row .kpi-val.orange{color:#d97706}
.ledger-kpi-row .kpi-val.red{color:#dc2626}
.ledger-kpi-row .kpi-trend{display:inline-flex;align-items:center;gap:2px;font-size:10.5px;font-weight:700;letter-spacing:0;padding:3px 7px;border-radius:5px;background:var(--green-light);color:var(--green)}
.ledger-kpi-row .kpi-trend.up{background:rgba(220,38,38,.10);color:#dc2626}
.ledger-kpi-row .kpi-sub{font-size:11.5px;color:var(--text-dim);margin-top:8px;line-height:1.4;letter-spacing:-.005em}
.ledger-kpi-row .kpi-sub b{color:var(--text);font-weight:600}
.ledger-kpi-row .kpi-spark{display:block;width:100%;height:18px;margin-top:10px;opacity:.65;transition:opacity .25s}
.ledger-kpi-row .kpi:hover .kpi-spark{opacity:1}
.ledger-kpi-row .kpi-spark path{stroke-dasharray:140;stroke-dashoffset:140;animation:sparkDraw 1.4s ease-out forwards}
@keyframes sparkDraw{to{stroke-dashoffset:0}}
@media(max-width:980px){.ledger-kpi-row{grid-template-columns:repeat(2,1fr)}.ledger-kpi-row .kpi{border-right:1px solid var(--border)!important;border-bottom:1px solid var(--border)}.ledger-kpi-row .kpi:nth-child(2n){border-right:none!important}.ledger-kpi-row .kpi:nth-last-child(-n+2){border-bottom:none}}
@media(max-width:560px){.ledger-kpi-row{grid-template-columns:1fr}.ledger-kpi-row .kpi{border-right:none!important;border-bottom:1px solid var(--border)}.ledger-kpi-row .kpi:last-child{border-bottom:none}}

.explorerv2-header-tools {
  display: grid;
  grid-template-columns: 132px 220px minmax(220px, 1fr) auto auto auto auto;
  align-items: end;
  justify-content: stretch;
  flex: 1 1 auto;
  margin-top: 14px;
  gap: 10px;
}

.explorerv2-header-tools .costx-field {
  min-width: 0;
  flex: 0 0 auto;
}

.explorerv2-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.explorerv2-period-select {
  width: 132px;
}

.explorerv2-header-tools .costx-field:nth-child(2) .budgetv2-scope-btn,
.explorerv2-header-tools .budgetv2-scope-btn {
  min-width: 220px;
}

.explorerv2-header-tools .showback-search-field {
  min-width: 240px;
}

.explorerv2-header-tools .showback-search-field .authi {
  width: 100%;
}

.explorerv2-header-btn {
  min-width: 112px;
  padding-inline: 14px;
}

.explorerv2-header-btn-secondary {
  min-width: 94px;
}

.explorerv2-panel-grid {
  margin-bottom: 0;
}

.explorerv2-support-grid {
  margin-top: 14px;
}

.explorerv2-table-panel,
.explorerv2-detail-panel {
  min-width: 0;
}

.explorerv2-panel-meta,
.explorerv2-table-meta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.explorerv2-section-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.explorerv2-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.explorerv2-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
}

.explorerv2-level.root {
  color: var(--c-azure);
  background: rgba(0, 120, 212, .08);
  border-color: rgba(0, 120, 212, .24);
}

.explorerv2-level.tenant {
  color: #2563eb;
  background: rgba(37, 99, 235, .08);
  border-color: rgba(37, 99, 235, .25);
}

.explorerv2-level.owner {
  color: var(--green);
  background: rgba(22, 163, 74, .08);
  border-color: rgba(22, 163, 74, .22);
}

.explorerv2-level.subscription {
  color: #0f766e;
  background: rgba(15, 118, 110, .08);
  border-color: rgba(15, 118, 110, .22);
}

.explorerv2-level.resource-group {
  color: #a16207;
  background: rgba(161, 98, 7, .08);
  border-color: rgba(161, 98, 7, .22);
}

.explorerv2-comp {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.explorerv2-composition-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #FFFFFF;
  border-color: #DEDBD3;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(30, 28, 22, .06);
}

.explorerv2-composition-card,
.explorerv2-composition-card * {
  box-sizing: border-box;
}

.explorerv2-composition-card .anl-bt {
  color: #202136;
}

.explorerv2-composition-card .anl-bs,
.explorerv2-composition-card .empty,
.explorerv2-composition-card .loading {
  color: #8D8DA0;
}

.explorerv2-comp-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #DEDBD3;
  border-radius: 14px;
  background: #FBFCFD;
  padding: 14px;
}

.explorerv2-comp-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  align-items: center;
  min-width: 0;
}

.explorerv2-comp-summary span {
  color: #8D8DA0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.explorerv2-comp-summary strong {
  color: #202136;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.explorerv2-comp-summary em {
  grid-column: 1 / -1;
  color: #8D8DA0;
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
}

.explorerv2-comp-breakdown-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 2px;
}

.explorerv2-comp-breakdown {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.explorerv2-comp-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1.25fr) 46px minmax(58px, .75fr) minmax(68px, auto) minmax(60px, auto);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  animation: explorerv2CompRowIn 560ms ease both;
  animation-delay: var(--row-delay);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.explorerv2-comp-row:hover {
  background: rgba(255, 255, 255, .84);
  border-color: rgba(222, 219, 211, .95);
  transform: translateX(2px);
  box-shadow: 0 8px 18px rgba(31, 32, 54, .045);
}

.explorerv2-comp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .8);
}

.explorerv2-comp-namecell {
  min-width: 0;
}

.explorerv2-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.explorerv2-legend-copy {
  min-width: 0;
}

.explorerv2-comp-name {
  font-size: 12px;
  font-weight: 700;
  color: #202136;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorerv2-comp-scope {
  margin-top: 2px;
  font-size: 10px;
  color: #8D8DA0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorerv2-comp-share,
.explorerv2-comp-change {
  font-size: 11px;
  font-weight: 800;
  color: #202136;
  white-space: nowrap;
  text-align: right;
}

.explorerv2-comp-bar {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: #EEF0F3;
}

.explorerv2-comp-bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  animation: explorerv2CompBarIn 780ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--row-delay) + 90ms);
}

.explorerv2-comp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(47, 102, 230, .18);
  border-radius: 999px;
  background: rgba(47, 102, 230, .08);
  color: #2F66E6;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes explorerv2CompRowIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes explorerv2CompBarIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(var(--bar-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .explorerv2-comp-row,
  .explorerv2-comp-bar span {
    animation: none;
  }

  .explorerv2-comp-bar span {
    transform: scaleX(var(--bar-scale));
  }
}

.explorerv2-comp-rank-metrics {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-size: 11px;
}

.explorerv2-comp-rank-metrics strong {
  font-size: 12px;
  color: var(--text);
}

.explorerv2-legend-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorerv2-legend-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

.explorerv2-legend-value {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.cost-filter-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 16px !important;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.filter-bar.explorerv2-header-tools .costx-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.filter-bar.explorerv2-header-tools .showback-search-field {
  flex: 1 1 220px;
  min-width: 220px;
}

.filter-bar.explorerv2-header-tools .authi,
.filter-bar.explorerv2-header-tools .admin-select {
  min-height: 34px;
}

.filter-bar.explorerv2-header-tools .costx-quick-btn.active,
.filter-bar.explorerv2-header-tools .costx-quick-btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.filter-bar.explorerv2-header-tools #loadCostsBtn {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.filter-bar.explorerv2-header-tools #loadCostsBtn:hover {
  background: #138a3e;
  border-color: #138a3e;
}

.compo.explorerv2-composition-card {
  padding: 20px 22px;
  border-radius: 10px;
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.compo-shell,
.compo-shell * {
  box-sizing: border-box;
}

.compo-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.compo-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.compo-sub,
.compo-rh {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.compo-rh {
  text-align: right;
}

.compo-rh b {
  color: var(--text);
}

.compo-head-styled {
  margin-bottom: 0;
  padding: 22px 26px 20px;
  gap: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 6%, var(--surface) 94%) 0%, var(--surface) 60%);
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
}

.compo-head-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--green);
  align-self: flex-start;
}

.compo-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent 78%);
}

.compo-headline {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.22;
  color: var(--text);
}

.compo-description {
  margin: 0;
  max-width: 640px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.compo-head-right {
  flex: 0 0 auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  white-space: nowrap;
}

.compo-rh-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.compo-rh-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.compo-rh-delta {
  max-width: 170px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.25;
  text-align: right;
  white-space: normal;
}

.compo-body {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.donut-wrap {
  position: relative;
  width: 285px;
  height: 285px;
  margin-left: 0;
  margin-right: 0;
}

.donut-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.donut-wrap .seg {
  fill: none;
  stroke-width: 24;
  cursor: pointer;
  stroke-linecap: butt;
  transition: stroke-width .25s ease, opacity .2s ease;
}

.donut-wrap .seg.dim,
.cons-row.dim {
  opacity: .35;
}

.donut-wrap .seg.active {
  stroke-width: 30;
}

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.donut-total {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
}

.donut-amt {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1.05;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.donut-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
  max-width: 200px;
}

.donut-meta b {
  color: var(--text-dim);
}

.cons {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
  transform: translateX(-12px);
  overflow: hidden;
}

.cons-row {
  display: grid;
  grid-template-columns: 20px minmax(145px, 1fr) 68px 88px 64px;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 9px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}

.cons-row:hover,
.cons-row.active,
.cons-row:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.cons-rank {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cons-info {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.cons-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.cons-name-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cons-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.cons-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cons-pct {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.cons-pct-val {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.cons-pct-amt {
  font-size: 10px;
  color: var(--text-muted);
}

.tag {
  display: inline-block;
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.tag-stable { background: var(--surface-3); color: var(--text-dim); }
.tag-high { background: color-mix(in srgb, #7c3aed 12%, transparent 88%); color: #7c3aed; }
.tag-conc,
.tag-new { background: color-mix(in srgb, var(--green) 12%, transparent 88%); color: var(--green); }

.delta {
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.delta.neg,
.delta.new { color: var(--green); }
.delta.pos { color: var(--red); }

.ledger-section-gap-after {
  margin-bottom: var(--ledger-section-gap);
}

.compo.explorerv2-composition-card {
  padding: 0;
}

.composition-body {
  display: grid;
  grid-template-columns: minmax(290px, 340px) minmax(180px, 220px) minmax(320px, 500px);
  gap: calc(var(--ledger-card-grid-gap) + 14px);
  align-items: center;
  min-width: 0;
  padding: 22px 26px 20px;
}

.composition-body > .donut-wrap {
  width: min(312px, 100%);
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: start;
}

.donut {
  position: relative;
  width: min(312px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 10px 16px rgba(31, 32, 54, .045));
}

.donut::after {
  content: "";
  position: absolute;
  inset: 39px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(31, 32, 54, .055), inset 0 7px 15px rgba(31, 32, 54, .035);
  pointer-events: none;
}

.donut-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.donut-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--surface-3) 78%, var(--surface) 22%);
  stroke-width: 12;
}

.compo-donut-segment {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke-width 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out;
  vector-effect: non-scaling-stroke;
}

.compo-donut-segment.dim {
  opacity: .35;
}

.rank-row.dim {
  opacity: .55;
}

.compo-donut-segment.active {
  stroke-width: 19;
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgba(31, 32, 54, .22));
}

.donut-center {
  display: grid;
  place-items: center;
  align-content: center;
  inset: auto;
  width: min(176px, 62%);
  height: min(176px, 62%);
  padding: 17px 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-2) 6%);
  box-shadow: inset 0 0 0 1px rgba(31, 32, 54, .065), 0 7px 14px rgba(31, 32, 54, .035);
  gap: 3px;
  overflow: hidden;
}

.donut-total {
  max-width: 100%;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1.1;
  opacity: .82;
}

.donut-amt {
  display: -webkit-box;
  max-width: 132px;
  max-height: 2.3em;
  margin-top: 1px;
  color: var(--text);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 650;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.donut-meta {
  max-width: 138px;
  margin-top: 1px;
  font-size: 10px;
  line-height: 1.22;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.composition-signal-panel {
  align-self: center;
  justify-self: center;
  min-width: 0;
  max-width: 240px;
  padding: 2px 4px;
}

.composition-signal-panel h3 {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.28;
}

.composition-signal-panel p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.signal-metrics {
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

.signal-metric {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.25;
}

.signal-metric strong {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.ranked-list {
  display: grid;
  gap: 3px;
  justify-self: end;
  min-width: 0;
  width: 100%;
  max-width: 500px;
  align-self: center;
  padding-left: 10px;
}

.rank-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 60px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 5px 6px 5px 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background 200ms ease-out, opacity 200ms ease-out, box-shadow 200ms ease-out;
}

.rank-row:hover,
.rank-row.active,
.rank-row:focus-visible {
  z-index: 6;
  background: color-mix(in srgb, var(--accent, var(--green)) 7%, var(--surface) 93%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--green)) 16%, var(--border) 84%);
  outline: none;
}

.rank-no {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  margin: 0 0 0 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-3) 70%, transparent 30%);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.rank-main {
  position: relative;
  min-width: 0;
}

.rank-heading {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 7px;
  align-items: center;
}

.svc-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent 86%);
  color: var(--accent);
}

.svc-icon:empty::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
}

.rank-title {
  min-width: 0;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.16;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-customer {
  grid-column: 2;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10.8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-context {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  z-index: 5;
  box-sizing: border-box;
  width: min(328px, 100%);
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 9px;
  row-gap: 2px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent, var(--green)) 4%);
  border: 1px solid color-mix(in srgb, var(--accent, var(--green)) 13%, var(--border) 87%);
  border-radius: 8px;
  box-shadow: 0 7px 18px rgba(31, 32, 54, .095);
  color: var(--text-muted);
  font-size: 9.8px;
  line-height: 1.24;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
}

.ranked-list .rank-row:nth-last-child(-n + 2) .rank-context {
  top: auto;
  bottom: calc(100% - 2px);
  transform: translateY(3px);
}

.rank-row:hover .rank-context,
.rank-row:focus-within .rank-context,
.rank-row:focus-visible .rank-context,
.rank-row.active .rank-context {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 0s;
}

.rank-context-line {
  display: grid;
  gap: 2px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-context-label {
  display: block;
  margin-right: 0;
  color: var(--text-muted);
  font-size: 8.2px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
  opacity: .72;
}

.bar-track {
  width: 92%;
  height: 3px;
  margin-top: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-3) 72%, transparent 28%);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: var(--share);
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 78%, var(--surface) 22%);
}

.rank-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  text-align: right;
  line-height: 1.08;
  padding-top: 0;
  font-variant-numeric: tabular-nums;
}

.share {
  color: var(--text);
  font-size: 12.8px;
  font-weight: 700;
}

.rank-values .delta {
  display: block;
  max-width: 124px;
  font-size: 9.2px;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: 0;
  opacity: .78;
  text-align: right;
  white-space: nowrap;
}

.rank-values .delta-neutral {
  color: var(--text-muted);
  opacity: .68;
}

.delta-negative { color: var(--red); }
.delta-positive { color: var(--green); }
.delta-neutral { color: var(--text-muted); }

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 44%, var(--surface) 56%);
}

.summary-card {
  min-width: 0;
  min-height: 82px;
  padding: 14px 18px 15px;
  border-right: 1px solid var(--border);
}

.summary-card:last-child {
  border-right: 0;
}

.summary-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.summary-value {
  margin-top: 6px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
}

.summary-note {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.insights-panel.explorerv2-support-grid {
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 10px;
}

.ip-side {
  padding: 26px 28px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ip-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent 90%);
  padding: 5px 10px;
  border-radius: 999px;
  align-self: flex-start;
  border: 1px solid color-mix(in srgb, var(--green) 22%, transparent 78%);
}

.ip-headline {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.28;
  margin-bottom: 8px;
  color: var(--text);
}

.ip-headline b {
  color: var(--green);
}

.ip-lead {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 10px;
}

.ip-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
  position: relative;
}

.ip-flow::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, var(--green), var(--orange) 50%, #7c3aed);
}

.ip-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  position: relative;
  z-index: 1;
}

.ip-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px solid var(--green);
  color: var(--green);
  font-weight: 700;
  font-size: 11px;
}

.ip-step.changed .ip-icon { border-color: var(--orange); color: var(--orange); }
.ip-step.next .ip-icon { border-color: #7c3aed; color: #7c3aed; }

.ip-step-body {
  flex: 1 1 auto;
  min-width: 0;
}

.ip-step-lbl {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ip-step-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  line-height: 1.3;
}

.ip-step-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.5;
}

.ip-own {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ip-own-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ip-own-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.5;
}

.coverage-card {
  background: color-mix(in srgb, var(--green) 10%, transparent 90%);
  border: 1px solid color-mix(in srgb, var(--green) 22%, transparent 78%);
  border-radius: 9px;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.coverage-circle {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  position: relative;
}

.coverage-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.coverage-circle-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--green);
}

.coverage-info-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
}

.coverage-info-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}

.coverage-info-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.owners {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.owner-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}

.owner-row:hover {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border) 78%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.owner-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-bar {
  margin-top: 9px;
  height: 5px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}

.owner-bar-fill {
  height: 100%;
  border-radius: 3px;
}

.owner-stats {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.owner-amt {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.owner-pct {
  font-size: 10.5px;
  color: var(--text-muted);
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

@keyframes dash {
  from { stroke-dasharray: 0 9999; }
}

@keyframes barGrow {
  from { width: 0; }
}

.explorerv2-insights {
  display: grid;
  gap: 10px;
}

.explorerv2-insight {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.explorerv2-insight-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.explorerv2-insight-v {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.explorerv2-insight-s {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.explorerv2-insight.good {
  border-color: rgba(22, 163, 74, .18);
}

.explorerv2-insight.warn {
  border-color: rgba(217, 119, 6, .2);
}

.explorerv2-insight.bad {
  border-color: rgba(220, 38, 38, .18);
}

.explorerv2-table-bar {
  padding-top: 0;
  gap: 12px;
}

.explorerv2-table-bar-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.explorerv2-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  background: var(--surface-2);
}

.explorerv2-view-btn {
  min-height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.explorerv2-view-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(0, 120, 212, .12);
}

.explorerv2-table-panel {
  margin-top: 14px;
}

.explorerv2-table-meta {
  margin-bottom: 10px;
}

.explorerv2-table-wrap {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.explorerv2-dist-list,
.explorerv2-breakdown-list,
.explorerv2-compare-list {
  display: grid;
  gap: 10px;
}

.explorerv2-dist-row,
.explorerv2-breakdown-card,
.explorerv2-compare-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.explorerv2-dist-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 12px 11px;
}

.explorerv2-dist-rank {
  width: 24px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.explorerv2-dist-copy,
.explorerv2-breakdown-copy {
  min-width: 0;
}

.explorerv2-dist-title,
.explorerv2-breakdown-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorerv2-dist-meta,
.explorerv2-breakdown-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

.explorerv2-dist-track {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}

.explorerv2-dist-track span,
.explorerv2-compare-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 120, 212, .92), rgba(59, 130, 246, .7));
}

.explorerv2-dist-value {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 110px;
}

.explorerv2-distribution-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.explorerv2-distribution-shell {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.explorerv2-opportunity-card,
.explorerv2-opportunity-card * {
  box-sizing: border-box;
}

.explorerv2-opportunity-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--green) 12%);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(30, 28, 22, .045);
  padding: 14px 16px;
  animation: explorerv2CompRowIn .46s ease both;
}

.explorerv2-opportunity-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #16A34A, #35C99B);
}

.explorerv2-opportunity-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr);
  gap: 16px;
  min-width: 0;
}

.explorerv2-opportunity-main,
.explorerv2-opportunity-copy,
.explorerv2-opportunity-side {
  min-width: 0;
}

.explorerv2-opportunity-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.explorerv2-opportunity-rank {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.explorerv2-opportunity-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorerv2-opportunity-copy p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.explorerv2-opportunity-status {
  min-width: 104px;
  text-align: right;
}

.explorerv2-opportunity-status strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.05;
}

.explorerv2-opportunity-status span {
  display: block;
  margin-top: 3px;
  color: #15803d;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.explorerv2-opportunity-progress {
  margin: 10px 0 10px 44px;
  min-width: 0;
}

.explorerv2-opportunity-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.explorerv2-opportunity-progress-meta strong {
  color: var(--text-muted);
  font-size: 10px;
}

.explorerv2-opportunity-track {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(32, 33, 54, .035);
}

.explorerv2-opportunity-track span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35C99B, #16A34A);
  transform: scaleX(0);
  transform-origin: left center;
  animation: explorerv2OpportunityBarIn 780ms cubic-bezier(.2, .8, .2, 1) both 80ms;
}

.explorerv2-opportunity-track span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: translateX(-100%);
  animation: explorerv2OpportunityShimmer 3.2s ease-in-out infinite 1.1s;
}

.explorerv2-opportunity-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-left: 44px;
  min-width: 0;
}

.explorerv2-opportunity-metrics article,
.explorerv2-opportunity-side-card {
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  animation: explorerv2CompRowIn .44s ease both;
  animation-delay: var(--opportunity-delay);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.explorerv2-opportunity-metrics article {
  border-radius: 10px;
  padding: 8px 9px;
}

.explorerv2-opportunity-metrics article:hover,
.explorerv2-opportunity-side-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 72%, var(--green) 28%);
  box-shadow: 0 8px 16px rgba(22, 163, 74, .055);
}

.explorerv2-opportunity-metrics span,
.explorerv2-opportunity-side-card > span {
  display: block;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.explorerv2-opportunity-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.explorerv2-opportunity-side {
  display: grid;
  align-content: start;
  gap: 8px;
}

.explorerv2-opportunity-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}

.explorerv2-opportunity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.explorerv2-opportunity-badge.high {
  background: rgba(220, 38, 38, .1);
  color: #b91c1c;
}

.explorerv2-opportunity-badge.medium {
  background: rgba(217, 119, 6, .12);
  color: #a16207;
}

.explorerv2-opportunity-badge.good {
  background: rgba(22, 163, 74, .12);
  color: #15803d;
}

.explorerv2-opportunity-side-card {
  border-radius: 10px;
  padding: 10px;
}

.explorerv2-opportunity-side-card.action {
  border-color: color-mix(in srgb, var(--border) 76%, #e27b00 24%);
}

.explorerv2-opportunity-side-card strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.explorerv2-opportunity-side-card p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@keyframes explorerv2OpportunityBarIn {
  to {
    transform: scaleX(var(--opportunity-scale));
  }
}

@keyframes explorerv2OpportunityShimmer {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .explorerv2-opportunity-card,
  .explorerv2-opportunity-metrics article,
  .explorerv2-opportunity-side-card,
  .explorerv2-opportunity-track span,
  .explorerv2-opportunity-track span::after {
    animation: none;
  }

  .explorerv2-opportunity-track span {
    transform: scaleX(var(--opportunity-scale));
  }
}

.explorerv2-stack-shell {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.explorerv2-stack-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.explorerv2-stack-head > div:first-child {
  min-width: 0;
}

.explorerv2-stack-title {
  color: #202136;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
}

.explorerv2-stack-head p {
  margin: 4px 0 0;
  color: #8D8DA0;
  font-size: 13px;
  line-height: 1.4;
}

.explorerv2-stack-note {
  flex: 0 1 auto;
  color: #8D8DA0;
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
}

.explorerv2-stacked-bar {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: #EEF0F3;
  box-shadow: inset 0 0 0 1px rgba(32, 33, 54, .04);
}

.explorerv2-stack-segment {
  display: block;
  flex: 0 0 var(--stack-width);
  min-width: 2px;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  animation: explorerv2StackSegmentIn 900ms cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: var(--stack-delay);
  transition: filter .18s ease;
}

.explorerv2-stack-segment:hover {
  filter: brightness(1.08);
}

.explorerv2-stack-category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.explorerv2-stack-category {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #EBE8DF;
  border-radius: 14px;
  background: rgba(255, 255, 255, .76);
  animation: explorerv2CompRowIn .5s ease both;
  animation-delay: var(--stack-delay);
}

.explorerv2-stack-category-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.explorerv2-stack-category-top span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #202136;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.explorerv2-stack-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.explorerv2-stack-category strong {
  color: #202136;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.12;
}

.explorerv2-stack-category em {
  color: #8D8DA0;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}

@keyframes explorerv2StackSegmentIn {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .explorerv2-stack-segment,
  .explorerv2-stack-category {
    animation: none;
  }

  .explorerv2-stack-segment {
    transform: scaleX(1);
  }
}

.explorerv2-combined-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  display: grid;
  gap: 18px;
}

.explorerv2-combined-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.explorerv2-combined-header > div {
  min-width: 0;
}

.explorerv2-combined-header > div:first-child {
  flex: 1 1 auto;
}

.explorerv2-combined-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.18;
}

.explorerv2-combined-header p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.explorerv2-combined-summary {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.explorerv2-combined-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.explorerv2-combined-summary strong {
  color: var(--text);
  margin-right: 5px;
}

.explorerv2-combined-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.explorerv2-combined-insights article,
.explorerv2-combined-row,
.explorerv2-combined-detail,
.explorerv2-combined-side-card {
  border: 1px solid var(--border);
  background: var(--surface);
}

.explorerv2-combined-insights article {
  min-width: 0;
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

.explorerv2-combined-insights span,
.explorerv2-combined-detail span,
.explorerv2-combined-side-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.explorerv2-combined-insights strong {
  display: block;
  min-width: 0;
  margin-top: 7px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.explorerv2-combined-insights p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.explorerv2-combined-rows {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.explorerv2-combined-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 260px);
  gap: 16px;
  align-items: start;
  min-width: 0;
  border-radius: 16px;
  padding: 16px;
}

.explorerv2-combined-rank {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  padding-top: 4px;
}

.explorerv2-combined-main,
.explorerv2-combined-copy,
.explorerv2-combined-side {
  min-width: 0;
}

.explorerv2-combined-main-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  margin-bottom: 12px;
}

.explorerv2-combined-title {
  min-width: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorerv2-combined-meta {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.explorerv2-combined-money {
  flex: 0 1 auto;
  min-width: 118px;
  text-align: right;
}

.explorerv2-combined-money strong {
  display: block;
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
}

.explorerv2-combined-money span {
  display: block;
  margin-top: 3px;
  color: #15803d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.explorerv2-combined-bar {
  position: relative;
  height: 12px;
  margin: 8px 0 13px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.explorerv2-combined-bar .spend,
.explorerv2-combined-bar .saving {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: inherit;
}

.explorerv2-combined-bar .spend {
  left: 0;
  background: linear-gradient(90deg, rgba(0, 120, 212, .95), rgba(96, 165, 250, .72));
}

.explorerv2-combined-bar .saving {
  right: 0;
  background: linear-gradient(90deg, rgba(52, 211, 153, .9), rgba(22, 163, 74, .95));
}

.explorerv2-combined-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.explorerv2-combined-detail {
  min-width: 0;
  border-radius: 10px;
  padding: 10px;
  background: var(--surface-2);
}

.explorerv2-combined-detail strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.explorerv2-combined-side {
  display: grid;
  gap: 9px;
  width: 100%;
  max-width: 260px;
}

.explorerv2-combined-badge {
  justify-self: start;
  max-width: 100%;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.explorerv2-combined-badge.high {
  background: rgba(220, 38, 38, .1);
  color: #b91c1c;
}

.explorerv2-combined-badge.medium {
  background: rgba(217, 119, 6, .12);
  color: #a16207;
}

.explorerv2-combined-badge.good {
  background: rgba(22, 163, 74, .12);
  color: #15803d;
}

.explorerv2-combined-side-card {
  min-width: 0;
  border-radius: 12px;
  padding: 12px;
}

.explorerv2-combined-side-value,
.explorerv2-combined-action-text {
  margin-top: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.explorerv2-combined-side-note {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

[data-theme="dark"] .explorerv2-combined-insights article,
[data-theme="dark"] .explorerv2-combined-row,
[data-theme="dark"] .explorerv2-combined-detail,
[data-theme="dark"] .explorerv2-combined-side-card,
[data-theme="dark"] .explorerv2-combined-summary span {
  border-color: color-mix(in srgb, var(--border) 82%, #64748b 18%);
  background: var(--surface);
}

[data-theme="dark"] .explorerv2-combined-insights article {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

[data-theme="dark"] .explorerv2-combined-bar {
  background: rgba(148, 163, 184, .16);
}

[data-theme="dark"] .explorerv2-combined-bar .spend {
  background: linear-gradient(90deg, rgba(96, 165, 250, .86), rgba(147, 197, 253, .58));
}

[data-theme="dark"] .explorerv2-combined-bar .saving {
  background: linear-gradient(90deg, rgba(74, 222, 128, .7), rgba(34, 197, 94, .78));
}

[data-theme="dark"] .explorerv2-combined-money span,
[data-theme="dark"] .explorerv2-combined-badge.good {
  color: #86efac;
}

[data-theme="dark"] .explorerv2-combined-badge.high {
  color: #fca5a5;
}

[data-theme="dark"] .explorerv2-combined-badge.medium {
  color: #fcd34d;
}

.explorerv2-breakdown-head,
.explorerv2-compare-head {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.explorerv2-breakdown-card.is-selected,
.explorerv2-compare-card.is-selected {
  border-color: rgba(0, 120, 212, .24);
  background: linear-gradient(180deg, rgba(0, 120, 212, .04), transparent);
}

.explorerv2-breakdown-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.explorerv2-breakdown-metrics,
.explorerv2-compare-delta {
  display: grid;
  justify-items: end;
  gap: 4px;
  white-space: nowrap;
}

.explorerv2-breakdown-metrics strong {
  font-size: 13px;
  color: var(--text);
}

.explorerv2-breakdown-body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.explorerv2-breakdown-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.explorerv2-breakdown-stat {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px 11px;
}

.explorerv2-breakdown-stat span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.explorerv2-breakdown-stat strong {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--text);
}

.explorerv2-breakdown-sublist {
  display: grid;
  gap: 8px;
}

.explorerv2-breakdown-subrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
}

.explorerv2-breakdown-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.explorerv2-breakdown-submeta {
  margin-top: 3px;
  font-size: 10px;
  color: var(--text-muted);
}

.explorerv2-compare-bars {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.explorerv2-compare-bar-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.explorerv2-compare-bar-row strong {
  color: var(--text);
}

.explorerv2-compare-track {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}

.explorerv2-compare-track.previous span {
  background: rgba(148, 163, 184, .95);
}

.explorerv2-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.explorerv2-table th,
.explorerv2-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  white-space: nowrap;
}

.explorerv2-table th {
  position: sticky;
  top: 0;
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 1;
}

.explorerv2-table tbody tr:hover {
  background: var(--surface-2);
}

.explorerv2-table tbody tr.is-selected {
  background: rgba(0, 120, 212, .06);
}

.explorerv2-name-cell {
  min-width: 260px;
  white-space: normal;
}

.explorerv2-name-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.explorerv2-name-rank {
  width: 18px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.explorerv2-name-copy {
  min-width: 0;
}

.explorerv2-name-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.explorerv2-service-icon-wrap {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 88%, #dbeafe 12%);
  background: color-mix(in srgb, var(--surface) 85%, #f8fbff 15%);
  flex: 0 0 auto;
}

.explorerv2-service-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-theme="dark"] .explorerv2-service-icon-wrap {
  border-color: color-mix(in srgb, var(--border) 82%, #60a5fa 18%);
  background: color-mix(in srgb, var(--surface-2) 86%, #0f172a 14%);
}

.explorerv2-service-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorerv2-name-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.explorerv2-metric-strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.explorerv2-metric-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.explorerv2-delta {
  font-size: 12px;
  font-weight: 700;
}

.explorerv2-delta-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.explorerv2-delta-badge.good {
  color: var(--green);
  border-color: rgba(22, 163, 74, .24);
  background: rgba(22, 163, 74, .08);
}

.explorerv2-delta-badge.bad {
  color: var(--red);
  border-color: rgba(220, 38, 38, .22);
  background: rgba(220, 38, 38, .08);
}

.explorerv2-delta-badge.neutral {
  color: var(--text-muted);
}

.explorerv2-delta.good {
  color: var(--green);
}

.explorerv2-delta.bad {
  color: var(--red);
}

.explorerv2-delta.neutral {
  color: var(--text-muted);
}

.explorerv2-action-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}

.explorerv2-action-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.explorerv2-action-btn:hover {
  color: var(--c-azure);
  border-color: rgba(0, 120, 212, .25);
}

.explorerv2-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
}

.explorerv2-owner-badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorerv2-table-owner-cell {
  min-width: 0;
}

.explorerv2-table-owner-cell .explorerv2-metric-sub {
  margin-top: 6px;
}

.explorerv2-owner-badge.customer,
.explorerv2-owner-badge.owner {
  color: var(--green);
  border-color: rgba(22, 163, 74, .24);
  background: rgba(22, 163, 74, .08);
}

.explorerv2-owner-badge.platform {
  color: #2563eb;
  border-color: rgba(37, 99, 235, .24);
  background: rgba(37, 99, 235, .08);
}

.explorerv2-owner-badge.shared {
  color: #a16207;
  border-color: rgba(161, 98, 7, .24);
  background: rgba(161, 98, 7, .08);
}

.explorerv2-owner-badge.unresolved {
  color: var(--red);
  border-color: rgba(220, 38, 38, .22);
  background: rgba(220, 38, 38, .08);
}

.explorerv2-detail-shell {
  display: grid;
  gap: 14px;
}

.explorerv2-modal-dialog .mb {
  padding-top: 20px;
}

.explorerv2-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.explorerv2-detail-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.explorerv2-detail-subtitle {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.explorerv2-detail-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.explorerv2-detail-stat {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.explorerv2-detail-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.explorerv2-detail-stat-value {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.explorerv2-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.explorerv2-detail-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.explorerv2-detail-card h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.explorerv2-detail-card p {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.explorerv2-detail-list {
  display: grid;
  gap: 10px;
}

.explorerv2-detail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.explorerv2-detail-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.explorerv2-detail-row-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.explorerv2-detail-row-value {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.explorerv2-trend-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.explorerv2-trend-bar {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.explorerv2-trend-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.explorerv2-trend-value {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.explorerv2-trend-track {
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}

.explorerv2-trend-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.explorerv2-trend-track.current > span {
  background: rgba(0, 120, 212, .86);
}

.explorerv2-trend-track.previous > span {
  background: rgba(148, 163, 184, .9);
}

.costx-table {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: auto
}

.cost-service-drawer-root {
  --bg: #F2F2F0;
  --surface: #ffffff;
  --surface-2: #f8f8f6;
  --surface-3: #eeede8;
  --border: #e4e3dc;
  --border-2: #d8d7d0;
  --text: #18181f;
  --text-dim: #52526a;
  --text-muted: #909098;
  --green: #16a34a;
  --green-light: rgba(22, 163, 74, .10);
  --orange: #d97706;
  --orange-light: rgba(217, 119, 6, .10);
  --red: #dc2626;
  --red-light: rgba(220, 38, 38, .10);
  --purple: #7c3aed;
  --purple-light: rgba(124, 58, 237, .10);
  display: none;
  position: fixed;
  inset: 0;
  padding: 24px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  z-index: 1200;
}

.cost-service-drawer-root.open {
  display: grid;
  align-items: start;
  justify-items: center;
}

.cost-service-drawer-root,
.cost-service-drawer-root *,
.cost-service-drawer-root *::before,
.cost-service-drawer-root *::after {
  box-sizing: border-box;
}

.cost-service-drawer-root *,
.cost-service-drawer-root *::before,
.cost-service-drawer-root *::after {
  margin: 0;
  padding: 0;
}

.cost-service-drawer-root .scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 18, .32);
  backdrop-filter: blur(2px);
  animation: serviceDrawerFadeIn .25s ease forwards;
  z-index: 0;
}

@keyframes serviceDrawerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cost-service-drawer-root .drawer {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 24px 60px -16px rgba(22, 163, 74, .18), 0 40px 80px -20px rgba(0, 0, 0, .18);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-self: start;
  isolation: isolate;
  contain: layout;
  z-index: 1;
  animation: serviceDrawerIn .42s cubic-bezier(.2, .8, .2, 1) both;
}

.cost-service-drawer-root .drawer > .dh,
.cost-service-drawer-root .drawer > .dstats,
.cost-service-drawer-root .drawer > .dbody,
.cost-service-drawer-root .drawer > .df {
  position: static;
  inset: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

@keyframes serviceDrawerIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes serviceDrawerOut {
  to { opacity: 0; transform: translateY(12px) scale(.985); }
}

@keyframes serviceDrawerFadeOut {
  to { opacity: 0; }
}

.cost-service-drawer-root .dh {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Animated/glow chrome treatment is scoped to the header + summary band only.
   It is applied via .ledger-investigation-drawer__chrome (header + summary) and
   layered as a background-image so each region keeps its own base color. The
   body and footer never carry this class, so the wash stops at the summary
   strip and the content/footer sit on a clean surface. */
.cost-service-drawer-root .ledger-investigation-drawer__chrome {
  background-image: linear-gradient(135deg, rgba(22, 163, 74, .05) 0%, transparent 50%, rgba(22, 163, 74, .03) 100%);
  background-size: 200% 200%;
  animation: serviceDrawerBannerShift 14s ease-in-out infinite;
}

/* Hard guarantee: the content body and footer never receive the glow wash. */
.cost-service-drawer-root .ledger-investigation-drawer__body,
.cost-service-drawer-root .ledger-investigation-drawer__footer {
  background-image: none;
  animation: none;
}

@keyframes serviceDrawerBannerShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.cost-service-drawer-root .dh::after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(22, 163, 74, .07) 50%, transparent 100%);
  animation: serviceDrawerShimmer 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes serviceDrawerShimmer {
  0% { left: -30%; }
  60%, 100% { left: 130%; }
}

.cost-service-drawer-root .dh-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.cost-service-drawer-root .dh-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--green-light);
  border: 1px solid rgba(22, 163, 74, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  flex-shrink: 0;
  animation: serviceDrawerIconPop .55s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: .1s;
}

.cost-service-drawer-root .dh-service-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

@keyframes serviceDrawerIconPop {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: none; }
}

.cost-service-drawer-root .dh-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cost-service-drawer-root .dh-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--green);
}

.cost-service-drawer-root .dh-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
  animation: serviceDrawerPulse 2.4s ease-in-out infinite;
}

@keyframes serviceDrawerPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
  50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, .06); }
}

.cost-service-drawer-root .dh-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.cost-service-drawer-root .dh-h {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.cost-service-drawer-root .dh-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-light);
  border: 1px solid rgba(22, 163, 74, .22);
  padding: 4px 10px;
  border-radius: 999px;
}

.cost-service-drawer-root .dh-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  max-width: 560px;
  line-height: 1.5;
}

.cost-service-drawer-root .dh-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s, transform .15s, rotate .25s;
}

.cost-service-drawer-root .dh-close:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(22, 163, 74, .04);
  rotate: 90deg;
}

.cost-service-drawer-root .dstats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.cost-service-drawer-root .dstat {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
  position: relative;
  transition: background .25s;
}

.cost-service-drawer-root .dstat:last-child {
  border-right: none;
}

.cost-service-drawer-root .dstat:hover {
  background: linear-gradient(180deg, rgba(22, 163, 74, .04) 0%, transparent 100%);
}

.cost-service-drawer-root .dstat-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.cost-service-drawer-root .dstat-val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.cost-service-drawer-root .dstat:hover .dstat-val {
  transform: translateY(-1px) scale(1.02);
}

.cost-service-drawer-root .dstat-val.green {
  color: var(--green);
}

.cost-service-drawer-root .dstat-val.orange {
  color: var(--orange);
}

.cost-service-drawer-root .dstat-val.red {
  color: var(--red);
}

.cost-service-drawer-root .dstat-val.sm {
  font-size: 13px;
  font-weight: 600;
}

.cost-service-drawer-root .dstat-trend {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
}

.cost-service-drawer-root .dbody {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
  background: var(--surface-2);
  overscroll-behavior: contain;
}

.cost-service-drawer-root .ledger-investigation-drawer__body--card-grid {
  grid-template-columns: 1fr 1fr;
}

.cost-service-drawer-root .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
  animation: serviceDrawerCardIn .5s cubic-bezier(.2, .8, .2, 1) both;
}

.cost-service-drawer-root .card.c1 { animation-delay: .12s; }
.cost-service-drawer-root .card.c2 { animation-delay: .16s; }
.cost-service-drawer-root .card.c3 { animation-delay: .20s; }
.cost-service-drawer-root .card.c4 { animation-delay: .24s; }

@keyframes serviceDrawerCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.cost-service-drawer-root .card-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.cost-service-drawer-root .card-t {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.005em;
}

.cost-service-drawer-root .card-s {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.45;
}

.cost-service-drawer-root .card-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  background: var(--surface-3);
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}

.cost-service-drawer-root .trend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cost-service-drawer-root .tcol {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px 14px;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .25s;
}

.cost-service-drawer-root .tcol:hover {
  transform: translateY(-2px);
  border-color: var(--green);
}

.cost-service-drawer-root .tcol-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.cost-service-drawer-root .tcol-v {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
}

.cost-service-drawer-root .tcol-bar {
  height: 4px;
  border-radius: 3px;
  background: var(--surface-3);
  margin-top: 9px;
  overflow: hidden;
}

.cost-service-drawer-root .tcol-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  animation: serviceDrawerBarGrow 1s cubic-bezier(.3, .9, .2, 1) .25s both;
  transform-origin: left;
}

@keyframes serviceDrawerBarGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.cost-service-drawer-root .tcol.prev .tcol-fill {
  background: var(--text-muted);
}

.cost-service-drawer-root .delta-row {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--orange-light);
  border: 1px solid rgba(217, 119, 6, .22);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cost-service-drawer-root .delta-arr {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.cost-service-drawer-root .delta-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}

.cost-service-drawer-root .delta-text b {
  color: var(--orange);
  font-weight: 700;
}

.cost-service-drawer-root .list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cost-service-drawer-root .li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}

.cost-service-drawer-root .li:hover {
  transform: translateX(3px);
  border-color: var(--green);
  box-shadow: 0 4px 14px -6px rgba(22, 163, 74, .25);
}

.cost-service-drawer-root .li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--green);
  transition: width .25s ease;
}

.cost-service-drawer-root .li:hover::before {
  width: 3px;
}

.cost-service-drawer-root .li-info {
  flex: 1;
  min-width: 0;
}

.cost-service-drawer-root .li-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-service-drawer-root .li-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cost-service-drawer-root .li-bar {
  flex: 0 0 80px;
  height: 5px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}

.cost-service-drawer-root .li-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, #22c55e 100%);
  border-radius: 3px;
  animation: serviceDrawerBarGrow 1s cubic-bezier(.3, .9, .2, 1) both;
  transform-origin: left;
}

.cost-service-drawer-root .li-amt {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 70px;
}

.cost-service-drawer-root .checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cost-service-drawer-root .chk {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .2s;
  position: relative;
  cursor: pointer;
}

.cost-service-drawer-root .chk:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: 0 6px 16px -8px rgba(22, 163, 74, .25);
}

.cost-service-drawer-root .chk-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
}

.cost-service-drawer-root .chk-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.cost-service-drawer-root .chk:hover .chk-icon {
  transform: scale(1.12) rotate(-3deg);
}

.cost-service-drawer-root .chk-icon.warn {
  background: var(--orange-light);
  color: var(--orange);
}

.cost-service-drawer-root .chk-icon.info {
  background: var(--green-light);
  color: var(--green);
}

.cost-service-drawer-root .chk-icon.alert {
  background: var(--red-light);
  color: var(--red);
}

.cost-service-drawer-root .chk-t {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

.cost-service-drawer-root .chk-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--surface-3);
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.cost-service-drawer-root .chk-tag.green {
  background: var(--green-light);
  color: var(--green);
}

.cost-service-drawer-root .chk-tag.red {
  background: var(--red-light);
  color: var(--red);
}

.cost-service-drawer-root .chk-d {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
  padding-left: 31px;
}

.cost-service-drawer-root .df {
  padding: 14px 22px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.cost-service-drawer-root .ledger-investigation-drawer__header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cost-service-drawer-root .ledger-investigation-drawer__summary[hidden] {
  display: none;
}

.cost-service-drawer-root .df-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.cost-service-drawer-root .df-actions {
  display: flex;
  gap: 8px;
}

.cost-service-drawer-root .btn {
  height: 34px;
  padding: 0 14px;
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, color .15s, background .15s, transform .12s;
}

.cost-service-drawer-root .btn:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(22, 163, 74, .04);
}

.cost-service-drawer-root .btn:active {
  transform: scale(.97);
}

.cost-service-drawer-root .btn.primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 4px 12px -4px rgba(22, 163, 74, .5);
}

.cost-service-drawer-root .btn.primary:hover {
  background: #138a3e;
  border-color: #138a3e;
  color: #fff;
}

@media(max-width: 780px) {
  .cost-service-drawer-root {
    padding: 12px;
  }

  .cost-service-drawer-root .drawer {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .cost-service-drawer-root .dbody,
  .cost-service-drawer-root .ledger-investigation-drawer__body--card-grid {
    grid-template-columns: 1fr;
  }

  .cost-service-drawer-root .dstats {
    grid-template-columns: repeat(2, 1fr);
  }

  .cost-service-drawer-root .dstat {
    border-bottom: 1px solid var(--border);
  }

  .cost-service-drawer-root .df {
    align-items: stretch;
    flex-direction: column;
  }

  .cost-service-drawer-root .df-actions {
    width: 100%;
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .cost-service-drawer-root .df-actions .btn {
    flex: 1 1 180px;
    justify-content: center;
  }
}

/* ==========================================================================
   PHASE 4 SECTION: Budgets
   ========================================================================== */
.budgetv2-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.showbackv2-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ==========================================================================
   PHASE 4 SECTION: Governance
   ========================================================================== */
.governancev2-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

:is(.budgetv2-shell, .showbackv2-shell, .governancev2-shell) > :is(.cost-command-bar-wrap, section, .anl-g2, .costx-controls, .tbar, .tw, .anl-box, .showbackv2-filterbar, .showbackv2-stack, .governancev2-main-grid) {
  margin-bottom: var(--ledger-section-gap);
}

:is(.budgetv2-shell, .showbackv2-shell, .governancev2-shell) > .ledger-command-chrome {
  margin-bottom: 0;
}

.governancev2-header-tools {
  display: grid;
  grid-template-columns: 132px 180px 170px minmax(240px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  flex: 1 1 auto;
  margin-top: 14px;
}

.governancev2-search-field {
  min-width: 0;
}

.governancev2-main-grid {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.governancev2-sidebar {
  display: grid;
  gap: 14px;
  align-content: start;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.governancev2-sidebar-section {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.governancev2-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.governancev2-sidebar-copy,
.governancev2-panel-meta {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

.governancev2-trend-panel {
  grid-column: 2 / span 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
}

.governancev2-health-panel {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
}

.governancev2-queue-panel {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
}

.governancev2-exception-panel {
  grid-column: 2;
  grid-row: 3;
}

.governancev2-alert-panel {
  grid-column: 3;
  grid-row: 3;
}

.governancev2-table-panel {
  grid-column: 1 / -1;
  grid-row: 4;
}

.governancev2-view-list {
  display: grid;
  gap: 8px;
}

.governancev2-view-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.governancev2-view-item span {
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.governancev2-view-item strong {
  font-size: 11px;
  color: var(--text-muted);
  border-radius: 999px;
  min-width: 26px;
  padding: 3px 8px;
  text-align: center;
  background: #f7f6f2;
  border: 1px solid #dedbd3;
}

.governancev2-view-item:hover,
.governancev2-view-item.active {
  border-color: rgba(34, 166, 90, .34);
  background: #eaf8ef;
  box-shadow: 0 8px 20px rgba(32, 33, 54, .06);
}

.governancev2-view-item:hover {
  transform: translateY(-1px);
}

.governancev2-view-item:hover strong,
.governancev2-view-item.active strong {
  color: #22a65a;
  border-color: rgba(34, 166, 90, .28);
  background: #ffffff;
}

.governancev2-trend-shell {
  display: grid;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.governancev2-trend-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.governancev2-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted);
  min-width: 0;
}

.governancev2-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.governancev2-trend-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.governancev2-trend-legend i.mapped {
  background: #22a65a;
}

.governancev2-trend-legend i.unmapped {
  background: #e0524d;
}

.governancev2-trend-legend i.tag {
  background: #2f80ed;
}

.governancev2-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 12px;
  align-items: stretch;
  min-height: 190px;
  max-width: 100%;
  min-width: 0;
}

.governancev2-trend-col {
  display: grid;
  grid-template-rows: auto minmax(118px, 1fr) auto;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dedbd3;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(32, 33, 54, .05);
  animation: governanceFadeSlide .46s ease both;
  animation-delay: var(--governance-stagger, 0ms);
  box-sizing: border-box;
  overflow: hidden;
}

.governancev2-trend-card-head,
.governancev2-trend-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.governancev2-trend-card-head span,
.governancev2-trend-foot span {
  font-size: 11px;
  color: #8d8da0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.governancev2-trend-card-head strong {
  color: #202136;
  font-size: 13px;
  white-space: nowrap;
}

.governancev2-trend-foot strong {
  color: #202136;
  font-size: 12px;
  white-space: nowrap;
}

.governancev2-trend-bars {
  width: 100%;
  min-height: 118px;
  border-radius: 12px;
  border: 1px solid #dedbd3;
  background: linear-gradient(180deg, #fff1f0, #ffffff);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.governancev2-trend-bars span {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: bottom;
  transform: scaleY(var(--bar-scale, 0));
  animation: governanceScaleY .9s cubic-bezier(.2, .72, .2, 1) both;
  animation-delay: calc(var(--governance-stagger, 0ms) + 120ms);
}

.governancev2-trend-bars .mapped {
  height: 100%;
  background: linear-gradient(180deg, rgba(34, 166, 90, .76), #22a65a);
  z-index: 2;
  border-radius: 12px 12px 0 0;
}

.governancev2-trend-bars .unmapped {
  height: 100%;
  background: #fff1f0;
  z-index: 1;
}

.governancev2-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid #dedbd3;
  background: #ffffff;
  color: #202136;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.governancev2-status-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.governancev2-status-pill.good {
  color: #22a65a;
  border-color: rgba(34, 166, 90, .28);
  background: #eaf8ef;
  animation: governanceSoftPulse 2.8s ease-in-out infinite;
}

.governancev2-status-pill.warn {
  color: #e27b00;
  border-color: rgba(226, 123, 0, .28);
  background: #fff6eb;
}

.governancev2-status-pill.bad {
  color: #e0524d;
  border-color: rgba(224, 82, 77, .28);
  background: #fff1f0;
}

.governancev2-trend-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.governancev2-trend-kpi {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid #dedbd3;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px 12px;
  box-sizing: border-box;
}

.governancev2-trend-kpi span {
  font-size: 10px;
  font-weight: 800;
  color: #8d8da0;
  text-transform: uppercase;
  letter-spacing: .06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.governancev2-trend-kpi strong {
  color: #202136;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.governancev2-trend-kpi[data-tone="good"] {
  border-color: rgba(34, 166, 90, .22);
}

.governancev2-trend-kpi[data-tone="warn"] {
  border-color: rgba(226, 123, 0, .24);
}

.governancev2-trend-kpi[data-tone="bad"] {
  border-color: rgba(224, 82, 77, .24);
}

.governancev2-signal-grid,
.governancev2-mini-grid {
  display: grid;
  gap: 10px;
}

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

.governancev2-signal-card,
.governancev2-mini-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px 14px;
  min-width: 0;
  box-sizing: border-box;
}

.governancev2-signal-card[data-tone="good"] {
  border-color: rgba(34, 166, 90, .32);
}

.governancev2-signal-card[data-tone="bad"] {
  border-color: rgba(224, 82, 77, .34);
}

.governancev2-signal-card[data-tone="warn"] {
  border-color: rgba(226, 123, 0, .34);
}

.governancev2-signal-card {
  animation: governanceFadeSlide .42s ease both;
  animation-delay: var(--governance-stagger, 0ms);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.governancev2-signal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(32, 33, 54, .08);
}

.governancev2-signal-k,
.governancev2-mini-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.governancev2-signal-v,
.governancev2-mini-v {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.governancev2-signal-s,
.governancev2-mini-s {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.governancev2-route-list,
.governancev2-exception-list {
  display: grid;
  gap: 8px;
}

.governancev2-route-row,
.governancev2-exception-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 11px 12px;
  min-width: 0;
  box-sizing: border-box;
}

.governancev2-route-row {
  animation: governanceFadeSlide .38s ease both;
  animation-delay: var(--governance-stagger, 0ms);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.governancev2-route-row:hover {
  border-color: rgba(34, 166, 90, .34);
  background: #eaf8ef;
  box-shadow: 0 8px 20px rgba(32, 33, 54, .06);
  transform: translateY(-1px);
}

.governancev2-route-main {
  min-width: 0;
}

.governancev2-exception-row[data-status="blocked"] {
  border-color: rgba(220, 38, 38, .18);
}

.governancev2-exception-row[data-status="needs_review"] {
  border-color: rgba(217, 119, 6, .2);
}

.governancev2-route-title,
.governancev2-exception-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.governancev2-route-meta,
.governancev2-exception-copy {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.governancev2-route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.governancev2-route-value,
.governancev2-exception-value {
  display: grid;
  gap: 3px;
  justify-items: end;
  min-width: 98px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.governancev2-route-value span {
  font-size: 10px;
  font-weight: 700;
  color: #8d8da0;
}

.governancev2-route-value strong {
  font-size: 13px;
  color: #202136;
}

@keyframes governanceFadeSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes governanceScaleY {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(var(--bar-scale, 0));
  }
}

@keyframes governanceSoftPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(34, 166, 90, 0);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(34, 166, 90, .08);
  }
}

.governancev2-table-wrap tbody tr.is-selected {
  background: var(--surface-2);
}

.governancev2-type-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
}

.governancev2-coverage-cell {
  min-width: 140px;
}

.governancev2-action-cell {
  display: flex;
  justify-content: flex-end;
}

.governancev2-row-btn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

.governancev2-detail-modal .mb {
  padding-top: 20px;
}

.governancev2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.governancev2-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .72;
}

.governancev2-badge.invoice_ready {
  color: var(--green);
  border-color: rgba(22, 163, 74, .22);
  background: rgba(22, 163, 74, .08);
}

.governancev2-badge.needs_review,
.governancev2-badge.watch {
  color: var(--orange);
  border-color: rgba(217, 119, 6, .22);
  background: rgba(217, 119, 6, .08);
}

.governancev2-badge.blocked {
  color: var(--red);
  border-color: rgba(220, 38, 38, .22);
  background: rgba(220, 38, 38, .08);
}

.budgetv2-header-tools {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex: 1 1 100%;
  margin-top: 14px;
}

.budgetv2-header-tools .costx-field {
  min-width: 150px;
}

.budgetv2-period-input {
  min-width: 150px;
}

.budgetv2-scope-btn {
  min-width: 210px;
}

.budgetv2-panel-grid {
  margin-bottom: 0;
}

.budgetv2-controls {
  grid-template-columns: minmax(240px, 1.2fr) 170px 170px 180px;
  margin-top: 0;
}

.budgetv2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.budgetv2-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

.budgetv2-badge.on-track {
  color: var(--green);
  background: rgba(22, 163, 74, .08);
  border-color: rgba(22, 163, 74, .22);
}

.budgetv2-badge.at-risk {
  color: var(--orange);
  background: rgba(217, 119, 6, .08);
  border-color: rgba(217, 119, 6, .22);
}

.budgetv2-badge.projected-overrun {
  color: #a16207;
  background: rgba(161, 98, 7, .08);
  border-color: rgba(161, 98, 7, .22);
}

.budgetv2-badge.exceeded {
  color: var(--red);
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .22);
}

.budgetv2-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.budgetv2-list-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface);
}

.budgetv2-list-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.budgetv2-list-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.budgetv2-list-meta {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.budgetv2-list-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.budgetv2-exception-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.budgetv2-exception {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.budgetv2-exception[data-severity="danger"] {
  border-color: rgba(220, 38, 38, .18);
}

.budgetv2-exception[data-severity="warm"] {
  border-color: rgba(217, 119, 6, .22);
}

.budgetv2-exception-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.budgetv2-exception-detail {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.budgetv2-bar-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.budgetv2-bar-meta {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 92px;
  text-align: right;
}

.budget-status-chart {
  display: grid;
  gap: 10px;
}

.budget-status-row {
  display: grid;
  grid-template-columns: minmax(112px, 148px) minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background-color .2s ease, transform .2s ease;
}

.budget-status-row:hover {
  background: rgba(35, 36, 56, .035);
  transform: translateX(2px);
}

.budget-status-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
  color: #232438;
}

.budget-status-count {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #8D8DA0;
  font-variant-numeric: tabular-nums;
}

.budget-status-track {
  position: relative;
  height: 9px;
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  background: #F0EEE8;
}

.budget-status-fill {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  transform: scaleX(0);
  transform-origin: left center;
  animation: budgetStatusGrow 880ms cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.budget-status-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .52), transparent);
  transform: translateX(-100%);
  animation: budgetStatusShimmer 2.8s ease-in-out infinite;
  opacity: .72;
}

.budget-status-fill.green {
  background: #19A45B;
}

.budget-status-fill.orange {
  background: #E27B00;
}

.budget-status-fill.brown {
  background: #A76308;
}

.budget-status-fill.red {
  background: #E52A2F;
  box-shadow: 0 0 16px rgba(229, 42, 47, .24);
}

.budget-status-fill.is-zero {
  opacity: 0;
}

.budget-status-fill.pulse-soft {
  animation-name: budgetStatusGrow, budgetStatusSoftPulse;
  animation-duration: 880ms, 2.4s;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1), ease-in-out;
  animation-delay: var(--delay, 0ms), 980ms;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}

.budget-status-fill.pulse-alert {
  animation-name: budgetStatusGrow, budgetStatusAlertPulse;
  animation-duration: 880ms, 1.8s;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1), ease-in-out;
  animation-delay: var(--delay, 0ms), 980ms;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}

.budget-forecast-chart {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.budget-forecast-svg {
  display: block;
  width: 100%;
  height: 214px;
  overflow: visible;
}

.budget-forecast-grid line {
  stroke: rgba(35, 36, 56, .08);
  stroke-width: 1;
}

.budget-forecast-threshold {
  stroke: #E52A2F;
  stroke-width: 1.4;
  stroke-dasharray: 7 7;
  opacity: .58;
}

.budget-forecast-area {
  opacity: 0;
  animation: budgetForecastFadeIn 700ms ease forwards .9s;
}

.budget-forecast-line {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.budget-forecast-line.actual {
  stroke: #10A8E8;
}

.budget-forecast-line.forecast {
  stroke: #E52A2F;
  stroke-dasharray: 8 10;
}

.budget-forecast-reveal {
  transform: scaleX(0);
  transform-origin: left center;
  transform-box: fill-box;
  animation: budgetForecastReveal 1.15s cubic-bezier(.2, .8, .2, 1) forwards;
}

.budget-forecast-reveal.forecast {
  animation-delay: .45s;
}

.budget-forecast-dot {
  fill: #E52A2F;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: budgetForecastDotIn 360ms ease forwards 1.3s, budgetForecastDotPulse 1.7s ease-in-out infinite 1.65s;
}

.budget-forecast-label {
  opacity: 0;
  transform: translateY(4px);
  animation: budgetForecastLabelIn 420ms ease forwards 1.45s;
}

.budget-forecast-label rect {
  fill: #FFF4F4;
  stroke: rgba(229, 42, 47, .12);
}

.budget-forecast-label text {
  fill: #E52A2F;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.budget-forecast-axis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  color: #8D8DA0;
  font-size: 10px;
  font-weight: 700;
}

.budget-forecast-axis span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-forecast-axis span:nth-child(n+2):nth-child(-n+4) {
  text-align: center;
}

.budget-forecast-axis span:last-child {
  text-align: right;
}

.budget-forecast-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.budget-forecast-kpis > div {
  min-width: 0;
  border: 1px solid #DEDBD3;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(35, 36, 56, .045);
  padding: 10px 11px;
}

.budget-forecast-kpis span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8D8DA0;
}

.budget-forecast-kpis strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 750;
  color: #232438;
}

.budget-forecast-kpis strong.is-over {
  color: #E52A2F;
}

@keyframes budgetStatusGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(var(--bar-scale, 1)); }
}

@keyframes budgetStatusShimmer {
  to { transform: translateX(100%); }
}

@keyframes budgetStatusSoftPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@keyframes budgetStatusAlertPulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 14px rgba(229, 42, 47, .2); }
  50% { filter: brightness(1.13); box-shadow: 0 0 22px rgba(229, 42, 47, .36); }
}

@keyframes budgetForecastReveal {
  to { transform: scaleX(1); }
}

@keyframes budgetForecastFadeIn {
  to { opacity: 1; }
}

@keyframes budgetForecastDotIn {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes budgetForecastDotPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(229, 42, 47, 0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 7px rgba(229, 42, 47, .42)); transform: scale(1.16); }
}

@keyframes budgetForecastLabelIn {
  to { opacity: 1; transform: translateY(0); }
}

.budgetv2-table-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.budgetv2-table-name strong {
  font-size: 13px;
  color: var(--text);
}

.budgetv2-table-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

.budgetv2-usage-cell {
  min-width: 170px;
}

.budgetv2-progress {
  margin-top: 6px;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.budgetv2-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.budgetv2-progress > span.on-track {
  background: color-mix(in srgb, var(--green) 72%, #ffffff 28%);
}

.budgetv2-progress > span.at-risk {
  background: color-mix(in srgb, var(--orange) 76%, #ffffff 24%);
}

.budgetv2-progress > span.projected-overrun {
  background: color-mix(in srgb, #a16207 76%, #ffffff 24%);
}

.budgetv2-progress > span.exceeded {
  background: color-mix(in srgb, var(--red) 78%, #ffffff 22%);
}

.budgetv2-table-wrap tbody tr.is-selected {
  background: var(--surface-2);
}

.budgetv2-detail-panel {
  margin-top: 0;
}

.budgetv2-detail-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 14px;
  align-items: start;
}

.budgetv2-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.budgetv2-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.budgetv2-detail-note {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.budgetv2-detail-note strong {
  display: block;
  font-size: 12px;
  color: var(--text);
}

.budgetv2-detail-note span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.budgetv2-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 16px 0;
}

/* ==========================================================================
   PHASE 4 SECTION: Dashboard
   ========================================================================== */
.executivev2-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
}

.executivev2-shell.cost-explorer-page {
  gap: 0;
  padding-top: 0;
}

#panel-dashboard .executivev2-shell.cost-explorer-page {
  border: 0;
  border-radius: 0;
  padding: 0;
}

.executivev2-shell > .costx-head {
  padding-top: 0;
}

.executivev2-header-tools {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}

.executivev2-toolbar-main {
  display: flex;
  align-items: end;
  gap: 10px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
}

.executivev2-toolbar-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

.executivev2-head-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.executivev2-head-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.executivev2-shell .costx-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.08;
  color: color-mix(in srgb, var(--text) 92%, #0f172a 8%);
}

.executivev2-shell .costx-sub {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 760px;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text) 12%);
}

.executivev2-head-cta {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-self: center;
}

.executivev2-header-tools .costx-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  flex: 0 0 auto;
  margin: 0;
  min-height: 0;
}

.executivev2-header-tools .costx-field label {
  min-height: 0;
}

.executivev2-date-wrap {
  position: relative;
  flex: 0 0 auto;
  align-self: end;
}

.executivev2-icon-btn {
  width: var(--control-height);
  min-width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: color-mix(in srgb, var(--border) 88%, var(--green) 12%);
  color: var(--text-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.executivev2-icon-btn:hover,
.executivev2-icon-btn:focus-visible,
.executivev2-date-wrap.is-open .executivev2-icon-btn,
.executivev2-date-wrap.is-active .executivev2-icon-btn {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 36%, var(--border) 64%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 7%, var(--surface) 93%) 0%, color-mix(in srgb, var(--green) 12%, var(--surface-2) 88%) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 0 0 3px color-mix(in srgb, var(--green) 10%, transparent 90%);
}

.executivev2-icon-btn svg {
  width: 16px;
  height: 16px;
}

.executivev2-date-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 356px;
  width: 356px;
  max-width: min(356px, calc(100vw - 32px));
  padding: 14px;
  display: none;
  z-index: 265;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--border) 86%, var(--green) 14%);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .14);
}

.executivev2-date-panel[aria-hidden="true"] {
  display: none !important;
  pointer-events: none;
}

.executivev2-date-panel.open {
  display: block;
}

.executivev2-date-panel.open[aria-hidden="false"] {
  display: block !important;
}

.executivev2-date-panel-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.executivev2-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.executivev2-date-field {
  display: grid;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
}

.executivev2-date-input {
  min-width: 0;
  height: var(--control-height);
  border-radius: 10px;
}

.executivev2-date-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.executivev2-panel-btn,
.executivev2-apply-btn {
  min-width: 88px;
  height: var(--control-height);
}

.executivev2-toggle-field {
  min-width: 0;
  flex: 0 0 auto;
}

.executivev2-period-toggle {
  width: fit-content;
  max-width: 100%;
}

.executivev2-period-toggle .costx-quick-btn.active {
  background: rgba(22, 163, 74, .08);
  color: var(--green);
}

.executivev2-toolbar-btn {
  min-width: 0;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  border-color: var(--border);
  box-shadow: none;
  white-space: nowrap;
  flex: 0 0 auto;
}

.executivev2-toolbar-btn > span:last-child {
  white-space: nowrap;
  line-height: 1;
}

.executivev2-toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.executivev2-toolbar-icon svg {
  width: 13px;
  height: 13px;
}

.executivev2-refresh-btn {
  min-width: 94px;
}

.executivev2-export-btn {
  min-width: 112px;
}

.executivev2-reset-btn {
  min-width: 94px;
}

.executivev2-toolbar-btn {
  height: var(--control-height);
}

.executivev2-secondary-btn {
  background: none;
  color: var(--text-dim);
}

.executivev2-secondary-btn:hover {
  background: #F7FAF6;
  color: var(--green);
  border-color: var(--green);
}

.executivev2-apply-btn {
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 10%, var(--surface) 90%) 0%, color-mix(in srgb, var(--green) 15%, var(--surface-2) 85%) 100%);
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 24%, var(--border) 76%);
}

.executivev2-apply-btn:hover {
  background: color-mix(in srgb, var(--green) 14%, var(--surface) 86%);
  border-color: color-mix(in srgb, var(--green) 38%, var(--border) 62%);
  color: var(--green);
}

/* ── AI button: registered custom property for animated rim ── */
@property --exec-ai-rim {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes execAiRimRotate {
  from { --exec-ai-rim: 0deg; }
  to   { --exec-ai-rim: 360deg; }
}

@keyframes execAiIconSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes execAiRailPulse {
  0%   { transform: translateY(-12%); opacity: .22; }
  50%  { transform: translateY(18%);  opacity: .62; }
  100% { transform: translateY(-12%); opacity: .22; }
}

@keyframes diagAiShellIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Base button ── */
.executivev2-ai-action-btn {
  position: relative;
  isolation: isolate;
  min-width: 184px;
  min-height: 46px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  justify-content: flex-start;
  border: 2px solid transparent !important;
  border-radius: 14px;
  color: var(--text) !important;

  /* Rotating conic rim fused with the fill — the rim IS the border */
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, #f5eeff 90%, var(--surface) 10%) 0%,
      color-mix(in srgb, #e8d6ff 78%, var(--surface) 22%) 100%),
    conic-gradient(from var(--exec-ai-rim),
      transparent        0deg,
      rgba(148,116,240,0)  30deg,
      rgba(148,116,240,.72) 80deg,
      rgba(196,172,255,.88) 115deg,
      rgba(148,116,240,.60) 155deg,
      transparent        200deg,
      transparent        360deg);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;

  animation: execAiRimRotate 4s linear infinite;
  transition: transform .22s ease, color .22s ease, background-image .22s ease;
}

/* Subtle inner shimmer sweep (not overflow-dependent, stays within bounds) */
.executivev2-ai-action-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255,255,255,.48) 0%,
    rgba(216,196,255,.18) 45%,
    transparent 70%);
  transition: opacity .22s ease;
  opacity: .7;
}

/* Focus ring */
.executivev2-ai-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(141, 108, 240, .26);
}

/* ── HOVER — faster rim, richer fill, slight lift ── */
.executivev2-ai-action-btn:hover {
  transform: translateY(-2px);
  border-color: transparent;
  color: var(--text);
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, #f0e6ff 92%, var(--surface) 8%) 0%,
      color-mix(in srgb, #ddc8ff 80%, var(--surface) 20%) 100%),
    conic-gradient(from var(--exec-ai-rim),
      transparent        0deg,
      rgba(141,108,240,0)  20deg,
      rgba(141,108,240,.90) 72deg,
      rgba(192,168,255,1.0) 110deg,
      rgba(141,108,240,.72) 150deg,
      transparent        192deg,
      transparent        360deg);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  animation-duration: 2.4s;
}

.executivev2-ai-action-btn:hover::before {
  opacity: 1;
}

/* ── ACTIVE / OPEN — clearly different fill, slower settled rim ── */
.executivev2-ai-action-btn.is-active {
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, #dfc8ff 84%, var(--surface) 16%) 0%,
      color-mix(in srgb, #c9a8ff 72%, var(--surface) 28%) 100%),
    conic-gradient(from var(--exec-ai-rim),
      transparent        0deg,
      rgba(100,70,200,0)   20deg,
      rgba(100,70,200,.80) 70deg,
      rgba(148,116,240,.95) 110deg,
      rgba(100,70,200,.65) 150deg,
      transparent        190deg,
      transparent        360deg);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  animation-duration: 5.5s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(100,70,200,.18);
}

.executivev2-ai-action-btn.is-active::before {
  opacity: .5;
  background: linear-gradient(135deg,
    rgba(255,255,255,.6) 0%,
    rgba(196,168,255,.22) 45%,
    transparent 70%);
}

/* ── LOADING — fastest rim + icon spin ── */
.executivev2-ai-action-btn.is-loading {
  animation-duration: 1.3s;
}

.executivev2-ai-action-btn.is-loading .executivev2-ai-action-icon-svg {
  animation: execAiIconSpin 1.8s linear infinite;
}

.executivev2-ai-action-btn.is-loading .executivev2-ai-action-meta {
  color: #7c54e0;
  font-weight: 600;
}

/* ==========================================================================
   PHASE 4 SECTION: Dark Theme Overrides
   ========================================================================== */
/* ── DARK MODE base ── */
[data-theme="dark"] .executivev2-ai-action-btn {
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, #2e1f56 78%, var(--surface) 22%) 0%,
      color-mix(in srgb, #241648 76%, var(--surface-2) 24%) 100%),
    conic-gradient(from var(--exec-ai-rim),
      transparent         0deg,
      rgba(160,136,255,0)  30deg,
      rgba(160,136,255,.70) 80deg,
      rgba(210,190,255,.84) 115deg,
      rgba(160,136,255,.55) 155deg,
      transparent         200deg,
      transparent         360deg);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

[data-theme="dark"] .executivev2-ai-action-btn::before {
  background: linear-gradient(135deg,
    rgba(255,255,255,.12) 0%,
    rgba(180,148,255,.10) 45%,
    transparent 70%);
}

/* ── DARK MODE hover ── */
[data-theme="dark"] .executivev2-ai-action-btn:hover {
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, #3e2870 84%, var(--surface) 16%) 0%,
      color-mix(in srgb, #311e5c 82%, var(--surface-2) 18%) 100%),
    conic-gradient(from var(--exec-ai-rim),
      transparent         0deg,
      rgba(168,148,255,0)  20deg,
      rgba(168,148,255,.88) 72deg,
      rgba(216,200,255,.96) 110deg,
      rgba(168,148,255,.68) 150deg,
      transparent         192deg,
      transparent         360deg);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

/* ── DARK MODE active ── */
[data-theme="dark"] .executivev2-ai-action-btn.is-active {
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, #4c2e88 84%, var(--surface) 16%) 0%,
      color-mix(in srgb, #3a1f6e 80%, var(--surface-2) 20%) 100%),
    conic-gradient(from var(--exec-ai-rim),
      transparent         0deg,
      rgba(160,128,255,0)  20deg,
      rgba(160,128,255,.88) 70deg,
      rgba(210,190,255,1.0) 110deg,
      rgba(160,128,255,.72) 150deg,
      transparent         190deg,
      transparent         360deg);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(100,70,200,.22);
}

[data-theme="dark"] .executivev2-ai-action-btn.is-loading .executivev2-ai-action-meta {
  color: #c8b0ff;
}

/* ── Icon badge ── */
.executivev2-ai-action-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5c36b8;
  background: linear-gradient(150deg, rgba(255,255,255,.96) 0%, rgba(226,208,255,.88) 100%);
  border: 1px solid rgba(120,88,220,.26);
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.executivev2-ai-action-btn.is-active .executivev2-ai-action-icon {
  background: linear-gradient(150deg, rgba(255,255,255,.98) 0%, rgba(208,184,255,.94) 100%);
  border-color: rgba(100,68,192,.40);
  color: #4a28a8;
}

.executivev2-ai-action-icon-svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

[data-theme="dark"] .executivev2-ai-action-icon {
  color: #d4bcff;
  background: linear-gradient(150deg, rgba(140,112,232,.38) 0%, rgba(96,66,188,.28) 100%);
  border-color: rgba(180,156,255,.30);
}

[data-theme="dark"] .executivev2-ai-action-btn.is-active .executivev2-ai-action-icon {
  background: linear-gradient(150deg, rgba(168,140,255,.48) 0%, rgba(116,82,220,.38) 100%);
  border-color: rgba(200,176,255,.42);
  color: #efe0ff;
}

/* ── Text copy ── */
.executivev2-ai-action-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}

.executivev2-ai-action-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.executivev2-ai-action-meta {
  font-size: 10px;
  line-height: 1.2;
  color: color-mix(in srgb, var(--text-muted) 72%, #7253d6 28%);
  transition: color .18s ease;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .executivev2-ai-action-btn {
    animation: none;
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, #f5eeff 90%, var(--surface) 10%) 0%,
        color-mix(in srgb, #e8d6ff 78%, var(--surface) 22%) 100%),
      linear-gradient(rgba(141,108,240,.45), rgba(141,108,240,.45));
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
  }

  .executivev2-ai-action-btn.is-active {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, #dfc8ff 84%, var(--surface) 16%) 0%,
        color-mix(in srgb, #c9a8ff 72%, var(--surface) 28%) 100%),
      linear-gradient(rgba(100,70,200,.70), rgba(100,70,200,.70));
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
  }

  [data-theme="dark"] .executivev2-ai-action-btn {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, #2e1f56 78%, var(--surface) 22%) 0%,
        color-mix(in srgb, #241648 76%, var(--surface-2) 24%) 100%),
      linear-gradient(rgba(160,136,255,.50), rgba(160,136,255,.50));
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
  }

  .executivev2-ai-action-btn.is-loading .executivev2-ai-action-icon-svg {
    animation: none;
  }

  .diag-ai-explain {
    animation: none;
  }

  .diag-ai-explain::after {
    animation: none;
  }

  .ionix-ai-surface,
  .executivev2-ai-shell,
  .diag-ai-explain-wrap .ionix-ai-surface,
  .diag-ai-explain-wrap .executivev2-ai-shell {
    animation: none;
    background-image:
      linear-gradient(180deg, color-mix(in srgb, #fbf7ff 74%, var(--surface) 26%) 0%, color-mix(in srgb, #f2e9ff 54%, var(--surface-2) 46%) 100%),
      linear-gradient(rgba(130, 84, 229, 0.54), rgba(130, 84, 229, 0.54));
  }

  [data-theme="dark"] .ionix-ai-surface,
  [data-theme="dark"] .executivev2-ai-shell,
  [data-theme="dark"] .diag-ai-explain-wrap .ionix-ai-surface,
  [data-theme="dark"] .diag-ai-explain-wrap .executivev2-ai-shell {
    background-image:
      linear-gradient(180deg, color-mix(in srgb, #241648 62%, var(--surface) 38%) 0%, color-mix(in srgb, #1d123a 58%, var(--surface-2) 42%) 100%),
      linear-gradient(rgba(160, 136, 255, 0.58), rgba(160, 136, 255, 0.58));
  }
}

.executivev2-select {
  min-width: 150px;
  width: 100%;
}

.executivev2-layer {
  position: relative;
  isolation: isolate;
}

.executivev2-dashboard-surface {
  display: flex;
  flex-direction: column;
  gap: var(--ledger-section-gap);
  transition: opacity .24s ease, filter .24s ease;
}

.ledger-exec-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  gap: var(--ledger-card-grid-gap, 18px);
  align-items: stretch;
}

.ledger-exec-two-col-balanced {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
}

.ledger-exec-card {
  min-width: 0;
  padding: 24px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 14px 34px -22px rgba(15,23,42,.28);
}

/* Unified executive hero: merges cockpit + posture into one card */
.ledger-exec-hero {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: none;
  overflow: hidden;
}

.ledger-exec-hero > .ledger-exec-cockpit,
.ledger-exec-hero > #executiveDecisionCockpit,
.ledger-exec-hero > #executivePostureStrip,
.ledger-exec-hero > .ledger-exec-posture-strip {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ledger-exec-hero > #executiveDecisionCockpit > .ledger-exec-cockpit,
.ledger-exec-hero > .ledger-exec-cockpit {
  padding: 0;
}

.ledger-exec-hero > #executivePostureStrip,
.ledger-exec-hero > .ledger-exec-posture-strip {
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.ledger-exec-hero > #executivePostureStrip > .ledger-exec-posture-strip {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ledger-exec-section-head,
.ledger-exec-register-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.ledger-exec-eyebrow,
.ledger-exec-metric-label,
.ledger-exec-posture-label,
.ledger-exec-risk-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ledger-exec-eyebrow-good {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  margin-bottom: 12px;
}

.ledger-exec-eyebrow-good::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent);
}

.ledger-exec-cockpit {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.ledger-exec-cockpit-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 42px;
  padding: 34px 38px 28px;
  align-items: start;
}

.ledger-exec-cockpit-title {
  max-width: 900px;
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.04;
  letter-spacing: -.05em;
  font-weight: 800;
  color: var(--text);
}

.ledger-exec-title-token.tone-good { color: var(--green); }
.ledger-exec-title-token.tone-warn { color: var(--orange); }
.ledger-exec-title-token.tone-bad { color: var(--red); }

.ledger-exec-lead {
  max-width: 860px;
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-dim);
}

.ledger-exec-action-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ledger-exec-action-step {
  min-width: 0;
  padding-right: 18px;
  border-right: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.ledger-exec-action-step:last-child {
  padding-right: 0;
  border-right: 0;
}

.ledger-exec-action-step small {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, #7c3aed 72%, var(--text-muted) 28%);
}

.ledger-exec-action-step strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--text);
}

.ledger-exec-action-step span,
.ledger-exec-side-note span,
.ledger-exec-posture-note,
.ledger-exec-metric-note,
.ledger-exec-rank-context,
.ledger-exec-rank-share,
.ledger-exec-risk-card p {
  font-size: 12px;
  line-height: 1.48;
  color: var(--text-muted);
}

.ledger-exec-cockpit-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ledger-exec-confidence,
.ledger-exec-side-note {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  padding: 16px;
}

.ledger-exec-confidence {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
}

.ledger-exec-gauge {
  position: relative;
  width: 96px;
  height: 96px;
}

.ledger-exec-gauge-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.ledger-exec-gauge-track {
  fill: none;
  stroke: color-mix(in srgb, var(--border) 60%, transparent);
  stroke-width: 4.5;
}

.ledger-exec-gauge-arc {
  fill: none;
  stroke: var(--green);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dasharray .42s ease, stroke .25s ease;
}

.ledger-exec-gauge.tone-warn .ledger-exec-gauge-arc { stroke: var(--orange); }
.ledger-exec-gauge.tone-bad .ledger-exec-gauge-arc { stroke: var(--red); }
.ledger-exec-gauge.tone-neutral .ledger-exec-gauge-arc { stroke: color-mix(in srgb, var(--text-muted) 60%, transparent); }

.ledger-exec-gauge-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}

.ledger-exec-gauge-num strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text);
}

.ledger-exec-gauge-num span {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ledger-exec-confidence-state {
  margin-top: 4px;
  font-size: 21px;
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--text);
}

.ledger-exec-side-note {
  display: grid;
  gap: 8px;
}

.ledger-exec-note-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.ledger-exec-note-head strong {
  font-size: 13px;
  color: var(--text);
}

.ledger-exec-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-radius: 999px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  color: var(--text-muted);
  background: var(--surface-2);
}

.ledger-exec-badge.tone-good,
.ledger-exec-posture-item.tone-good .ledger-exec-posture-value,
.ledger-exec-metric-card.tone-good .ledger-exec-metric-value,
.ledger-exec-progress-row .tone-good {
  color: var(--green);
}

.ledger-exec-badge.tone-good {
  border-color: color-mix(in srgb, var(--green) 26%, var(--border) 74%);
  background: color-mix(in srgb, var(--green) 10%, var(--surface) 90%);
}

.ledger-exec-badge.tone-warn,
.ledger-exec-posture-item.tone-warn .ledger-exec-posture-value,
.ledger-exec-metric-card.tone-warn .ledger-exec-metric-value,
.ledger-exec-progress-row .tone-warn {
  color: var(--orange);
}

.ledger-exec-badge.tone-warn {
  border-color: color-mix(in srgb, var(--orange) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--orange) 10%, var(--surface) 90%);
}

.ledger-exec-badge.tone-bad,
.ledger-exec-posture-item.tone-bad .ledger-exec-posture-value,
.ledger-exec-metric-card.tone-bad .ledger-exec-metric-value,
.ledger-exec-progress-row .tone-bad {
  color: var(--red);
}

.ledger-exec-badge.tone-bad {
  border-color: color-mix(in srgb, var(--red) 26%, var(--border) 74%);
  background: color-mix(in srgb, var(--red) 9%, var(--surface) 91%);
}

.ledger-exec-posture-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-2) 8%);
  box-shadow: none;
}

.ledger-exec-posture-item {
  min-width: 0;
  padding: 22px 24px;
  border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.ledger-exec-posture-item:last-child { border-right: 0; }

.ledger-exec-posture-label,
.ledger-exec-posture-value,
.ledger-exec-posture-note {
  min-width: 0;
  word-break: normal;
  overflow-wrap: normal;
}

.ledger-exec-posture-label {
  white-space: nowrap;
}

.ledger-exec-posture-value {
  margin-top: 8px;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--text);
}

.ledger-exec-posture-note {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.42;
}

.ledger-exec-mix-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.ledger-exec-mix-ring {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.ledger-exec-mix-ring-inner {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
}

.ledger-exec-mix-ring-inner strong {
  display: block;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 800;
  color: var(--text);
}

.ledger-exec-mix-ring-inner span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .ledger-exec-mix-grid {
    grid-template-columns: 1fr;
  }
  .ledger-exec-mix-ring {
    margin: 0 auto;
  }
}

.ledger-exec-financial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}

.ledger-exec-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ledger-exec-metric-card {
  min-width: 0;
  min-height: 96px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, var(--surface-2) 22%);
}

.ledger-exec-metric-value {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 850;
  color: var(--text);
}

.ledger-exec-metric-note {
  margin-top: 8px;
}

.ledger-exec-story-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.ledger-exec-story-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  font-size: 12px;
  color: var(--text-muted);
}

.ledger-exec-story-row:last-child { border-bottom: 0; }
.ledger-exec-story-row strong { color: var(--text); text-align: right; }

.ledger-exec-chart-frame {
  position: relative;
  min-width: 0;
  min-height: 292px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px) 0 0 / 100% 54px,
    linear-gradient(to right, color-mix(in srgb, var(--border) 42%, transparent) 1px, transparent 1px) 0 0 / 78px 100%,
    var(--surface-2);
  overflow: hidden;
}

.ledger-exec-chart-frame-large {
  min-height: 300px;
}

.ledger-exec-chart-frame .executivev2-hero-chart {
  min-height: 220px;
  padding: 42px 16px 12px;
  background: transparent;
  border: 0;
}

.ledger-exec-chart-frame .executivev2-chart-svg {
  width: 100%;
  min-height: 210px;
}

.ledger-exec-chart-legend,
.ledger-exec-chart-pills {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ledger-exec-chart-legend {
  top: 14px;
  left: 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}

.ledger-exec-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ledger-exec-chart-pills {
  right: 14px;
  bottom: 14px;
  justify-content: flex-end;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  display: inline-block;
}

.dot.blue { background: var(--c-azure); }
.dot.amber { background: var(--orange); }
.dot.red { background: var(--red); }

.ledger-exec-list,
.ledger-exec-rank-list,
.ledger-exec-progress-list {
  display: grid;
  gap: 10px;
}

.ledger-exec-list-row,
.ledger-exec-rank-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface) 55%);
}

.ledger-exec-list-row p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.42;
  color: var(--text-muted);
}

.ledger-exec-row-icon,
.ledger-exec-rank-number {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 11%, var(--surface) 89%);
}

.ledger-exec-list-row.tone-warn .ledger-exec-row-icon { color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, var(--surface) 88%); }
.ledger-exec-list-row.tone-bad .ledger-exec-row-icon { color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--surface) 90%); }

.ledger-exec-row-value {
  max-width: 118px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.ledger-exec-trend-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 16px;
}

.ledger-exec-trend-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ledger-exec-rank-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.ledger-exec-rank-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.ledger-exec-rank-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text);
}

.ledger-exec-rank-main span {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.ledger-exec-share-track,
.ledger-exec-progress-track {
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-3) 82%, var(--border) 18%);
  overflow: hidden;
}

.ledger-exec-share-track span,
.ledger-exec-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.ledger-exec-progress-track .tone-warn { background: var(--orange); }
.ledger-exec-progress-track .tone-bad { background: var(--red); }

.ledger-exec-coverage-hero {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 7%, var(--surface) 93%);
  margin-bottom: 12px;
}

.ledger-exec-coverage-hero.tone-warn { background: color-mix(in srgb, var(--orange) 7%, var(--surface) 93%); }
.ledger-exec-coverage-hero.tone-bad { background: color-mix(in srgb, var(--red) 6%, var(--surface) 94%); }

.ledger-exec-coverage-value {
  margin-top: 8px;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 800;
  color: var(--text);
}

.ledger-exec-progress-item {
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.ledger-exec-progress-item:last-child { border-bottom: 0; }

.ledger-exec-progress-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.ledger-exec-risk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ledger-exec-risk-card {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--border) 76%);
  background: color-mix(in srgb, var(--green) 5%, var(--surface) 95%);
}

.ledger-exec-risk-card.severity-high {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--red) 6%, var(--surface) 94%);
}

.ledger-exec-risk-card.severity-med {
  border-color: color-mix(in srgb, var(--orange) 30%, var(--border) 70%);
  background: color-mix(in srgb, var(--orange) 7%, var(--surface) 93%);
}

.ledger-exec-risk-card.severity-high .ledger-exec-risk-label { color: var(--red); }
.ledger-exec-risk-card.severity-med .ledger-exec-risk-label { color: var(--orange); }
.ledger-exec-risk-card.severity-low .ledger-exec-risk-label { color: var(--green); }

.ledger-exec-risk-card strong {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
}

.ledger-exec-risk-card p {
  margin: 7px 0 0;
}

.ledger-exec-register-table {
  margin-top: 16px;
}

.ledger-exec-register-table td,
.ledger-exec-register-table th {
  vertical-align: top;
}

@media (max-width: 1100px) {
  .ledger-exec-cockpit-body,
  .ledger-exec-two-col,
  .ledger-exec-two-col-balanced,
  .ledger-exec-financial-grid,
  .ledger-exec-trend-layout {
    grid-template-columns: 1fr;
  }

  .ledger-exec-cockpit-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger-exec-confidence {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .ledger-exec-cockpit-body,
  .ledger-exec-card {
    padding: 18px;
  }

  .ledger-exec-action-path,
  .ledger-exec-posture-strip,
  .ledger-exec-metric-grid,
  .ledger-exec-trend-stats,
  .ledger-exec-risk-grid,
  .ledger-exec-cockpit-side {
    grid-template-columns: 1fr;
  }

  .ledger-exec-action-step,
  .ledger-exec-posture-item {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
  }

  .ledger-exec-action-step:last-child,
  .ledger-exec-posture-item:last-child {
    border-bottom: 0;
  }

  .ledger-exec-confidence {
    grid-template-columns: 80px 1fr;
  }

  .ledger-exec-gauge {
    width: 80px;
    height: 80px;
  }

  .ledger-exec-gauge-num strong {
    font-size: 20px;
  }
}

.executivev2-layer.is-ai-open .executivev2-dashboard-surface {
  opacity: .26;
  filter: blur(6px) saturate(.96);
  pointer-events: none;
  user-select: none;
}

.executivev2-ai-backdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: none;
  padding: 0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(250, 250, 253, .76), rgba(243, 240, 249, .9)),
    radial-gradient(circle at top right, rgba(141, 108, 240, .08), transparent 42%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

[data-theme="dark"] .executivev2-ai-backdrop {
  background:
    linear-gradient(180deg, rgba(10, 18, 32, .72), rgba(10, 18, 32, .86)),
    radial-gradient(circle at top right, rgba(156, 127, 255, .12), transparent 42%);
}

.executivev2-layer.is-ai-open .executivev2-ai-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.executivev2-ai-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
  padding: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.executivev2-layer.is-ai-open .executivev2-ai-panel {
  opacity: 1;
  transform: translateY(0);
}

#panel-dashboard .executivev2-layer.is-ai-open .executivev2-dashboard-surface {
  opacity: .18;
  filter: blur(7px) saturate(.95);
}

#panel-ai-diagnostics .executivev2-layer.is-ai-open .executivev2-dashboard-surface {
  opacity: .18;
  filter: blur(7px) saturate(.95);
}

#executiveAiInsightBody {
  width: 100%;
  min-height: 0;
  pointer-events: auto;
}

#pageDiagnosticsExplainBody {
  width: 100%;
  min-height: 0;
  pointer-events: auto;
}

#aiDiagnosticsExplainBody {
  width: 100%;
  min-height: 0;
  pointer-events: auto;
}

.ionix-ai-surface,
.executivev2-ai-shell {
  display: grid;
  gap: 22px;
  position: relative;
  width: 100%;
  min-height: 0;
  padding: 26px 28px 24px 32px;
  border: 1px solid transparent;
  border-radius: 22px;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, #fbf7ff 74%, var(--surface) 26%) 0%, color-mix(in srgb, #f2e9ff 54%, var(--surface-2) 46%) 100%),
    conic-gradient(from var(--exec-ai-rim),
      rgba(130, 84, 229, 0) 0deg,
      rgba(130, 84, 229, 0.12) 34deg,
      rgba(130, 84, 229, 0.48) 84deg,
      rgba(205, 183, 255, 0.78) 118deg,
      rgba(130, 84, 229, 0.42) 156deg,
      rgba(130, 84, 229, 0.14) 210deg,
      rgba(130, 84, 229, 0) 360deg);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  backdrop-filter: blur(16px);
  animation: execAiRimRotate 8.5s linear infinite;
}

[data-theme="dark"] .ionix-ai-surface,
[data-theme="dark"] .executivev2-ai-shell {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, #241648 62%, var(--surface) 38%) 0%, color-mix(in srgb, #1d123a 58%, var(--surface-2) 42%) 100%),
    conic-gradient(from var(--exec-ai-rim),
      rgba(160, 136, 255, 0) 0deg,
      rgba(160, 136, 255, 0.14) 34deg,
      rgba(160, 136, 255, 0.5) 84deg,
      rgba(216, 200, 255, 0.8) 118deg,
      rgba(160, 136, 255, 0.44) 156deg,
      rgba(160, 136, 255, 0.16) 210deg,
      rgba(160, 136, 255, 0) 360deg);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.ionix-ai-surface::before,
.executivev2-ai-shell::before {
  content: "";
  position: absolute;
  inset: 28px auto 28px 16px;
  width: 2px;
  border-radius: 999px;
  background: #8d6cf0;
  opacity: .55;
}

.ionix-ai-surface::after,
.executivev2-ai-shell::after {
  content: "";
  position: absolute;
  inset: 34px auto 34px 16px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(141, 108, 240, .6), rgba(255, 255, 255, 0));
  opacity: .22;
  animation: execAiRailPulse 9s ease-in-out infinite;
}

.ionix-ai-surface[data-tone="warn"]::before,
.executivev2-ai-shell[data-tone="warn"]::before {
  background: #d97706;
}

.ionix-ai-surface[data-tone="bad"]::before,
.executivev2-ai-shell[data-tone="bad"]::before {
  background: #dc2626;
}

.ionix-ai-surface[data-tone="good"]::before,
.executivev2-ai-shell[data-tone="good"]::before {
  background: #16a34a;
}

#panel-dashboard .executivev2-ai-shell {
  border-radius: 24px;
}

#panel-dashboard .executivev2-ai-shell::before {
  inset: 28px auto 28px 16px;
  width: 2px;
}

#panel-dashboard .executivev2-ai-shell::after {
  inset: 34px auto 34px 16px;
  width: 2px;
  opacity: .24;
}

.executivev2-ai-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.executivev2-ai-kicker,
.executivev2-ai-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
}

.executivev2-ai-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.executivev2-ai-section-label::before {
  content: "";
  width: 14px;
  height: 1px;
  background: color-mix(in srgb, #8d6cf0 55%, transparent 45%);
}

.executivev2-ai-title {
  margin: 6px 0 0;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -.035em;
  color: var(--text);
}

.executivev2-ai-meta {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.executivev2-ai-head-actions {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.executivev2-ai-freshness {
  text-align: right;
  min-width: 220px;
}

.executivev2-ai-freshness-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}

.executivev2-ai-freshness-stamp,
.executivev2-ai-freshness-note {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.executivev2-ai-close-btn {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, #f8fafc 18%);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.executivev2-ai-close-btn:hover,
.executivev2-ai-close-btn:focus-visible {
  background: color-mix(in srgb, var(--green) 12%, var(--surface) 88%);
  border-color: color-mix(in srgb, var(--green) 28%, var(--border) 72%);
  outline: none;
}

.executivev2-ai-brief {
  padding: 2px 2px 2px 4px;
  border: 0;
  background: transparent;
}

.executivev2-ai-support-section {
  padding: 18px 0 0;
  border: 0;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--border) 66%, transparent 34%);
}

.executivev2-ai-timeline-section {
  padding: 18px 0 0;
  border: 0;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--border) 66%, transparent 34%);
}

.executivev2-ai-brief-copy {
  margin-top: 10px;
  max-width: 940px;
  font-size: 22px;
  line-height: 1.42;
  letter-spacing: -.022em;
  font-weight: 500;
  color: var(--text);
}

.executivev2-ai-brief-note {
  margin-top: 14px;
  padding-top: 14px;
  max-width: 940px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent 30%);
}

.executivev2-ai-priority-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, #dce4ef 18%);
  background: color-mix(in srgb, var(--surface) 72%, #f4f7fb 28%);
  box-shadow: inset 3px 0 0 0 color-mix(in srgb, #8d6cf0 55%, transparent 45%);
}

[data-theme="dark"] .executivev2-ai-priority-bar {
  background: color-mix(in srgb, var(--surface) 82%, #0f172a 18%);
}

.executivev2-ai-priority-bar[data-tone="warn"] {
  border-color: rgba(217, 119, 6, .24);
  background: rgba(245, 158, 11, .07);
  box-shadow: inset 3px 0 0 0 #d97706;
}

.executivev2-ai-priority-bar[data-tone="bad"] {
  border-color: rgba(220, 38, 38, .2);
  background: rgba(220, 38, 38, .07);
  box-shadow: inset 3px 0 0 0 #dc2626;
}

.executivev2-ai-priority-bar[data-tone="good"] {
  border-color: rgba(22, 163, 74, .22);
  background: rgba(22, 163, 74, .06);
  box-shadow: inset 3px 0 0 0 #16a34a;
}

.executivev2-ai-priority-score {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 4px;
  align-items: baseline;
  color: var(--text);
}

.executivev2-ai-priority-score span,
.executivev2-ai-priority-score em {
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
}

.executivev2-ai-priority-score strong {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.04em;
}

.executivev2-ai-priority-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.executivev2-ai-priority-note {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

.executivev2-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  background: color-mix(in srgb, var(--surface-2) 62%, var(--surface) 38%);
  border-radius: 16px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent 20%);
}

[data-theme="dark"] .executivev2-ai-grid {
  background: color-mix(in srgb, var(--surface-2) 55%, #0b1220 45%);
}

.executivev2-ai-section {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 97%, #fafbfe 3%);
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
}

[data-theme="dark"] .executivev2-ai-section {
  background: color-mix(in srgb, var(--surface) 88%, #0d1524 12%);
}

/* Top tone accent strip */
.executivev2-ai-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 13px 13px 0 0;
  background: color-mix(in srgb, var(--border) 55%, transparent 45%);
}

.executivev2-ai-section::after {
  content: attr(data-card-index);
  position: absolute;
  top: 18px;
  right: 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  color: color-mix(in srgb, var(--text-muted) 52%, transparent 48%);
}

.executivev2-ai-section[data-tone="info"]::before {
  background: rgba(37, 99, 235, .75);
}

.executivev2-ai-section[data-tone="warn"]::before {
  background: rgba(217, 119, 6, .82);
}

.executivev2-ai-section[data-tone="bad"]::before {
  background: rgba(220, 38, 38, .82);
}

.executivev2-ai-section[data-tone="good"]::before {
  background: rgba(22, 163, 74, .82);
}

.executivev2-ai-card-top {
  display: flex;
  justify-content: flex-start;
  padding-top: 6px;
}

.executivev2-ai-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 6px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.executivev2-ai-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.executivev2-ai-section[data-tone="warn"] .executivev2-ai-status {
  border-color: rgba(217, 119, 6, .32);
  color: #a16207;
}

.executivev2-ai-section[data-tone="bad"] .executivev2-ai-status {
  border-color: rgba(220, 38, 38, .28);
  color: #b91c1c;
}

.executivev2-ai-section[data-tone="good"] .executivev2-ai-status {
  border-color: rgba(22, 163, 74, .28);
  color: #15803d;
}

.executivev2-ai-section[data-tone="info"] .executivev2-ai-status {
  border-color: rgba(37, 99, 235, .28);
  color: #1d4ed8;
}

.executivev2-ai-card-title {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--text);
}

.executivev2-ai-card-copy {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.58;
  color: var(--text-dim);
}

.executivev2-ai-meta-list {
  margin-top: auto;
  padding-top: 14px;
  display: grid;
  gap: 5px;
  border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent 32%);
}

.executivev2-ai-meta-row {
  font-size: 11.5px;
  line-height: 1.48;
  color: var(--text-muted);
  padding-left: 11px;
  position: relative;
}

.executivev2-ai-meta-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: .4;
}

.executivev2-ai-detail-copy,
.executivev2-ai-stage-copy,
.executivev2-ai-breakdown-meta {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

.executivev2-ai-support-grid,
.executivev2-ai-detail-grid,
.executivev2-ai-timeline {
  display: grid;
  gap: 14px;
}

.executivev2-ai-support-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .9fr);
  gap: 22px;
}

.executivev2-ai-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  gap: 10px;
}

/* ── Detail grid shared base ───────────────────────────── */
.executivev2-ai-detail-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent 26%);
  border-radius: 12px;
  padding: 13px 15px 14px;
  background: color-mix(in srgb, var(--surface) 95%, #f9fbfe 5%);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

[data-theme="dark"] .executivev2-ai-detail-card {
  background: color-mix(in srgb, var(--surface) 90%, #0d1524 10%);
}

.executivev2-ai-detail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--text-muted);
}

.executivev2-ai-detail-value {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--text);
}

.executivev2-ai-detail-card .executivev2-ai-detail-copy {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
}

/* ── Card A: financial metric ──────────────────────────── */
.executivev2-ai-detail-card[data-role="current"] {
  background: color-mix(in srgb, var(--surface) 72%, rgba(141, 108, 240, .13) 28%);
  border-color: color-mix(in srgb, var(--border) 62%, rgba(141, 108, 240, .32) 38%);
}

.executivev2-ai-detail-card[data-role="current"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: #8d6cf0;
  opacity: .8;
}

.executivev2-ai-detail-card[data-role="current"] .executivev2-ai-detail-value {
  font-size: 34px;
  letter-spacing: -.04em;
  color: color-mix(in srgb, var(--text) 90%, #8d6cf0 10%);
  margin-top: 10px;
}

.executivev2-ai-detail-card[data-role="current"] .executivev2-ai-detail-copy {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 58%, rgba(141, 108, 240, .14) 42%);
  color: color-mix(in srgb, var(--text-muted) 90%, #8d6cf0 10%);
}

/* ── Card B: variance signal ───────────────────────────── */
.executivev2-ai-detail-card[data-role="delta"] {
  background: color-mix(in srgb, var(--surface) 92%, rgba(15, 23, 42, .06) 8%);
  border-color: color-mix(in srgb, var(--border) 80%, transparent 20%);
}

.executivev2-ai-detail-card[data-role="delta"] .executivev2-ai-detail-value {
  font-size: 18px;
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  margin-top: 8px;
  background: color-mix(in srgb, var(--surface-2) 76%, var(--border) 24%);
  border-radius: 7px;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}

.executivev2-ai-detail-card[data-role="delta"] .executivev2-ai-detail-copy {
  margin-top: 8px;
}

/* ── Card C: advisory interpretation ──────────────────── */
.executivev2-ai-detail-card[data-role="context"] {
  background: color-mix(in srgb, var(--surface) 90%, rgba(15, 23, 42, .07) 10%);
  border-color: color-mix(in srgb, var(--border) 78%, transparent 22%);
  border-style: dashed;
}

.executivev2-ai-detail-card[data-role="context"] .executivev2-ai-detail-label {
  color: var(--text-dim);
}

.executivev2-ai-detail-card[data-role="context"] .executivev2-ai-detail-value {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 9px;
  display: inline-block;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent 30%);
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}

.executivev2-ai-detail-card[data-role="context"] .executivev2-ai-detail-copy {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.58;
  color: var(--text) !important;
  font-weight: 400;
  flex: 1;
}

.executivev2-ai-breakdown-list {
  margin-top: 14px;
  display: grid;
  gap: 0;
}

.executivev2-ai-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  column-gap: 16px;
  row-gap: 5px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent 40%);
}

.executivev2-ai-breakdown-row:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.executivev2-ai-breakdown-copy {
  min-width: 0;
  display: contents;
}

.executivev2-ai-breakdown-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  grid-column: 1;
  grid-row: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.executivev2-ai-breakdown-meta {
  grid-column: 1;
  grid-row: 2;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .01em;
}

.executivev2-ai-breakdown-bar {
  grid-column: 1;
  grid-row: 3;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--border) 28%);
  overflow: hidden;
}

.executivev2-ai-breakdown-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(141, 108, 240, .4), rgba(141, 108, 240, .9));
}

.executivev2-ai-breakdown-value {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
  text-align: right;
  letter-spacing: -.015em;
}

.executivev2-ai-timeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  gap: 0;
  position: relative;
  background: color-mix(in srgb, var(--surface-2) 58%, var(--surface) 42%);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
  overflow: visible;
}

[data-theme="dark"] .executivev2-ai-timeline {
  background: color-mix(in srgb, var(--surface-2) 52%, #0d1524 48%);
}

/* Horizontal connector line through node centres */
.executivev2-ai-timeline::before {
  content: "";
  position: absolute;
  top: 26px;
  left: calc(50% / 3);
  right: calc(50% / 3);
  height: 1px;
  background: color-mix(in srgb, var(--border) 68%, transparent 32%);
}

.executivev2-ai-stage {
  position: relative;
  padding: 52px 22px 20px;
  border: 0;
  background: transparent;
}

/* Vertical divider between stages */
.executivev2-ai-stage:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent 40%);
}

/* Numbered node centred on connector line */
.executivev2-ai-stage::before {
  content: attr(data-stage-index);
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--border) 60%, #8d6cf0 40%);
  color: #8d6cf0;
  font-size: 10px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
  letter-spacing: 0;
  z-index: 2;
}

[data-theme="dark"] .executivev2-ai-stage::before {
  background: color-mix(in srgb, var(--surface) 80%, #0d1524 20%);
}

.executivev2-ai-stage:not(:last-child)::after {
  display: none;
}

.executivev2-ai-stage-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #8d6cf0;
  opacity: .75;
}

.executivev2-ai-stage-copy {
  margin-top: 8px;
  color: var(--text) !important;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.58;
}

.executivev2-ai-error {
  border: 1px solid rgba(217, 119, 6, .26);
  border-radius: 16px;
  padding: 22px;
  background: rgba(245, 158, 11, .08);
  color: var(--text);
  display: grid;
  gap: 10px;
}

.executivev2-ai-error-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.executivev2-ai-error-copy {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.executivev2-ai-error-actions {
  display: flex;
  justify-content: flex-start;
}

.executivev2-ai-retry-btn {
  border: 1px solid color-mix(in srgb, #2b65df 28%, var(--border) 72%);
  background: color-mix(in srgb, #eef4ff 72%, var(--surface) 28%);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.executivev2-ai-retry-btn:hover,
.executivev2-ai-retry-btn:focus-visible {
  border-color: color-mix(in srgb, #2b65df 46%, var(--border) 54%);
  background: color-mix(in srgb, #e2edff 72%, var(--surface) 28%);
  box-shadow: 0 0 0 3px color-mix(in srgb, #2b65df 14%, transparent 86%);
  outline: none;
}

.executivev2-ai-skeleton {
  margin-top: 8px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148, 163, 184, .16), rgba(148, 163, 184, .32), rgba(148, 163, 184, .16));
}

.executivev2-ai-skeleton-hero {
  height: 18px;
  width: 86%;
}

.executivev2-ai-skeleton-line {
  width: 58%;
}

.executivev2-ai-skeleton-score {
  width: 118px;
  height: 40px;
  border-radius: 14px;
}

.executivev2-ai-skeleton-lg {
  height: 14px;
  width: 88%;
}

.executivev2-ai-skeleton-sm {
  width: 62%;
}

@media (prefers-reduced-motion: reduce) {
  .executivev2-ai-action-btn,
  .executivev2-ai-action-btn::after,
  .executivev2-ai-action-icon-svg,
  .executivev2-dashboard-surface,
  .executivev2-ai-backdrop,
  .executivev2-ai-panel,
  .executivev2-ai-close-btn,
  .executivev2-ai-shell::after {
    transition: none;
    animation: none;
  }
}

.executivev2-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  margin-bottom: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none !important;
}

.executivev2-summary-card {
  position: relative;
  min-width: 0;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}

.executivev2-summary-card:last-child {
  border-right: none;
}

.executivev2-summary-card .costx-kpi-label {
  margin-bottom: 5px;
  letter-spacing: .07em;
}

.executivev2-summary-card .costx-kpi-value {
  margin-top: 0;
  font-size: clamp(23px, 2vw, 28px);
  line-height: 1.08;
}

.executivev2-summary-card .showback-kpi-trend {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.42;
  min-height: 0;
}

.executivev2-summary-card[data-tone="info"] .costx-kpi-value {
  color: color-mix(in srgb, var(--c-azure) 78%, var(--text) 22%);
}

.executivev2-summary-card[data-tone="good"] .costx-kpi-value {
  color: color-mix(in srgb, var(--green) 78%, var(--text) 22%);
}

.executivev2-summary-card[data-tone="warn"] .costx-kpi-value {
  color: color-mix(in srgb, var(--orange) 78%, var(--text) 22%);
}

.executivev2-summary-card[data-tone="bad"] .costx-kpi-value {
  color: color-mix(in srgb, var(--red) 78%, var(--text) 22%);
}

.executivev2-kpi-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none !important;
}

.executivev2-kpi-row .executivev2-kpi-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 13px 16px 12px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  min-height: 0;
}

.executivev2-kpi-row .executivev2-kpi-card:last-child {
  border-right: none;
}

.executivev2-kpi-row .executivev2-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: color-mix(in srgb, var(--c-azure) 64%, white 36%);
}

.executivev2-kpi-row .executivev2-kpi-card:nth-child(2)::before {
  background: color-mix(in srgb, var(--green) 66%, white 34%);
}

.executivev2-kpi-row .executivev2-kpi-card:nth-child(3)::before {
  background: color-mix(in srgb, var(--orange) 68%, white 32%);
}

.executivev2-kpi-row .executivev2-kpi-card:nth-child(4)::before {
  background: color-mix(in srgb, var(--red) 66%, white 34%);
}

.executivev2-kpi-row .executivev2-kpi-card:nth-child(5)::before {
  background: color-mix(in srgb, var(--c-security) 58%, white 42%);
}

.executivev2-kpi-row .executivev2-kpi-card:nth-child(6)::before {
  background: color-mix(in srgb, var(--c-intune) 66%, white 34%);
}

.executivev2-kpi-row .executivev2-kpi-card .anl-card-lbl {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text) 12%);
}

.executivev2-kpi-row .executivev2-kpi-card .anl-card-val {
  font-size: clamp(20px, 1.35vw, 24px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 4px;
  color: var(--c-azure);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.executivev2-kpi-row .executivev2-kpi-card .anl-card-sub {
  margin-top: 0;
  font-size: 11px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text-muted) 90%, var(--text) 10%);
}

.executivev2-kpi-row .executivev2-kpi-card:nth-child(2) .anl-card-val {
  color: var(--green);
}

.executivev2-kpi-row .executivev2-kpi-card:nth-child(3) .anl-card-val {
  color: var(--orange);
}

.executivev2-kpi-row .executivev2-kpi-card:nth-child(4) .anl-card-val {
  color: var(--red);
}

.executivev2-kpi-row .executivev2-kpi-card:nth-child(5) .anl-card-val {
  color: var(--c-security);
}

.executivev2-kpi-row .executivev2-kpi-card:nth-child(6) .anl-card-val {
  color: var(--c-intune);
}

.executivev2-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .95fr);
  gap: var(--ledger-card-grid-gap);
}

.executivev2-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .95fr);
  gap: var(--ledger-card-grid-gap);
  align-items: stretch;
}

.executivev2-feature-stack {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ledger-card-grid-gap);
  min-height: 100%;
}

.executivev2-feature-stack-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.executivev2-preview-triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ledger-card-grid-gap);
}

.executivev2-position-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.executivev2-preview-pair {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr);
  gap: var(--ledger-card-grid-gap);
}

.executivev2-decision-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .82fr);
  align-items: stretch;
}

.executivev2-risk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ledger-card-grid-gap);
}

.executivev2-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.executivev2-hero-panel,
.executivev2-side-panel,
.executivev2-risk-panel,
.executivev2-register-panel {
  margin-top: 0;
}

.executivev2-hero-shell,
.executivev2-monthly-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.executivev2-hero-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.executivev2-hero-intro {
  min-width: 0;
  flex: 1 1 360px;
}

.executivev2-hero-value {
  font-size: 34px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -.03em;
  color: var(--text);
}

.executivev2-hero-sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 520px;
}

.executivev2-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.executivev2-hero-metric,
.executivev2-stat-card,
.executivev2-signal-card,
.executivev2-risk-card,
.executivev2-decision,
.executivev2-headline {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.executivev2-hero-metric,
.executivev2-stat-card,
.executivev2-signal-card {
  padding: 13px 14px;
}

.executivev2-hero-k,
.executivev2-stat-k,
.executivev2-signal-k,
.executivev2-headline-k,
.executivev2-risk-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.executivev2-hero-v,
.executivev2-stat-v,
.executivev2-signal-v {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -.03em;
  color: var(--text);
}

.executivev2-hero-s,
.executivev2-stat-s,
.executivev2-signal-s {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.executivev2-hero-chart {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 14px 12px;
}

.executivev2-hero-chart-featured {
  padding: 18px 18px 14px;
}

.executivev2-chart-topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-dim);
}

.executivev2-chart-topline span:last-child {
  color: #657a96;
}

.executivev2-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.executivev2-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.executivev2-legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.executivev2-chart-svg {
  width: 100%;
  height: 230px;
  display: block;
}

.executivev2-hero-chart-featured .executivev2-chart-svg {
  height: 250px;
}

.executivev2-monthly-chart .executivev2-chart-svg {
  height: 240px;
}

.executivev2-chart-svg-budget,
.executivev2-chart-svg-monthly {
  position: relative;
  z-index: 1;
}

.executivev2-chart-svg-monthly .executivev2-chart-point {
  fill: #f8fbff;
  stroke: rgba(43, 101, 223, .56);
  stroke-width: 2;
}

.executivev2-chart-svg-monthly .executivev2-chart-point.is-last {
  fill: #2b65df;
  stroke: #f8fbff;
  stroke-width: 2.6;
}

.executivev2-chart-svg-monthly .executivev2-chart-bar {
  fill: url(#executiveMonthlyBarFill);
  stroke: rgba(43, 101, 223, .08);
  stroke-width: 1;
}

.executivev2-chart-svg-monthly .executivev2-chart-bar.is-last {
  fill: url(#executiveMonthlyBarFillLast);
  stroke: rgba(43, 101, 223, .2);
}

.executivev2-chart-svg-monthly .executivev2-chart-area {
  fill: url(#executiveMonthlyAreaFill);
}

.executivev2-chart-svg-monthly .executivev2-chart-trace {
  fill: none;
  stroke: #2b65df;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.executivev2-chart-svg-monthly .executivev2-chart-gridline {
  stroke: rgba(100, 116, 139, .16);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}

.executivev2-chart-svg-monthly .executivev2-chart-gridline.is-base {
  stroke: rgba(100, 116, 139, .24);
  stroke-dasharray: none;
}

.executivev2-monthly-chart,
.executivev2-hero-chart-featured {
  position: relative;
  overflow: hidden;
}

.executivev2-monthly-chart {
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 76%, #eef4fb 24%), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
}

.executivev2-monthly-chart::before,
.executivev2-hero-chart-featured::before {
  content: "";
  position: absolute;
  inset: 54px 18px 54px;
  border-radius: 10px;
  background:
    linear-gradient(to top, rgba(148, 163, 184, .12) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(to right, rgba(148, 163, 184, .08) 1px, transparent 1px) 0 0 / 48px 100%;
  pointer-events: none;
}

.executivev2-axis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
}

.executivev2-axis span {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

.executivev2-headline-list,
.executivev2-decision-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.executivev2-preview-headline-list,
.executivev2-preview-prog-list,
.executivev2-preview-decision-list,
.executivev2-preview-stack-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.executivev2-preview-headline,
.executivev2-preview-prog-item,
.executivev2-preview-decision,
.executivev2-preview-risk-card,
.executivev2-preview-stack-row {
  border-radius: 12px;
}

.executivev2-preview-headline {
  border-left-width: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: none;
}

.executivev2-preview-inline-title {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}

.executivev2-preview-inline-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.executivev2-preview-stack-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1.8fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.executivev2-preview-stack-name,
.executivev2-preview-stack-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.executivev2-preview-stack-value {
  white-space: nowrap;
  color: var(--text-dim);
}

.executivev2-preview-stack-bar {
  height: 9px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.executivev2-preview-stack-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-azure), color-mix(in srgb, var(--c-azure) 58%, #5eead4 42%));
}

.executivev2-preview-prog-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.executivev2-preview-prog-val {
  font-size: 12px;
  font-weight: 700;
}

.executivev2-preview-prog-val.tone-good {
  color: #15803d;
}

.executivev2-preview-prog-val.tone-warn {
  color: #b45309;
}

.executivev2-preview-prog-val.tone-bad {
  color: #b91c1c;
}

.prog-fill.tone-good {
  background: #16a34a;
}

.prog-fill.tone-info {
  background: var(--c-azure);
}

.prog-fill.tone-warn {
  background: #d97706;
}

.prog-fill.tone-bad {
  background: #dc2626;
}

.executivev2-preview-decision {
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.executivev2-preview-decision.executivev2-preview-tone-bad {
  border-color: rgba(220, 38, 38, .24);
}

.executivev2-preview-decision.executivev2-preview-tone-warn {
  border-color: rgba(217, 119, 6, .24);
}

.executivev2-preview-decision.executivev2-preview-tone-good {
  border-color: rgba(22, 163, 74, .24);
}

.executivev2-preview-risk-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.executivev2-preview-risk-card {
  min-height: 100%;
}

.headline-list,
.prog-list,
.decision-list,
.executivev2-preview-stack-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.headline-item,
.prog-item,
.decision-item,
.risk-card,
.stack-row {
  border-radius: 12px;
}

.headline-item {
  padding: 12px 14px;
  border-left: 4px solid var(--border);
}

.headline-item.tone-good {
  border-left-color: #16a34a;
}

.headline-item.tone-warn {
  border-left-color: #d97706;
}

.headline-item.tone-bad {
  border-left-color: #dc2626;
}

.headline-item.tone-info {
  border-left-color: var(--c-azure);
}

.headline-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}

.headline-label.tone-good {
  color: #15803d;
}

.headline-label.tone-warn {
  color: #b45309;
}

.headline-label.tone-bad {
  color: #b91c1c;
}

.headline-label.tone-info {
  color: var(--c-azure);
}

.headline-copy {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.prog-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.prog-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.prog-label,
.prog-val {
  font-size: 12px;
  color: var(--text);
}

.prog-label {
  font-weight: 600;
}

.prog-val {
  font-weight: 700;
}

.prog-track {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.prog-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--c-azure);
}

.prog-sub {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.decision-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
}

.decision-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
}

.decision-icon.high {
  background: rgba(220, 38, 38, .12);
  color: #b91c1c;
}

.decision-icon.med {
  background: rgba(217, 119, 6, .12);
  color: #b45309;
}

.decision-icon.low {
  background: rgba(22, 163, 74, .12);
  color: #15803d;
}

.decision-body {
  min-width: 0;
  flex: 1 1 auto;
}

.decision-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}

.decision-meta {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

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

.risk-card {
  padding: 13px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.risk-card.high {
  border-color: rgba(220, 38, 38, .24);
  background: color-mix(in srgb, var(--surface) 86%, rgba(220, 38, 38, .08) 14%);
}

.risk-card.med {
  border-color: rgba(217, 119, 6, .24);
  background: color-mix(in srgb, var(--surface) 86%, rgba(217, 119, 6, .08) 14%);
}

.risk-card.low {
  border-color: rgba(22, 163, 74, .24);
  background: color-mix(in srgb, var(--surface) 86%, rgba(22, 163, 74, .08) 14%);
}

.risk-sev {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.risk-sev.high {
  color: #b91c1c;
}

.risk-sev.med {
  color: #b45309;
}

.risk-sev.low {
  color: #15803d;
}

.risk-title {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

.risk-copy {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.stack-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1.8fr) auto;
  gap: 12px;
  align-items: center;
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.fill {
  height: 100%;
  border-radius: inherit;
}

.executivev2-headline,
.executivev2-decision {
  padding: 12px 13px;
}

.executivev2-headline {
  border-radius: 8px;
  border-left: 3px solid var(--border);
  background: var(--surface-2);
  box-shadow: none;
}

.executivev2-headline-top,
.executivev2-decision-top,
.executivev2-position-top,
.executivev2-risk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.executivev2-headline-title,
.executivev2-decision-title {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.executivev2-headline-copy,
.executivev2-decision-copy,
.executivev2-risk-card li {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
}

.executivev2-headline-chip,
.executivev2-position-badge,
.executivev2-decision-status,
.executivev2-risk-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}

.executivev2-headline-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
}

.executivev2-headline[data-tone="good"],
.executivev2-signal-card[data-tone="good"],
.executivev2-risk-card[data-tone="good"],
.executivev2-position-card[data-tone="good"],
.executivev2-decision[data-tone="good"] {
  border-color: rgba(22, 163, 74, .24);
}

.executivev2-headline[data-tone="warn"],
.executivev2-signal-card[data-tone="warn"],
.executivev2-risk-card[data-tone="warn"],
.executivev2-position-card[data-tone="warn"],
.executivev2-decision[data-tone="warn"] {
  border-color: rgba(217, 119, 6, .24);
}

.executivev2-headline[data-tone="bad"],
.executivev2-signal-card[data-tone="bad"],
.executivev2-risk-card[data-tone="bad"],
.executivev2-position-card[data-tone="bad"],
.executivev2-decision[data-tone="bad"] {
  border-color: rgba(220, 38, 38, .2);
}

.executivev2-headline[data-tone="good"] {
  border-color: var(--border);
  border-left-color: var(--green);
}

.executivev2-headline[data-tone="warn"] {
  border-color: var(--border);
  border-left-color: var(--orange);
}

.executivev2-headline[data-tone="bad"] {
  border-color: var(--border);
  border-left-color: var(--red);
}

.executivev2-monthly-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.executivev2-monthly-frame {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.executivev2-monthly-frame-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 2px 2px 0;
}

.executivev2-monthly-frame-intro {
  min-width: 0;
  flex: 1 1 280px;
}

.executivev2-monthly-frame-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #5e7390;
}

.executivev2-monthly-frame-value {
  margin-top: 6px;
  font-size: clamp(28px, 2vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
}

.executivev2-monthly-frame-copy {
  margin-top: 6px;
  max-width: 540px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.executivev2-monthly-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, #d9e3f1 28%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, #eef4fb 18%);
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

.executivev2-monthly-meta::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2b65df;
  flex-shrink: 0;
}

.executivev2-monthly-chart-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 86%, #dce6f3 14%);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.executivev2-monthly-chart-foot strong {
  color: var(--text);
  font-weight: 700;
}

.executivev2-monthly-plot {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.executivev2-monthly-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
  padding: 6px 0 10px;
}

.executivev2-monthly-scale span {
  font-size: 10px;
  line-height: 1;
  color: color-mix(in srgb, var(--text-muted) 88%, #5e7390 12%);
}

.executivev2-axis-monthly {
  gap: 6px;
  margin-top: 12px;
  padding-left: 70px;
}

.executivev2-axis-monthly span {
  text-align: center;
}

.executivev2-monthly-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  align-items: stretch;
}

.executivev2-monthly-stats .executivev2-kpi-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 15px 16px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, #d8e2ef 20%);
  border-right: 1px solid color-mix(in srgb, var(--border) 80%, #d8e2ef 20%);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, #f5f9fd 28%), var(--surface));
  box-shadow: none !important;
  min-height: 124px;
  height: 100%;
}

.executivev2-monthly-stats .executivev2-kpi-card:last-child {
  border-right: 1px solid color-mix(in srgb, var(--border) 80%, #d8e2ef 20%);
  grid-column: 1 / -1;
}

.executivev2-monthly-stats .executivev2-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  width: auto;
  background: color-mix(in srgb, var(--c-azure) 74%, white 26%);
}

.executivev2-monthly-stats .executivev2-kpi-card[data-tone="peak"]::before {
  background: color-mix(in srgb, var(--orange) 68%, white 32%);
}

.executivev2-monthly-stats .executivev2-kpi-card[data-tone="bad"]::before {
  background: color-mix(in srgb, var(--red) 66%, white 34%);
}

.executivev2-monthly-stats .executivev2-kpi-card[data-tone="good"]::before {
  background: color-mix(in srgb, var(--green) 66%, white 34%);
}

.executivev2-monthly-stats .anl-card-lbl {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text) 12%);
}

.executivev2-monthly-stats .anl-card-val {
  font-size: clamp(17px, 1.2vw, 21px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 6px;
  color: var(--c-azure);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.executivev2-monthly-stats .anl-card-sub {
  margin-top: auto;
  font-size: 11px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text-muted) 90%, var(--text) 10%);
}

.executivev2-monthly-stats .executivev2-kpi-card[data-tone="peak"] .anl-card-val {
  color: var(--orange);
}

.executivev2-monthly-stats .executivev2-kpi-card[data-tone="bad"] .anl-card-val {
  color: var(--red);
}

.executivev2-monthly-stats .executivev2-kpi-card[data-tone="good"] .anl-card-val {
  color: var(--green);
}

@media (min-width: 1080px) {
  .executivev2-monthly-stats {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.08fr) minmax(196px, .78fr);
    grid-template-areas:
      "last12 avg trend"
      "peak low trend";
  }

  .executivev2-monthly-stats .executivev2-kpi-card:nth-child(1) {
    grid-area: last12;
  }

  .executivev2-monthly-stats .executivev2-kpi-card:nth-child(2) {
    grid-area: avg;
  }

  .executivev2-monthly-stats .executivev2-kpi-card:nth-child(3) {
    grid-area: peak;
  }

  .executivev2-monthly-stats .executivev2-kpi-card:nth-child(4) {
    grid-area: low;
  }

  .executivev2-monthly-stats .executivev2-kpi-card:nth-child(5) {
    grid-area: trend;
    grid-column: auto;
    min-height: 260px;
    justify-content: center;
    gap: 6px;
    padding-top: 18px;
    padding-bottom: 18px;
    align-items: flex-start;
  }

  .executivev2-monthly-stats .executivev2-kpi-card:nth-child(5) .anl-card-val {
    font-size: clamp(22px, 1.9vw, 28px);
    margin-bottom: 0;
  }

  .executivev2-monthly-stats .executivev2-kpi-card:nth-child(5) .anl-card-sub {
    margin-top: 6px;
  }
}

.executivev2-rank-list,
.executivev2-mix-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.executivev2-mix-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.executivev2-finmix-panel {
  position: relative;
  overflow: hidden;
}

.finmixchart {
  position: relative;
}

.finmixchart-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  gap: 18px;
  align-items: start;
}

.finmixchart-visual,
.finmixchart-breakdown {
  min-width: 0;
}

.finmixchart-visual {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: none;
}

.finmixchart-ring-wrap {
  position: relative;
  width: min(100%, 172px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.finmixchart-ring {
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
  overflow: visible;
}

.finmixchart-track {
  stroke: color-mix(in srgb, var(--border) 72%, var(--surface-3) 28%);
}

.finmixchart-segment {
  transition: stroke-dasharray .18s ease, stroke-dashoffset .18s ease;
}

.finmixchart-center {
  position: absolute;
  inset: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 10px 8px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}

.finmixchart-center span,
.finmixchart-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.finmixchart-center strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
}

.finmixchart-center em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-dim);
}

.finmixchart-summary {
  min-width: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
}

.finmixchart-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finmixchart-summary-value {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

.finmixchart-breakdown {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: none;
}

.finmixchart-category {
  min-width: 0;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 0;
  border: none;
  background: transparent;
}

.finmixchart-category-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--finmix-color);
  flex-shrink: 0;
}

.finmixchart-category-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finmixchart-category-amount,
.finmixchart-category-share {
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  text-align: right;
}

.finmixchart-category-amount {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.finmixchart-category-share {
  color: var(--text-dim);
  font-weight: 700;
  min-width: 50px;
}

@media (max-width: 640px) {
  .finmixchart-category {
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: start;
  }

  .finmixchart-category-name {
    grid-column: 2 / 4;
  }

  .finmixchart-category-amount,
  .finmixchart-category-share {
    grid-row: 2;
    text-align: left;
  }

  .finmixchart-category-amount {
    grid-column: 2;
  }

  .finmixchart-category-share {
    grid-column: 3;
    min-width: 0;
  }
}

.executivev2-mix-feature {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 70%, var(--surface-2) 30%) 0%, var(--surface-2) 100%);
}

.executivev2-mix-feature-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.executivev2-mix-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.executivev2-mix-title {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.executivev2-mix-sub {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.executivev2-mix-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 220px;
}

.executivev2-mix-stat {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.executivev2-mix-stat span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.executivev2-mix-stat strong {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.executivev2-rank-item,
.executivev2-mix-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.executivev2-rank-number {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.executivev2-rank-row,
.executivev2-mix-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.executivev2-rank-name,
.executivev2-mix-name {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.executivev2-rank-value,
.executivev2-mix-value {
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}

.executivev2-rank-meta,
.executivev2-mix-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.executivev2-bar {
  margin-top: 6px;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.executivev2-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--c-azure);
}

.executivev2-mix-item .executivev2-bar > span {
  background: var(--c-entra);
}

.executivev2-signal-grid,
.executivev2-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.executivev2-position-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.executivev2-position-card {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.executivev2-position-progress {
  margin-top: 10px;
}

.executivev2-position-progress-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.executivev2-position-progress-top strong {
  font-size: 11px;
  color: var(--text-dim);
}

.executivev2-position-track {
  margin-top: 6px;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.executivev2-position-track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--c-azure);
}

.executivev2-position-card[data-tone="warn"] .executivev2-position-track > span {
  background: var(--orange);
}

.executivev2-position-card[data-tone="bad"] .executivev2-position-track > span {
  background: var(--red);
}

.executivev2-decision-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.executivev2-risk-card {
  padding: 12px 13px;
}

.executivev2-taghealth-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.executivev2-taghealth-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.executivev2-taghealth-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.executivev2-taghealth-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.executivev2-taghealth-value {
  margin-top: 5px;
  font-size: clamp(28px, 2.2vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--c-azure);
}

.executivev2-taghealth-shell[data-tone="good"] .executivev2-taghealth-value {
  color: var(--green);
}

.executivev2-taghealth-shell[data-tone="warn"] .executivev2-taghealth-value {
  color: var(--orange);
}

.executivev2-taghealth-shell[data-tone="bad"] .executivev2-taghealth-value {
  color: var(--red);
}

.executivev2-taghealth-note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.executivev2-taghealth-bar {
  margin-top: 0;
}

.executivev2-taghealth-bar .prog-row {
  margin-bottom: 0;
}

.executivev2-taghealth-bar .prog-sub {
  margin-top: 8px;
}

.executivev2-taghealth-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.executivev2-taghealth-stat {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.executivev2-taghealth-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.executivev2-taghealth-stat-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.executivev2-risk-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.executivev2-risk-entry {
  padding: 10px 11px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 60%, var(--surface-2) 40%);
  border: 1px solid var(--border);
}

.executivev2-risk-entry-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.executivev2-risk-entry-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.executivev2-table-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.executivev2-table-name strong {
  font-size: 13px;
  color: var(--text);
}

.executivev2-table-sub {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.profitabilityv2-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

:is(.profitabilityv2-shell) > :is(.cost-command-bar-wrap, section, .profitabilityv2-main-grid, .profitabilityv2-feature-grid, .profitabilityv2-support-grid, .anl-box) {
  margin-bottom: var(--ledger-section-gap);
}

:is(.profitabilityv2-shell) > .ledger-command-chrome {
  margin-bottom: 0;
}

.profitabilityv2-header-tools {
  justify-content: flex-start;
  flex: 1 1 100%;
  margin-top: 14px;
}

.profitabilityv2-header-tools .costx-field {
  min-width: 0;
  flex: 0 0 auto;
}

.profitabilityv2-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr);
  gap: 14px;
}

.profitabilityv2-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

.profitabilityv2-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 16px 0;
}

.profitabilityv2-trend-shell,
.profitabilityv2-headline-list,
.profitabilityv2-signal-list,
.profitabilityv2-list,
.profitabilityv2-waterfall,
.profitabilityv2-service-list,
.profitabilityv2-detail-shell,
.profitabilityv2-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profitabilityv2-trend-head,
.profitabilityv2-platform-top,
.profitabilityv2-list-row,
.profitabilityv2-service-row,
.profitabilityv2-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.profitabilityv2-trend-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--text);
}

.profitabilityv2-trend-sub,
.profitabilityv2-headline-copy,
.profitabilityv2-signal-copy,
.profitabilityv2-list-meta,
.profitabilityv2-service-meta,
.profitabilityv2-contributor-meta,
.profitabilityv2-platform-sub,
.profitabilityv2-detail-subtitle {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.profitabilityv2-mini-metrics,
.profitabilityv2-trend-foot,
.profitabilityv2-mini-trend-meta,
.profitabilityv2-platform-metrics,
.profitabilityv2-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profitabilityv2-detail-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profitabilityv2-contributor-grid,
.profitabilityv2-platform-grid,
.profitabilityv2-detail-grid {
  display: grid;
  gap: 10px;
}

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

.profitabilityv2-platform-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.profitabilityv2-detail-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 14px;
}

.profitabilityv2-mini-metric,
.profitabilityv2-headline,
.profitabilityv2-signal,
.profitabilityv2-list-row,
.profitabilityv2-service-row,
.profitabilityv2-waterfall-step,
.profitabilityv2-platform-card,
.profitabilityv2-contributor-card,
.profitabilityv2-foot-note,
.profitabilityv2-detail-stat,
.profitabilityv2-detail-card,
.profitabilityv2-mini-trend-note {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 11px 12px;
}

.profitabilityv2-headline {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 16px 18px 16px;
  min-height: 108px;
}

.profitabilityv2-headline::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-azure);
  opacity: .9;
}

.profitabilityv2-headline:nth-child(2)::before {
  background: var(--c-azure);
}

.profitabilityv2-headline:nth-child(3)::before {
  background: var(--orange);
}

.profitabilityv2-headline:nth-child(4)::before {
  background: var(--green);
}

.profitabilityv2-headline:nth-child(5)::before {
  background: var(--orange);
}

.profitabilityv2-mini-k,
.profitabilityv2-headline-k,
.profitabilityv2-signal-k,
.profitabilityv2-contributor-k,
.profitabilityv2-platform-metric-k,
.profitabilityv2-detail-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.profitabilityv2-mini-v,
.profitabilityv2-headline-v,
.profitabilityv2-signal-v,
.profitabilityv2-platform-profit,
.profitabilityv2-list-value,
.profitabilityv2-service-value,
.profitabilityv2-waterfall-value,
.profitabilityv2-platform-metric-v,
.profitabilityv2-detail-stat-value {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.profitabilityv2-headline-k {
  margin-bottom: 8px;
}

.profitabilityv2-headline-v {
  margin-top: 0;
  font-size: clamp(18px, 1.55vw, 25px);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.profitabilityv2-headline-copy {
  margin-top: 8px;
}

.profitabilityv2-contributor-title,
.profitabilityv2-platform-title,
.profitabilityv2-list-title,
.profitabilityv2-service-title,
.profitabilityv2-detail-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.profitabilityv2-detail-title {
  font-size: 18px;
}

.profitabilityv2-contributor-value {
  margin-top: 6px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.profitabilityv2-headline-v.warn,
.profitabilityv2-signal-v.warn,
.profitabilityv2-contributor-value.warn {
  color: var(--orange);
}

.profitabilityv2-mini-v.good,
.profitabilityv2-headline-v.good,
.profitabilityv2-signal-v.good,
.profitabilityv2-platform-profit.good,
.profitabilityv2-contributor-value.good,
.profitabilityv2-number.good {
  color: var(--green);
}

.profitabilityv2-mini-v.bad,
.profitabilityv2-headline-v.bad,
.profitabilityv2-signal-v.bad,
.profitabilityv2-platform-profit.bad,
.profitabilityv2-contributor-value.bad,
.profitabilityv2-number.bad {
  color: var(--red);
}

.profitabilityv2-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.profitabilityv2-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.profitabilityv2-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.profitabilityv2-trend-chart,
.profitabilityv2-mini-trend {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--border) 55%, transparent 45%) 1px, transparent 1px) 0 0 / 100% 54px,
    linear-gradient(to right, color-mix(in srgb, var(--border) 42%, transparent 58%) 1px, transparent 1px) 0 0 / 70px 100%,
    var(--surface-2);
}

.profitabilityv2-trend-chart svg,
.profitabilityv2-mini-trend svg {
  display: block;
  width: 100%;
  height: auto;
}

.profitabilityv2-foot-note strong,
.profitabilityv2-mini-trend-note strong {
  display: block;
  font-size: 11px;
  color: var(--text);
}

.profitabilityv2-foot-note span,
.profitabilityv2-mini-trend-note span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.profitabilityv2-waterfall-step {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 130px;
  align-items: center;
  gap: 12px;
}

.profitabilityv2-waterfall-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.profitabilityv2-waterfall-bar,
.profitabilityv2-service-track {
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.profitabilityv2-waterfall-bar {
  height: 10px;
}

.profitabilityv2-service-track {
  height: 7px;
}

.profitabilityv2-waterfall-bar span,
.profitabilityv2-service-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.profitabilityv2-waterfall-bar.good span,
.profitabilityv2-service-fill {
  background: color-mix(in srgb, var(--c-azure) 74%, #ffffff 26%);
}

.profitabilityv2-waterfall-bar.warn span {
  background: color-mix(in srgb, var(--orange) 78%, #ffffff 22%);
}

.profitabilityv2-waterfall-bar.bad span,
.profitabilityv2-service-fill.bad {
  background: color-mix(in srgb, var(--red) 78%, #ffffff 22%);
}

.profitabilityv2-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.profitabilityv2-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .75;
}

.profitabilityv2-status.healthy {
  color: var(--green);
  background: rgba(22, 163, 74, .08);
  border-color: rgba(22, 163, 74, .22);
}

.profitabilityv2-status.watch {
  color: var(--orange);
  background: rgba(217, 119, 6, .08);
  border-color: rgba(217, 119, 6, .24);
}

.profitabilityv2-status.loss {
  color: var(--red);
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .22);
}

.profitabilityv2-status.internal {
  color: #475569;
  background: rgba(100, 116, 139, .08);
  border-color: rgba(100, 116, 139, .22);
}

.profitabilityv2-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.profitabilityv2-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.profitabilityv2-table th,
.profitabilityv2-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.profitabilityv2-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.profitabilityv2-table tbody tr {
  transition: background .15s ease;
}

.profitabilityv2-table tbody tr:hover,
.profitabilityv2-table tbody tr.is-selected {
  background: var(--surface-2);
}

.profitabilityv2-entity-button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.profitabilityv2-entity-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.profitabilityv2-entity-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.profitabilityv2-entity-sub {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

@media(max-width:980px) {
  .scope-picker-panel {
    left: 12px !important;
    right: 12px;
    width: auto !important;
    max-height: min(78vh, 640px) !important;
  }

  .scope-picker-columns,
  .scope-picker-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .scope-picker-columns {
    display: none;
  }

  .costx-controls {
    grid-template-columns: 1fr 1fr
  }

  .costx-load {
    grid-column: 1/-1
  }

  .costx-search {
    grid-column: 1/-1
  }

  .computev2-kpi-row,
  .computeconsumption-summary-strip,
  .budgetv2-controls {
    grid-template-columns: 1fr 1fr;
  }

  .computeoverview-summary-strip,
  .computeoverview-kpi-row {
    grid-template-columns: 1fr 1fr;
  }

  .executivev2-summary-strip,
  .executivev2-kpi-row,
  .profitabilityv2-platform-metrics,
  .profitabilityv2-detail-stats,
  .profitabilityv2-mini-metrics,
  .profitabilityv2-trend-foot,
  .profitabilityv2-mini-trend-meta {
    grid-template-columns: 1fr 1fr;
  }

  .executivev2-summary-card {
    border-bottom: 1px solid var(--border);
  }

  .executivev2-summary-card:nth-child(2n) {
    border-right: none;
  }

  .executivev2-summary-card:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .executivev2-kpi-row .executivev2-kpi-card {
    border-bottom: 1px solid var(--border);
  }

  .executivev2-kpi-row .executivev2-kpi-card:nth-child(2n) {
    border-right: none;
  }

  .executivev2-kpi-row .executivev2-kpi-card:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .explorerv2-detail-stats {
    grid-template-columns: 1fr 1fr;
  }

  .budgetv2-detail-grid {
    grid-template-columns: 1fr;
  }

  .executivev2-main-grid,
  .executivev2-feature-grid,
  .executivev2-preview-triad,
  .executivev2-preview-pair,
  .executivev2-risk-row,
  .executivev2-support-grid,
  .executivev2-monthly-grid,
  .executivev2-monthly-stats,
  .executivev2-position-list,
  .executivev2-signal-grid,
  .executivev2-risk-grid,
  .executivev2-hero-metrics,
  .profitabilityv2-main-grid,
  .profitabilityv2-feature-grid,
  .profitabilityv2-support-grid,
  .profitabilityv2-contributor-grid,
  .profitabilityv2-detail-grid,
  .computeoverview-focus-grid,
  .computeoverview-support-grid {
    grid-template-columns: 1fr;
  }

  .explorerv2-detail-grid {
    grid-template-columns: 1fr;
  }

  .explorerv2-header-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .explorerv2-stack-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .explorerv2-opportunity-grid {
    grid-template-columns: 1fr;
  }

  .explorerv2-opportunity-progress,
  .explorerv2-opportunity-metrics {
    margin-left: 0;
  }

  .explorerv2-support-grid {
    grid-template-columns: 1fr;
  }

  .explorerv2-comp-shell,
  .explorerv2-breakdown-stat-grid {
    grid-template-columns: 1fr;
  }

  .explorerv2-combined-header {
    flex-direction: column;
  }

  .explorerv2-combined-summary {
    justify-content: flex-start;
  }

  .explorerv2-combined-insights {
    grid-template-columns: 1fr;
  }

  .explorerv2-combined-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .explorerv2-combined-side {
    grid-column: 2;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .explorerv2-combined-badge {
    align-self: start;
  }

  .explorerv2-combined-details {
    grid-template-columns: 1fr;
  }
}

@media(max-width:640px) {
  .costx {
    padding: 14px 12px
  }

  .costx-title {
    font-size: 18px
  }

  .costx-controls {
    grid-template-columns: 1fr
  }

  .costx-kpis {
    grid-template-columns: 1fr
  }

  .costx-quick {
    width: 100%
  }

  .costx-quick-btn {
    flex: 1
  }

  .computev2-kpi-row,
  .computeconsumption-header-tools,
  .computeconsumption-summary-strip,
  .budgetv2-header-tools,
  .budgetv2-controls,
  .budgetv2-detail-list,
  .computeoverview-summary-strip,
  .computeoverview-kpi-row {
    grid-template-columns: 1fr;
  }

  .computeconsumption-search-field,
  .computeconsumption-header-tools .costx-field {
    min-width: 0;
  }

  .executivev2-header-tools,
  .executivev2-ai-grid,
  .executivev2-ai-detail-grid,
  .executivev2-ai-timeline,
  .executivev2-ai-support-grid,
  .executivev2-summary-strip,
  .executivev2-kpi-row,
  .executivev2-preview-triad,
  .executivev2-preview-pair,
  .executivev2-risk-row,
  .executivev2-monthly-stats,
  .executivev2-support-grid,
  .executivev2-position-list,
  .executivev2-signal-grid,
  .executivev2-risk-grid,
  .executivev2-hero-metrics,
  .profitabilityv2-header-tools,
  .profitabilityv2-platform-metrics,
  .profitabilityv2-detail-stats,
  .profitabilityv2-mini-metrics,
  .profitabilityv2-trend-foot,
  .profitabilityv2-mini-trend-meta {
    grid-template-columns: 1fr;
  }

  .executivev2-summary-card,
  .executivev2-kpi-row .executivev2-kpi-card,
  .executivev2-monthly-stats .executivev2-kpi-card {
    border-right: none;
  }

  .executivev2-summary-card:not(:last-child),
  .executivev2-kpi-row .executivev2-kpi-card:not(:last-child),
  .executivev2-monthly-stats .executivev2-kpi-card:not(:last-child) {
    border-bottom: 1px solid var(--border);
  }

  .executivev2-summary-card:last-child,
  .executivev2-kpi-row .executivev2-kpi-card:last-child,
  .executivev2-monthly-stats .executivev2-kpi-card:last-child {
    border-bottom: none;
  }

  .finmixchart-shell {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .finmixchart-visual,
  .finmixchart-breakdown {
    padding: 14px;
  }

  .explorerv2-header-tools,
  .explorerv2-detail-stats,
  .explorerv2-trend-pair {
    grid-template-columns: 1fr;
  }

  .explorerv2-stack-head {
    display: grid;
  }

  .explorerv2-stack-note {
    text-align: left;
  }

  .explorerv2-stack-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .explorerv2-opportunity-card {
    padding: 12px;
  }

  .explorerv2-opportunity-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .explorerv2-opportunity-status {
    grid-column: 1 / -1;
    text-align: left;
  }

  .explorerv2-opportunity-metrics {
    grid-template-columns: 1fr;
  }

  .executivev2-mix-feature {
    flex-direction: column;
  }

  .executivev2-preview-stack-row {
    grid-template-columns: 1fr;
  }

  .executivev2-mix-stats {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .profitabilityv2-waterfall-step,
  .profitabilityv2-list-row,
  .profitabilityv2-service-row,
  .profitabilityv2-platform-top,
  .profitabilityv2-detail-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .explorerv2-view-switch,
  .explorerv2-table-bar-left {
    width: 100%;
    justify-content: space-between;
  }

  .explorerv2-combined-shell,
  .explorerv2-combined-header,
  .explorerv2-combined-main-top {
    grid-template-columns: 1fr;
  }

  .explorerv2-combined-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .explorerv2-combined-rank,
  .explorerv2-combined-side {
    grid-column: auto;
  }

  .explorerv2-combined-main-top {
    display: grid;
  }

  .explorerv2-combined-money {
    min-width: 0;
    text-align: left;
  }

  .explorerv2-combined-side {
    grid-template-columns: 1fr;
  }

  .explorerv2-combined-summary {
    width: 100%;
  }

  .explorerv2-combined-summary span {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
  }

  .budgetv2-header-tools {
    display: grid;
  }

  .executivev2-header-tools {
    align-items: stretch;
  }

  .executivev2-date-panel {
    min-width: min(356px, calc(100vw - 32px));
    width: min(356px, calc(100vw - 32px));
  }

  .executivev2-date-grid {
    grid-template-columns: 1fr;
  }

  .executivev2-period-toggle {
    width: 100%;
  }

  .executivev2-period-toggle .costx-quick-btn {
    flex: 1 1 0;
  }

  .executivev2-head-main {
    flex-direction: column;
    align-items: stretch;
  }

  .executivev2-toolbar-main,
  .executivev2-toolbar-actions {
    width: 100%;
  }

  .executivev2-toolbar-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .executivev2-monthly-frame-head,
  .executivev2-monthly-chart-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .executivev2-monthly-plot {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .executivev2-monthly-scale {
    min-height: 0;
    flex-direction: row;
    gap: 8px;
    padding: 0;
  }

  .executivev2-axis-monthly {
    padding-left: 0;
  }

  .executivev2-head-cta {
    justify-content: stretch;
  }

  .executivev2-ai-action-btn {
    width: 100%;
  }

  .executivev2-ai-panel {
    padding: 0;
  }

  .executivev2-ai-shell {
    padding: 18px 18px 16px 28px;
  }

  .executivev2-ai-head-actions,
  .executivev2-ai-freshness {
    width: 100%;
    text-align: left;
    justify-content: space-between;
  }

  .executivev2-ai-title {
    font-size: 22px;
  }

  .executivev2-ai-brief-copy {
    font-size: 18px;
  }

  .executivev2-ai-priority-bar {
    grid-template-columns: 1fr;
  }

  .explorerv2-header-tools {
    display: grid;
    grid-template-columns: 1fr;
  }

  .budgetv2-scope-btn,
  .budgetv2-period-input {
    min-width: 0;
  }

  .executivev2-header-tools .budgetv2-scope-btn,
  .executivev2-header-tools .budgetv2-period-input {
    min-width: 0;
  }

  .executivev2-toolbar-main {
    flex-direction: column;
    align-items: stretch;
  }

  .budgetv2-list-top {
    flex-direction: column;
    align-items: flex-start;
  }

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

/* ── Licence Features ── */
.lf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding-bottom: 40px
}

.lf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.lf-card:hover {
  border-color: var(--c-azure);
  box-shadow: 0 4px 16px rgba(0, 120, 212, .13);
  transform: translateY(-1px)
}

.lf-card-top {
  padding: 18px 20px 14px;
  flex: 1
}

.lf-card-tier {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: .4px;
  text-transform: uppercase
}

.lf-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.3
}

.lf-card-sid {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 12px;
  letter-spacing: .3px
}

.lf-card-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px
}

.lf-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap
}

.lf-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 11px;
  gap: 8px
}

.lf-addon-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-weight: 600
}

.lf-plans-badge {
  color: var(--text-muted)
}

/* Detail modal sections */
.lf-section-hdr {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border)
}

.lf-section-hdr:first-child {
  margin-top: 0
}

.lf-detail-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px
}

.lf-chip-sid {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 8px;
  background: var(--surface-2);
  border-radius: 6px;
  border: 1px solid var(--border)
}

.lf-chip-guid {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 8px;
  background: var(--surface-2);
  border-radius: 6px;
  border: 1px solid var(--border);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default
}

.lf-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px
}

.lf-cat-section {
  margin-bottom: 16px
}

.lf-cat-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700
}

.lf-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block
}

.lf-cat-count {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400
}

.lf-plan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--surface-2);
  border-radius: 6px;
  margin-bottom: 4px;
  min-width: 0;
  overflow: hidden
}

.lf-plan-bar {
  width: 3px;
  min-height: 18px;
  border-radius: 2px;
  flex-shrink: 0
}

.lf-plan-info {
  flex: 1;
  min-width: 0
}

.lf-plan-name {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lf-plan-id {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/* Add-on cards */
.lf-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 8px
}

.lf-addon-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  transition: border-color .2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0
}

.lf-addon-card:hover {
  border-color: var(--c-azure)
}

.lf-addon-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3
}

.lf-addon-sid {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lf-addon-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.lf-addon-new-badge {
  font-size: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap
}

.lf-addon-cat-dots {
  display: flex;
  gap: 4px;
  align-items: center
}

.lf-addon-cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block
}

.lf-addon-plans {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px
}

.lf-addon-plan-item {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.lf-addon-plan-name {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lf-addon-plan-id {
  font-size: 9px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lf-addon-more {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 2px
}

@media(max-width:640px) {
  .lf-plans-grid {
    grid-template-columns: 1fr
  }

  .lf-addons-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:768px) {
  .lf-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))
  }
}

@media(max-width:640px) {
  .lf-grid {
    grid-template-columns: 1fr
  }

  .lf-card-cats {
    gap: 4px
  }

  .lf-cat-pill {
    font-size: 9px;
    padding: 2px 7px
  }
}

@media(max-width:1280px) {
  .showbackv2-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:1080px) {
  .showbackv2-analysis-grid,
  .showbackv2-filterbar,
  .showbackv2-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showbackv2-filterbar {
    align-items: stretch;
  }
}

@media(max-width:820px) {
  .showbackv2-trend-chart {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showbackv2-waterfall-step {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .showbackv2-table {
    min-width: 920px;
  }

  .showbackv2-table th,
  .showbackv2-table td {
    padding: 10px 10px;
  }
}

@media(max-width:640px) {
  .showbackv2-analysis-grid,
  .showbackv2-filterbar,
  .showbackv2-detail-grid,
  .showbackv2-detail-stats {
    grid-template-columns: 1fr;
  }

  .showbackv2-tree-wrap {
    max-height: none;
  }

  .showbackv2-detail-head {
    flex-direction: column;
  }

  .showbackv2-table {
    min-width: 760px;
  }

  .showbackv2-list-row {
    grid-template-columns: 1fr;
  }
}

.reportsv2-header-tools {
  justify-content: flex-start;
  flex: 1 1 100%;
  margin-top: 14px;
}

.reportsv2-search-field {
  min-width: min(340px, 100%);
  flex: 1 1 340px;
}

.reportsv2-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reportsv2-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.reportsv2-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reportsv2-tab span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.reportsv2-tab.active {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, var(--border) 65%);
  background: var(--nav-item-active-bg);
}

.reportsv2-tab[disabled] {
  opacity: .7;
  cursor: default;
}

.reportsv2-status {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
  padding: 12px 14px;
}

.reportsv2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 14px;
  margin-top: 14px;
}

.reportsv2-grid-secondary {
  align-items: start;
}

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

.reportsv2-note-field {
  grid-column: 1 / -1;
}

.reportsv2-textarea {
  min-height: 124px;
  height: auto;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
}

.reportsv2-scope-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.reportsv2-scope-helper {
  grid-column: 1 / -1;
}

.reportsv2-scope-helper-copy {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.reportsv2-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.reportsv2-section-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.reportsv2-section-card:hover {
  border-color: var(--green);
  background: var(--surface-2);
}

.reportsv2-section-card.selected {
  border-color: color-mix(in srgb, var(--green) 40%, var(--border) 60%);
  background: var(--nav-item-active-bg);
}

.reportsv2-section-accent {
  width: 8px;
  min-height: 48px;
  border-radius: 999px;
  background: var(--c-azure);
}

.reportsv2-section-accent.partner { background: var(--c-partner); }
.reportsv2-section-accent.m365 { background: var(--c-m365); }
.reportsv2-section-accent.entra { background: var(--c-entra); }
.reportsv2-section-accent.security { background: var(--c-security); }
.reportsv2-section-accent.intune { background: var(--c-intune); }

.reportsv2-section-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.reportsv2-section-copy strong {
  font-size: 13px;
  color: var(--text);
}

.reportsv2-section-copy span {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.reportsv2-section-state {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding-top: 1px;
}

.reportsv2-preview-head {
  margin-bottom: 12px;
}

.reportsv2-preview-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.reportsv2-preview-summary-grid div {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px 12px;
}

.reportsv2-preview-summary-grid span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.reportsv2-preview-summary-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
}

.reportsv2-preview-sheet {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  padding: 16px;
}

.reportsv2-sheet {
  display: grid;
  gap: 14px;
}

.reportsv2-sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.reportsv2-sheet-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green);
}

.reportsv2-sheet-title {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
}

.reportsv2-sheet-subtitle,
.reportsv2-sheet-period,
.reportsv2-sheet-meta,
.reportsv2-sheet-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
}

.reportsv2-sheet-period {
  white-space: nowrap;
}

.reportsv2-sheet-meta {
  display: grid;
  gap: 4px;
}

.reportsv2-sheet-sections {
  display: grid;
  gap: 8px;
}

.reportsv2-sheet-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
}

.reportsv2-sheet-section span {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
}

.reportsv2-sheet-section strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.reportsv2-sheet-section p {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.reportsv2-preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.reportsv2-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.reportsv2-roadmap-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 12px;
  display: grid;
  gap: 6px;
}

.reportsv2-roadmap-item strong {
  font-size: 12px;
  color: var(--text);
}

.reportsv2-roadmap-item span {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

@media(max-width:1080px) {
  .reportsv2-summary-strip,
  .reportsv2-roadmap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reportsv2-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:720px) {
  .reportsv2-form-grid,
  .reportsv2-scope-grid,
  .reportsv2-preview-summary-grid,
  .reportsv2-section-grid,
  .reportsv2-roadmap-grid {
    grid-template-columns: 1fr;
  }

  .reportsv2-sheet-head {
    flex-direction: column;
  }

  .reportsv2-preview-actions {
    flex-direction: column;
  }
}

/* ══════════════════════════════════════════════════════════
   AI Diagnostics Panel
   ══════════════════════════════════════════════════════════ */

/* Page header */
#panel-ai-diagnostics .anl-sh {
  font-size: 11px;
  margin-bottom: 8px;
}

#panel-ai-diagnostics > .anl > .anl-bs {
  font-size: 13px;
  color: var(--text-dim);
  max-width: 640px;
  line-height: 1.5;
  margin-bottom: 22px;
}

/* Section layout grid */
.ai-diag-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.ai-diag-grid > .anl-box,
#aiDiagnosticsStatusCards > .anl-card {
  min-width: 0;
}

/* Toolbar row (title block + controls) */
.ai-diag-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.ai-diag-toolbar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.ai-diag-toolbar-copy,
.ai-diag-toolbar > div:first-child {
  flex: 1;
  min-width: 0;
}

.ai-diag-header-cta,
.page-diag-header-cta {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

.ai-diag-toolbar .anl-bt {
  font-size: 14px;
  margin-bottom: 4px;
}

.ai-diag-toolbar .anl-bs {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  font-size: 12px;
  line-height: 1.5;
}

.ai-diag-toolbar-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  min-width: 0;
}

#panel-page-diagnostics .page-diag-head-actions .btn.secondary,
#panel-diagnostics-overview .page-diag-head-actions .btn.secondary,
#panel-data-pipeline-diagnostics .page-diag-head-actions .btn.secondary,
#panel-system-diagnostics .page-diag-head-actions .btn.secondary,
#panel-ai-diagnostics .ai-diag-toolbar-actions .rfb,
#panel-ai-diagnostics .ai-diag-header-cta .ionix-ai-assist-btn {
  min-width: 168px;
  min-height: 44px;
}

.diag-ai-explain-wrap {
  margin-top: 14px;
}

.diag-ai-explain-wrap .ionix-ai-surface,
.diag-ai-explain-wrap .executivev2-ai-shell {
  gap: 16px;
  padding: 20px 22px 20px 28px;
  border-radius: 16px;
  animation: diagAiShellIn .22s ease forwards, execAiRimRotate 8.5s linear infinite;
}

.diag-ai-explain-wrap .ionix-ai-surface::before,
.diag-ai-explain-wrap .executivev2-ai-shell::before {
  inset: 18px auto 18px 12px;
}

.diag-ai-explain-wrap .ionix-ai-surface::after,
.diag-ai-explain-wrap .executivev2-ai-shell::after {
  inset: 24px auto 24px 12px;
}

/* Global Ionix AI Assist contract (single source of truth) */
@keyframes ionixAiFieldDrift {
  0% { background-position: 0% 50%, 50% 50%; }
  50% { background-position: 100% 50%, 50% 50%; }
  100% { background-position: 0% 50%, 50% 50%; }
}

@keyframes ionixAiSheenSweep {
  0% { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  18% { opacity: .5; }
  50% { opacity: .2; }
  100% { transform: translateX(130%) skewX(-18deg); opacity: 0; }
}

.ionix-ai-assist-btn.executivev2-ai-action-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: var(--control-height);
  min-height: var(--control-height);
  min-width: 184px;
  padding: 0 16px 0 13px;
  border-radius: 14px;
  border: 2px solid transparent !important;
  color: #f8f7ff !important;
  background-image:
    linear-gradient(122deg, #7a6fd8 0%, #9085e4 48%, #b5abf2 100%),
    conic-gradient(from var(--exec-ai-rim),
      rgba(148,129,231,0) 0deg,
      rgba(244,241,255,.72) 68deg,
      rgba(175,161,240,.72) 146deg,
      rgba(137,119,220,.62) 220deg,
      rgba(148,129,231,0) 360deg) !important;
  background-size: 185% 185%, 100% 100%;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  animation: ionixAiFieldDrift 6.8s ease-in-out infinite, execAiRimRotate 8.6s linear infinite !important;
  transform: none !important;
  box-shadow: 0 10px 24px rgba(94, 82, 164, .18), inset 0 1px 0 rgba(255,255,255,.2) !important;
  justify-content: flex-start;
  gap: 10px;
  font-weight: 650;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.ionix-ai-assist-btn.executivev2-ai-action-btn::before {
  content: "" !important;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--exec-ai-rim),
    rgba(148,129,231,0) 0deg,
    rgba(255,255,255,.76) 66deg,
    rgba(188,176,245,.56) 154deg,
    rgba(142,124,225,.44) 230deg,
    rgba(148,129,231,0) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: execAiRimRotate 8.6s linear infinite !important;
  opacity: .85;
  z-index: 0;
}

.ionix-ai-assist-btn.executivev2-ai-action-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  left: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 45%, rgba(255,255,255,0) 100%);
  animation: ionixAiSheenSweep 3.2s ease-in-out infinite;
}

.ionix-ai-assist-btn.executivev2-ai-action-btn:hover,
.ionix-ai-assist-btn.executivev2-ai-action-btn:active,
.ionix-ai-assist-btn.executivev2-ai-action-btn.is-active,
.ionix-ai-assist-btn.executivev2-ai-action-btn.is-loading {
  border-color: transparent !important;
  color: #ffffff !important;
  background-image:
    linear-gradient(122deg, #8378df 0%, #9a90e8 48%, #beb6f4 100%),
    conic-gradient(from var(--exec-ai-rim),
      rgba(148,129,231,0) 0deg,
      rgba(255,255,255,.84) 66deg,
      rgba(196,185,248,.7) 142deg,
      rgba(146,127,227,.56) 218deg,
      rgba(148,129,231,0) 360deg) !important;
  background-size: 185% 185%, 100% 100%;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  animation: ionixAiFieldDrift 5.2s ease-in-out infinite, execAiRimRotate 6.8s linear infinite !important;
  transform: none !important;
  box-shadow: 0 12px 28px rgba(98, 84, 173, .22), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.ionix-ai-assist-btn.executivev2-ai-action-btn:focus-visible {
  outline: 2px solid rgba(145,129,227,.42);
  outline-offset: 1px;
  box-shadow: none !important;
}

.ionix-ai-assist-btn > * {
  position: relative;
  z-index: 1;
}

.ionix-ai-assist-btn .executivev2-ai-action-icon {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  box-shadow: none;
  flex: 0 0 20px;
  margin-left: -1px;
}

.ionix-ai-assist-btn .executivev2-ai-action-icon-svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 2px rgba(108,92,205,.22));
}

.ionix-ai-assist-btn .executivev2-ai-action-copy {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 0;
}

.ionix-ai-assist-btn .executivev2-ai-action-label {
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  color: currentColor;
  letter-spacing: -.01em;
}

.ionix-ai-assist-btn .executivev2-ai-action-meta {
  display: none !important;
}

.executivev2-shell .executivev2-head-copy .costx-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.03;
}

.executivev2-shell .executivev2-head-copy .costx-sub {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  max-width: 800px;
  color: color-mix(in srgb, var(--text-muted) 82%, var(--text) 18%);
}

#panel-dashboard .executivev2-head-main {
  align-items: flex-start;
}

#panel-dashboard .executivev2-head-cta {
  align-self: flex-start;
}

#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn {
  min-width: 178px;
  height: 42px;
  min-height: 42px;
  padding: 7px 14px 7px 11px;
  gap: 8px;
  border-radius: 16px;
  color: #6f63e8 !important;
  background-image:
    linear-gradient(180deg, #fcfaff 0%, #f6efff 100%),
    conic-gradient(from var(--exec-ai-rim),
      rgba(126,108,232,0) 0deg,
      rgba(126,108,232,.46) 60deg,
      rgba(196,185,251,.68) 132deg,
      rgba(109,91,219,.54) 214deg,
      rgba(126,108,232,0) 360deg) !important;
  background-size: 100% 100%, 100% 100%;
  box-shadow: none !important;
  animation: execAiRimRotate 9.2s linear infinite !important;
}

#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn:hover,
#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn:active,
#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn.is-active,
#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn.is-loading {
  color: #6657e2 !important;
  background-image:
    linear-gradient(180deg, #fbf8ff 0%, #f1e8ff 100%),
    conic-gradient(from var(--exec-ai-rim),
      rgba(126,108,232,0) 0deg,
      rgba(112,92,224,.58) 58deg,
      rgba(205,194,253,.78) 130deg,
      rgba(98,79,213,.62) 210deg,
      rgba(126,108,232,0) 360deg) !important;
  box-shadow: none !important;
  animation: execAiRimRotate 7.2s linear infinite !important;
}

#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn:hover::before,
#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn:active::before,
#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn.is-active::before,
#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn.is-loading::before {
  opacity: .48;
  background: conic-gradient(from var(--exec-ai-rim),
    rgba(126,108,232,0) 0deg,
    rgba(129,109,235,.38) 54deg,
    rgba(228,220,255,.82) 124deg,
    rgba(110,90,221,.5) 204deg,
    rgba(126,108,232,0) 360deg);
}

#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn::after {
  opacity: .12;
  width: 40%;
  background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%);
  animation-duration: 5.2s;
}

#panel-dashboard .ionix-ai-assist-btn .executivev2-ai-action-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-left: 0;
}

#panel-dashboard .ionix-ai-assist-btn .executivev2-ai-action-icon-svg {
  width: 20px;
  height: 20px;
  filter: none;
}

#panel-dashboard .ionix-ai-assist-btn .executivev2-ai-action-copy {
  gap: 0;
}

#panel-dashboard .ionix-ai-assist-btn .executivev2-ai-action-label {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn::before {
  inset: -1px;
  padding: 1px;
  opacity: .62;
  background: conic-gradient(from var(--exec-ai-rim),
    rgba(126,108,232,0) 0deg,
    rgba(143,124,239,.32) 58deg,
    rgba(221,213,255,.78) 126deg,
    rgba(114,95,220,.44) 208deg,
    rgba(126,108,232,0) 360deg);
}

#panel-dashboard .ionix-ai-assist-btn.executivev2-ai-action-btn:focus-visible {
  outline: 2px solid rgba(126,108,232,.26);
  outline-offset: 2px;
}

.executivev2-head-cta .ionix-ai-assist-btn,
.ai-diag-header-cta .ionix-ai-assist-btn,
.page-diag-header-cta .ionix-ai-assist-btn {
  align-self: flex-start;
}

.page-diag-head-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

#panel-page-diagnostics .btn.secondary,
#panel-diagnostics-overview .btn.secondary {
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

#panel-page-diagnostics .btn.secondary:hover,
#panel-diagnostics-overview .btn.secondary:hover,
#panel-data-pipeline-diagnostics .btn.secondary:hover,
#panel-system-diagnostics .btn.secondary:hover {
  border-color: var(--green);
  color: var(--green);
  background: #f7faf6;
}

#panel-page-diagnostics .page-diag-head-actions .btn.secondary,
#panel-diagnostics-overview .page-diag-head-actions .btn.secondary,
#panel-data-pipeline-diagnostics .page-diag-head-actions .btn.secondary,
#panel-system-diagnostics .page-diag-head-actions .btn.secondary,
#panel-ai-diagnostics .ai-diag-toolbar-actions .rfb {
  height: var(--control-height);
  min-height: var(--control-height);
}

.page-diag-ai-region {
  display: grid;
  gap: 12px;
}

.page-diag-context-chrome {
  display: grid;
  gap: 8px;
  max-height: 180px;
  overflow: hidden;
  transition: opacity .22s ease, max-height .22s ease, margin .22s ease, transform .22s ease;
}

.page-diag-ai-region.is-ai-open {
  gap: 0;
}

.page-diag-ai-region.is-ai-open .page-diag-context-chrome {
  opacity: 0;
  max-height: 0;
  margin: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.diag-ai-explain-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.diag-ai-explain-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
}

.diag-ai-explain-scope {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 3px;
}

.diag-ai-explain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.diag-ai-explain-card {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, #dce4ef 18%);
  background: color-mix(in srgb, var(--surface) 72%, #f4f7fb 28%);
  box-shadow: inset 3px 0 0 0 color-mix(in srgb, #8d6cf0 22%, transparent 78%);
}

[data-theme="dark"] .diag-ai-explain-card {
  background: color-mix(in srgb, var(--surface) 82%, #0f172a 18%);
  border-color: color-mix(in srgb, var(--border) 84%, #1e293b 16%);
}

.diag-ai-explain-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.diag-ai-explain-label::before {
  content: "";
  width: 12px;
  height: 1px;
  background: color-mix(in srgb, #8d6cf0 55%, transparent 45%);
  flex-shrink: 0;
}

.diag-ai-explain-copy {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.ai-diag-range {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-diag-range .admin-meta {
  margin-bottom: 0 !important;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .04em;
}

/* Meta line (range/source/provider/auth) */
#aiDiagnosticsMeta {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0 !important;
  margin-bottom: 14px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Operator Summary Banner */
#aiDiagnosticsSummaryBanner {
  margin-top: 0 !important;
}

.ai-diag-banner {
  display: grid;
  grid-template-columns: minmax(180px, 210px) 1fr;
  gap: 20px;
  align-items: start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}

.ai-diag-banner-state {
  border-right: 1px solid var(--border);
  padding-right: 20px;
}

.ai-diag-banner-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.ai-diag-banner-headline {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 5px;
}

.ai-diag-banner-copy {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.ai-diag-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  align-content: center;
}

.ai-diag-bullets li {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  padding-left: 12px;
  position: relative;
}

.ai-diag-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
}

/* Status cards row */
#aiDiagnosticsStatusCards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  margin-bottom: 0;
  align-items: stretch;
}

/* AI diagnostics card */
.ai-diag-card {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ai-diag-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
}

.ai-diag-card[data-tone="good"]::before,
.ai-diag-card[data-tone="healthy"]::before {
  background: var(--green);
}

.ai-diag-card[data-tone="warn"]::before,
.ai-diag-card[data-tone="partial"]::before {
  background: var(--orange);
}

.ai-diag-card[data-tone="bad"]::before,
.ai-diag-card[data-tone="danger"]::before,
.ai-diag-card[data-tone="mismatch"]::before {
  background: var(--red);
}

.ai-diag-card[data-tone="info"]::before {
  background: var(--c-azure);
}

.ai-diag-card[data-tone="neutral"]::before {
  background: var(--border);
}

.ai-diag-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}

.ai-diag-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  min-width: 0;
}

.ai-diag-card-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: 5px;
  overflow-wrap: anywhere;
}

.ai-diag-card-copy {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.ai-diag-card-list {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: grid;
  gap: 5px;
  margin-top: auto;
}

.ai-diag-card-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.ai-diag-card-list-key {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ai-diag-card-list-val {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  text-align: right;
  word-break: break-word;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-diag-value {
  color: inherit;
}

.ai-diag-value.ai-diag-value-neutral {
  color: var(--text-muted);
}

/* Status pills */
.ai-diag-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-diag-pill.tone-good,
.ai-diag-pill.tone-healthy {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
}

.ai-diag-pill.tone-warn,
.ai-diag-pill.tone-partial {
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--orange);
}

.ai-diag-pill.tone-bad,
.ai-diag-pill.tone-danger,
.ai-diag-pill.tone-mismatch {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}

.ai-diag-pill.tone-info {
  background: var(--c-azure-bg);
  color: var(--c-azure);
}

.ai-diag-pill.tone-neutral {
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  color: var(--text-muted);
}

/* Panel section titles */
#panel-ai-diagnostics .ai-diag-grid .anl-box .anl-bt {
  font-size: 13px;
  margin-bottom: 3px;
}

#panel-ai-diagnostics .ai-diag-grid .anl-box .anl-bs {
  font-size: 11px;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}

.ai-diag-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 12px;
  min-width: 0;
}

.ai-diag-panel-head .admin-meta {
  min-width: 0;
  white-space: normal;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ai-diag-panel-head .ai-diag-pill {
  justify-self: end;
  margin-top: 1px;
}

/* KPI tile grid — 2-up inside narrow panels */
.ai-diag-panel-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* KPI tile grid — 4-up inside full-width error section */
.ai-diag-panel-kpis.ai-diag-panel-kpis-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-diag-panel-kpi {
  padding: 13px 14px 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* 2-col: remove right border from even items */
.ai-diag-panel-kpis:not(.ai-diag-panel-kpis-compact) .ai-diag-panel-kpi:nth-child(2n) {
  border-right: none;
}

/* 2-col: remove bottom border from last row */
.ai-diag-panel-kpis:not(.ai-diag-panel-kpis-compact) .ai-diag-panel-kpi:nth-last-child(-n+2) {
  border-bottom: none;
}

/* 4-col: no bottom borders, strip right from every 4th */
.ai-diag-panel-kpis-compact .ai-diag-panel-kpi {
  border-bottom: none;
}

.ai-diag-panel-kpis-compact .ai-diag-panel-kpi:nth-child(4n) {
  border-right: none;
}

.ai-diag-panel-kpi:last-child {
  border-right: none;
}

.ai-diag-panel-kpi-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}

.ai-diag-panel-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.ai-diag-panel-kpi-sub {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Executions table */
.ai-diag-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 12px;
}

.ai-diag-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ai-diag-table-wrap thead th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  padding: 9px 12px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}

.ai-diag-table-wrap tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  vertical-align: middle;
  font-size: 12px;
}

.ai-diag-table-wrap tbody tr:last-child td {
  border-bottom: none;
}

.ai-diag-table-note {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: normal;
}

/* Footnote line */
.ai-diag-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

/* Error block */
.ai-diag-error {
  background: color-mix(in srgb, var(--red) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--red) 22%, var(--border));
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  white-space: pre-line;
  margin-top: 14px !important;
}

.ai-diag-error.ai-diag-error-quiet {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}

/* Empty state */
.ai-diag-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 14px 0 6px;
  line-height: 1.5;
}

/* Detail lists — bottom 3 panels */
.ai-diag-detail-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
}

.ai-diag-detail-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.ai-diag-detail-row:last-child {
  border-bottom: none;
}

.ai-diag-detail-key {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.ai-diag-detail-val {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
  word-break: break-word;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Bottom panel row */
.ai-diag-grid-bottom .anl-box .anl-bs {
  font-size: 11px;
  margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 1100px) {
  #aiDiagnosticsStatusCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .ai-diag-grid.ai-diag-grid-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  #aiDiagnosticsStatusCards {
    grid-template-columns: 1fr;
  }

  .ai-diag-grid {
    grid-template-columns: 1fr;
  }

  .ai-diag-banner {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ai-diag-banner-state {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
  }

  .ai-diag-panel-kpis-compact {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-diag-panel-kpis-compact .ai-diag-panel-kpi {
    border-bottom: 1px solid var(--border);
  }

  .ai-diag-panel-kpis-compact .ai-diag-panel-kpi:nth-child(2n) {
    border-right: none;
  }

  .ai-diag-panel-kpis-compact .ai-diag-panel-kpi:nth-child(2n+1) {
    border-right: 1px solid var(--border);
  }

  .ai-diag-panel-kpis-compact .ai-diag-panel-kpi:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 640px) {
  .ai-diag-toolbar-head,
  .page-diag-shell-head {
    flex-direction: column;
    gap: 14px;
  }

  .ai-diag-toolbar {
    gap: 14px;
  }

  .ai-diag-toolbar-actions,
  .ai-diag-header-cta,
  .page-diag-header-cta {
    width: 100%;
  }

  .ai-diag-header-cta,
  .page-diag-header-cta {
    justify-content: flex-start;
  }

  .diag-ai-explain-grid {
    grid-template-columns: 1fr;
  }

  .ai-diag-card-list-row,
  .ai-diag-panel-head {
    grid-template-columns: 1fr;
  }

  .ai-diag-detail-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .ai-diag-detail-key {
    white-space: normal;
  }
}


/* ── Compute Consumption visual enhancements ── */
.cc-charts-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.cc-chart-box {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cc-donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 0 4px;
  min-height: 150px;
}

.cc-donut-shell {
  width: 136px;
  height: 136px;
  flex-shrink: 0;
}

.cc-donut-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
}

.cc-donut-ring::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}

.cc-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.cc-donut-center-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.cc-donut-center-lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 2px;
}

.cc-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cc-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  min-width: 0;
}

.cc-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cc-legend-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
  font-size: 11px;
}

.cc-legend-val {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.cc-bar-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 0;
}

.cc-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.cc-bar-label {
  width: 130px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 500;
  font-size: 11px;
}

.cc-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.cc-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--c-azure);
  transition: width .4s ease;
}

.cc-bar-amount {
  width: 72px;
  text-align: right;
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
}

.cc-placeholder {
  color: var(--text-muted);
  font-size: 12px;
  padding: 24px 0;
  text-align: center;
}

.advisor-page {
  display: grid;
  gap: var(--ledger-section-gap);
  margin-top: 0;
}

.advisor-page.ledger-analytical-page {
  gap: 0;
}

.advisor-page.ledger-analytical-page > :is(section, .anl-box, .advisor-page-signals, .advisor-overview-grid, .advisor-mix-grid, .advisor-summary-strip) {
  margin-bottom: var(--ledger-section-gap);
}

.advisor-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
  margin-bottom: 0;
}

.advisor-kpi-row {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin-bottom: 0;
}

.advisor-kpi-row .anl-card {
  position: relative;
  overflow: hidden;
  padding: 16px 14px 14px;
}

.advisor-kpi-row .anl-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-azure);
  opacity: .9;
}

.advisor-kpi-row .anl-card:nth-child(2)::before { background: var(--green); }
.advisor-kpi-row .anl-card:nth-child(3)::before { background: #0891b2; }
.advisor-kpi-row .anl-card:nth-child(4)::before { background: #d97706; }
.advisor-kpi-row .anl-card:nth-child(5)::before { background: #7c3aed; }
.advisor-kpi-row .anl-card:nth-child(6)::before { background: #dc2626; }
.advisor-kpi-row .anl-card:nth-child(7)::before { background: #0f766e; }
.advisor-kpi-row .anl-card:nth-child(8)::before { background: #2563eb; }

.advisor-kpi-row .anl-card-val {
  font-size: clamp(16px, 1.45vw, 24px);
  line-height: 1.08;
}

.advisor-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 14px;
}

.advisor-mix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.advisor-mix-grid .cc-donut-center {
  text-align: center;
}

.advisor-mix-grid .cc-donut-center-val {
  font-size: 22px;
  line-height: 1;
}

.advisor-donut-center-sub {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-dim);
  font-weight: 600;
}

.advisor-quality-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.advisor-quality-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.advisor-quality-stat-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.advisor-quality-stat-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.advisor-quality-stat-sub {
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
}

.advisor-quality-stat-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.advisor-filterbar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.advisor-filterbar .costx-field:last-child {
  grid-column: span 1;
}

.advisor-filterbar .costx-search .authi {
  width: 100%;
}

.advisor-toolbar-copy {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  font-weight: 400;
}

.advisor-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.advisor-table-wrap table {
  min-width: 1080px;
}

.advisor-register-table tbody tr:hover {
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.advisor-register-table tbody tr.advisor-register-group-start td {
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, var(--surface));
}

.advisor-register-table tbody tr.advisor-register-row td:first-child {
  box-shadow: inset 3px 0 0 var(--advisor-row-accent, var(--c-azure));
  background: linear-gradient(90deg, var(--advisor-row-accent-bg, rgba(0, 120, 212, .06)) 0%, transparent 72%);
}

.advisor-register-rec {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.advisor-register-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--advisor-row-accent, var(--c-azure));
  margin-top: 5px;
  flex-shrink: 0;
}

.advisor-register-rec-copy {
  min-width: 0;
  flex: 1;
}

.advisor-entity-title {
  display: block;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.advisor-entity-sub {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.advisor-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.advisor-badge-info {
  background: var(--c-azure-bg);
  color: var(--c-azure);
}

.advisor-badge-high {
  background: rgba(220, 38, 38, .1);
  color: #b91c1c;
}

.advisor-badge-medium {
  background: rgba(217, 119, 6, .12);
  color: #b45309;
}

.advisor-badge-low {
  background: rgba(22, 163, 74, .1);
  color: #15803d;
}

.advisor-badge-shared {
  background: rgba(124, 58, 237, .1);
  color: #6d28d9;
}

.advisor-badge-unresolved {
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
}

.advisor-badge-linked {
  background: rgba(22, 163, 74, .1);
  color: #15803d;
}

.advisor-badge-open {
  background: rgba(59, 130, 246, .1);
  color: #2563eb;
}

.advisor-badge-accepted {
  background: rgba(14, 165, 233, .12);
  color: #0369a1;
}

.advisor-badge-progress {
  background: rgba(245, 158, 11, .13);
  color: #b45309;
}

.advisor-badge-completed {
  background: rgba(22, 163, 74, .12);
  color: #15803d;
}

.advisor-badge-dismissed {
  background: rgba(107, 114, 128, .16);
  color: #4b5563;
}

.advisor-badge-deferred {
  background: rgba(124, 58, 237, .12);
  color: #6d28d9;
}

.advisor-workflow-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}

.advisor-workflow-stat {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 94%, transparent), var(--surface));
}

.advisor-workflow-stat-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.advisor-workflow-stat strong {
  display: block;
  font-size: 14px;
  line-height: 1.1;
  color: var(--text);
}

.advisor-row-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
}

.advisor-row-toggle:hover {
  color: var(--c-azure);
}

.advisor-register-detail-row {
  display: none;
}

.advisor-register-detail-row.is-open {
  display: table-row;
}

.advisor-register-detail-row td {
  padding: 0 !important;
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
}

.advisor-register-detail {
  padding: 14px 16px;
  border-top: 1px dashed var(--border);
}

.advisor-detail-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.advisor-detail-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}

.advisor-detail-field input,
.advisor-detail-field select,
.advisor-detail-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}

.advisor-detail-readonly {
  justify-content: flex-end;
}

.advisor-detail-static {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.advisor-detail-notes {
  margin-top: 10px;
}

.advisor-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.advisor-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.advisor-detail-save {
  min-width: 132px;
}

.advisor-detail-error {
  font-size: 11px;
  color: #b91c1c;
}

.advisor-mix-footnote {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.advisor-trend-chart-shell {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
  padding: 12px;
}

[data-theme="dark"] .advisor-trend-chart-shell {
  background: linear-gradient(180deg, rgba(37, 40, 56, .82) 0%, rgba(31, 34, 49, .96) 100%);
}

.advisor-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.advisor-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.advisor-trend-chart {
  position: relative;
  height: 190px;
  border-radius: 10px;
  background:
    linear-gradient(to top, rgba(148, 163, 184, .11) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(to right, rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 48px 100%;
  overflow: hidden;
}

.advisor-trend-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.advisor-trend-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.advisor-trend-axis {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  padding: 0 4px 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.advisor-trend-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.advisor-trend-stat {
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.advisor-trend-stat-k {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.advisor-trend-stat-v {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.advisor-trend-stat-s {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
}

.advisor-driver-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.advisor-driver-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(120px, 1fr) 74px 88px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.advisor-driver-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.advisor-driver-sub {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.advisor-driver-bar {
  width: 100%;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.advisor-driver-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.advisor-driver-metric {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.advisor-empty-state {
  padding: 26px 12px;
  text-align: center;
  color: var(--text-muted);
}

/* ==========================================================================
   PHASE 4 SECTION: Optimization
   ========================================================================== */
.optimization-permission-warning {
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(217, 119, 6, .35);
  background: rgba(245, 158, 11, .08);
  color: var(--text);
}

.optimization-permission-warning-title {
  font-size: 15px;
  font-weight: 700;
}

.optimization-permission-warning-body,
.optimization-permission-warning-permission,
.optimization-permission-warning-meta {
  margin-top: 8px;
  color: var(--text-dim);
  line-height: 1.5;
}

.optimization-permission-warning-actions {
  margin: 10px 0 0 18px;
  color: var(--text-dim);
}

.optimization-permission-warning-actions li + li {
  margin-top: 4px;
}

.optimization-page {
  display: grid;
  gap: var(--ledger-section-gap);
  margin-top: 0;
}

.optimization-page.ledger-analytical-page {
  gap: 0;
}

.optimization-page.ledger-analytical-page > :is(section, .anl-box, .panel, .advisor-mix-grid, .optimization-detailed-recommendations) {
  margin-bottom: var(--ledger-section-gap);
}

.optimization-advisor-summary-warning {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
}

.optimization-header-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.optimization-kpi-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0;
}

.optimization-strategy-panel {
  margin-bottom: var(--ledger-section-gap);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.optimization-strategy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.optimization-strategy-badge {
  white-space: nowrap;
}

.optimization-strategy-total-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 16%, var(--border) 84%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-azure-bg) 52%, var(--surface) 48%) 0%, color-mix(in srgb, var(--surface-2) 86%, var(--surface) 14%) 100%);
}

.optimization-strategy-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.optimization-strategy-total {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--text);
}

.optimization-strategy-selected {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--c-azure);
}

.optimization-strategy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.optimization-strategy-meta span,
.optimization-strategy-compare-note {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent 26%);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent 20%);
  font-size: 11px;
  color: var(--text-dim);
}

.optimization-strategy-breakdown,
.optimization-strategy-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.optimization-strategy-alternatives-title {
  margin-bottom: -6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.optimization-strategy-breakdown-item,
.optimization-strategy-compare-tile {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, var(--surface-2) 14%) 0%, color-mix(in srgb, var(--surface-2) 92%, var(--surface) 8%) 100%);
}

.optimization-strategy-breakdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.optimization-strategy-breakdown-item span,
.optimization-strategy-compare-label {
  font-size: 12px;
  color: var(--text-dim);
}

.optimization-strategy-breakdown-item strong,
.optimization-strategy-compare-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.optimization-strategy-compare-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: .82;
}

.optimization-strategy-note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.consumption-plan-page {
  gap: 16px;
}

.consumption-plan-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.consumption-plan-header h1 {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 1.15;
  color: var(--text);
}

.consumption-plan-header p,
.consumption-plan-decision p,
.consumption-plan-step p {
  margin: 0;
  color: var(--text-muted);
}

.consumption-plan-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consumption-plan-pill-row span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
  background: color-mix(in srgb, var(--surface-2) 76%, transparent 24%);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}

.consumption-plan-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 14px;
}

.consumption-plan-decision,
.consumption-plan-readiness,
.consumption-plan-list-card {
  padding: 18px;
}

.consumption-plan-decision {
  border-color: color-mix(in srgb, var(--c-azure) 18%, var(--border) 82%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, var(--c-azure-bg) 18%) 0%, color-mix(in srgb, var(--surface-2) 88%, var(--surface) 12%) 100%);
}

.consumption-plan-decision-title {
  margin-top: 8px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--text);
}

.consumption-plan-decision-sub {
  margin: 6px 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-azure);
}

.consumption-plan-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.consumption-plan-metrics > div,
.consumption-plan-facts > div {
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-2) 14%);
}

.consumption-plan-metrics span,
.consumption-plan-facts span,
.consumption-plan-list span,
.consumption-plan-phase-grid span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.consumption-plan-metrics strong,
.consumption-plan-facts strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}

.consumption-plan-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.consumption-plan-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
}

.consumption-plan-step-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--c-azure);
  color: #fff;
  font-weight: 800;
}

.consumption-plan-step h3 {
  margin: 2px 0 8px;
  font-size: 16px;
  color: var(--text);
}

.consumption-plan-facts {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.consumption-plan-step-status {
  margin-top: 12px;
}

.consumption-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 14px;
}

.consumption-plan-table-wrap table {
  min-width: 760px;
}

.consumption-plan-table-wrap th,
.consumption-plan-table-wrap td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.consumption-plan-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
}

.consumption-plan-list > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
}

.consumption-plan-list > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.consumption-plan-list strong,
.consumption-plan-phase-grid strong {
  color: var(--text);
}

.consumption-plan-phase-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.consumption-plan-phase-grid > div {
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent 28%);
}

.consumption-plan-callout {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 22%, var(--border) 78%);
  background: color-mix(in srgb, var(--c-azure-bg) 44%, var(--surface) 56%);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}

.optimization-plan-kpi-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.optimization-plan-page {
  display: grid;
  gap: var(--ledger-section-gap, 18px);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.optimization-plan-grid,
.optimization-plan-whatif-grid {
  display: grid;
  gap: var(--ledger-card-grid-gap, 14px);
}

.optimization-plan-intro-grid,
.optimization-plan-whatif-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.optimization-plan-workbench-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}

.optimization-plan-section {
  min-width: 0;
  padding: 18px;
}

.optimization-plan-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.optimization-plan-eyebrow {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.optimization-plan-decision-card {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border) 78%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 84%, rgba(22,163,74,.10) 16%), var(--surface));
}

.optimization-plan-decision-card h2,
.optimization-plan-section h2 {
  margin: 8px 0;
  color: var(--text);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.optimization-plan-decision-card p,
.optimization-plan-section p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.optimization-plan-readiness-grid,
.optimization-plan-impact-grid,
.optimization-plan-whatif-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.optimization-plan-mini-metric,
.optimization-plan-impact,
.optimization-plan-whatif-metrics > div,
.optimization-plan-scope-metrics > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 76%, var(--surface) 24%);
}

.optimization-plan-mini-metric span,
.optimization-plan-impact span,
.optimization-plan-whatif-metrics span,
.optimization-plan-scope-metrics span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.optimization-plan-mini-metric strong,
.optimization-plan-impact strong,
.optimization-plan-whatif-metrics strong,
.optimization-plan-scope-metrics strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.optimization-plan-runtime-card {
  display: grid;
  gap: 12px;
}

.optimization-plan-runtime-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--border) 76%);
  border-radius: 14px;
  background: color-mix(in srgb, rgba(22,163,74,.08) 42%, var(--surface) 58%);
}

.optimization-plan-score-ring {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: conic-gradient(var(--green) 0 68%, var(--surface-3) 68% 100%);
  box-shadow: inset 0 0 0 10px var(--surface);
}

.optimization-plan-score-ring strong {
  color: var(--text);
  font-size: 20px;
}

.optimization-plan-runtime-score h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 17px;
}

.optimization-plan-runtime-score p {
  font-size: 12px;
  line-height: 1.4;
}

.optimization-plan-runtime-state {
  display: grid;
  gap: 5px;
  text-align: right;
}

.optimization-plan-runtime-state strong {
  color: var(--green);
  font-size: 13px;
}

.optimization-plan-runtime-state span {
  color: var(--text-muted);
  font-size: 11px;
}

.optimization-plan-runtime-matrix {
  display: grid;
  gap: 8px;
}

.optimization-plan-runtime-lane {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.optimization-plan-runtime-lane strong {
  display: block;
  color: var(--text);
  font-size: 12px;
}

.optimization-plan-runtime-lane span {
  color: var(--text-muted);
  font-size: 11px;
}

.optimization-plan-runtime-heat {
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--green) 0 12px, var(--green) 12px 18px, var(--surface-3) 18px 24px, var(--surface-3) 24px 30px);
}

.optimization-plan-runtime-heat.is-mixed {
  background: repeating-linear-gradient(90deg, var(--green) 0 8px, var(--surface-3) 8px 16px, var(--orange) 16px 20px, var(--surface-3) 20px 28px);
}

.optimization-plan-runtime-heat.is-low {
  background: repeating-linear-gradient(90deg, var(--surface-3) 0 10px, var(--green) 10px 14px, var(--surface-3) 14px 26px, var(--orange) 26px 30px);
}

.optimization-plan-runtime-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}

.optimization-plan-runtime-foot strong {
  color: var(--text);
}

.optimization-plan-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.optimization-plan-flow::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 7%;
  right: 7%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 42%, var(--surface-2) 58%), var(--green));
}

.optimization-plan-step {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  min-height: 230px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.optimization-plan-step-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.optimization-plan-step-arrow {
  position: absolute;
  z-index: 2;
  top: 25px;
  right: -17px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--border) 70%);
  border-radius: 999px;
  background: var(--surface);
  color: var(--green);
  font-weight: 800;
}

.optimization-plan-step h3,
.optimization-plan-advice-card h3,
.optimization-plan-rule-card h3 {
  margin: 14px 0 7px;
  color: var(--text);
  font-size: 17px;
}

.optimization-plan-step p,
.optimization-plan-advice-card p,
.optimization-plan-rule-card p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.optimization-plan-step-meta {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.optimization-plan-pill {
  display: inline-flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 28px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 750;
}

.optimization-plan-pill.is-good {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--green) 10%, var(--surface) 90%);
  color: var(--green);
}

.optimization-plan-pill.is-warn {
  border-color: color-mix(in srgb, var(--orange) 28%, var(--border) 72%);
  background: color-mix(in srgb, var(--orange) 10%, var(--surface) 90%);
  color: var(--orange);
}

.optimization-plan-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.optimization-plan-tabs button {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 750;
}

.optimization-plan-tabs button.active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.optimization-plan-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.optimization-plan-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.optimization-plan-table th,
.optimization-plan-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.optimization-plan-table th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.optimization-plan-table td {
  color: var(--text-dim);
  font-size: 12px;
}

.optimization-plan-table td strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.optimization-plan-table td span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
}

.optimization-plan-money,
.optimization-plan-advice-line strong.is-good,
.optimization-plan-whatif-metrics strong.is-good {
  color: var(--green);
  font-weight: 800;
}

.optimization-plan-status {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 10%, var(--surface) 90%);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}

.optimization-plan-status.is-review,
.optimization-plan-advice-line strong.is-warn,
.optimization-plan-whatif-metrics strong.is-warn {
  color: var(--orange);
}

.optimization-plan-status.is-review {
  background: color-mix(in srgb, var(--orange) 10%, var(--surface) 90%);
}

.optimization-plan-scope-list {
  display: grid;
  gap: 12px;
}

.optimization-plan-scope-card,
.optimization-plan-advice-card,
.optimization-plan-rule-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.optimization-plan-scope-top,
.optimization-plan-advice-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.optimization-plan-scope-top strong {
  color: var(--text);
}

.optimization-plan-scope-top span {
  color: var(--text-muted);
  font-size: 12px;
}

.optimization-plan-scope-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.optimization-plan-advice-grid,
.optimization-plan-rules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.optimization-plan-advice-line {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}

.optimization-plan-advice-line strong {
  color: var(--text);
}

.optimization-plan-slider {
  height: 10px;
  margin: 16px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green) 62%, var(--surface-3) 62%);
}

.optimization-plan-rule-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--border) 76%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 10%, var(--surface) 90%);
  color: var(--green);
  font-weight: 800;
}

.optimization-plan-note {
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 24%, var(--border) 76%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--c-azure-bg) 38%, var(--surface) 62%);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}

.optimization-plan-note strong {
  color: var(--text);
}

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

.optimization-lever-card {
  padding: 16px;
}

.optimization-lever-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.optimization-lever-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.optimization-lever-sub {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.optimization-lever-stat {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
}

.optimization-lever-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.optimization-lever-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
}

.optimization-lever-meta-row em {
  flex: 0 1 auto;
  max-width: 45%;
  font-style: normal;
  text-align: right;
  color: var(--text-muted);
}

.optimization-lever-track,
.optimization-coverage-track {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.optimization-lever-fill,
.optimization-coverage-fill {
  height: 100%;
  min-width: 0;
}

.optimization-lever-note,
.optimization-coverage-note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.optimization-actions-section {
  display: grid;
  gap: 14px;
}

.optimization-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.optimization-refund-capacity-card {
  margin-top: 16px;
  overflow: hidden;
}

.optimization-refund-capacity-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.optimization-refund-capacity-values > div {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.optimization-refund-capacity-values span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.optimization-refund-capacity-values strong {
  display: block;
  font-size: 18px;
  color: var(--text);
}

.optimization-refund-capacity-bar {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
  margin-top: 14px;
}

.optimization-refund-capacity-bar .used {
  background: var(--orange);
}

.optimization-refund-capacity-bar .remaining {
  background: var(--green);
}

.optimization-refund-capacity-card.is-over-capacity .optimization-refund-capacity-values > div:last-child strong {
  color: var(--red);
}

.optimization-refund-capacity-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 1px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--border);
}

.optimization-refund-capacity-compact > div {
  min-width: 0;
  padding: 8px 10px;
  background: var(--surface);
}

.optimization-refund-capacity-compact span {
  display: block;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.optimization-refund-capacity-compact strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optimization-refund-capacity-card.is-over-capacity .optimization-refund-capacity-compact > div:last-child strong {
  color: var(--red);
}

.optimization-refund-capacity-bar .modeled {
  background: var(--blue);
}

.optimization-refund-capacity-helper {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}

.optimization-refund-capacity-status {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 800;
}

.optimization-refund-capacity-status.is-success {
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .12);
  color: var(--green);
}

.optimization-refund-capacity-status.is-warning {
  border-color: rgba(245, 158, 11, .4);
  background: rgba(245, 158, 11, .14);
  color: var(--orange);
}

.optimization-refund-capacity-status.is-unknown {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}

.optimization-refund-tenant-selector {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  max-width: 360px;
}

.optimization-refund-tenant-selector span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.optimization-detailed-recommendations {
  display: grid;
  gap: 12px;
}

.optimization-detail-accordion {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.optimization-detail-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.optimization-detail-accordion > summary::-webkit-details-marker {
  display: none;
}

.optimization-detail-accordion > summary::before {
  content: "▸";
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12px;
  transform: translateY(1px);
}

.optimization-detail-accordion[open] > summary::before {
  content: "▾";
}

.optimization-detail-accordion > summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin-right: auto;
}

.optimization-detail-accordion > summary strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
}

.optimization-detail-accordion > summary small {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.optimization-detail-accordion > summary em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.optimization-detail-accordion-body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.optimization-detail-accordion-body > .panel {
  margin-bottom: 0;
}

.optimization-lever-body {
  display: grid;
  gap: 12px;
}

.optimization-detail-actionable {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.optimization-detail-actionable strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}

.optimization-detail-actionable span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.optimization-action-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.optimization-action-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.optimization-action-summary strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 750;
}

.optimization-page > .advisor-mix-grid {
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
  align-items: stretch;
}

.optimization-insight-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 8px;
  box-shadow: none;
}

.optimization-insight-panel .anl-bs {
  margin-bottom: 0;
}

.optimization-coverage-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}

.optimization-coverage-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.optimization-coverage-stat {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.optimization-coverage-stat-label {
  min-height: 28px;
  font-size: 9.5px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.optimization-coverage-stat-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.optimization-coverage-stat-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.optimization-coverage-stat-pct {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 750;
  color: var(--text-muted);
  white-space: nowrap;
}

.optimization-coverage-stat-sub {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-muted);
}

.optimization-coverage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
}

.optimization-coverage-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.optimization-coverage-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.optimization-lifecycle-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.optimization-lifecycle-grid .advisor-workflow-stat strong {
  font-size: 15px;
}

.optimization-lifecycle-grid .advisor-workflow-stat {
  padding: 8px 9px;
  border-radius: 8px;
  background: var(--surface-2);
}

.optimization-lifecycle-track {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.optimization-lifecycle-fill {
  height: 100%;
  min-width: 0;
}

.optimization-lifecycle-fill.lifecycle-open {
  background: #64748b;
}

.optimization-lifecycle-fill.lifecycle-active {
  background: #2563eb;
}

.optimization-lifecycle-fill.lifecycle-finished {
  background: #0f766e;
}

.optimization-lifecycle-subtext {
  display: grid;
  gap: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
}

.optimization-lifecycle-empty {
  padding: 9px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.optimization-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.optimization-table-wrap table {
  min-width: 980px;
}

.optimization-pipeline-row td:first-child {
  box-shadow: inset 3px 0 0 var(--optimization-row-accent, var(--c-azure));
  background: linear-gradient(90deg, var(--optimization-row-accent-bg, rgba(0, 120, 212, .06)) 0%, transparent 72%);
}

.optimization-pipeline-row:hover {
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.optimization-savings-plan-row {
  cursor: pointer;
}

.optimization-reservation-row {
  cursor: pointer;
}

.optimization-savings-plan-row.is-selected td {
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.optimization-savings-plan-detail-row td {
  padding: 0;
  background: var(--surface);
}

.optimization-savings-plan-detail {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.optimization-action-card-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.optimization-action-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.optimization-action-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.optimization-action-card:hover {
  border-color: color-mix(in srgb, var(--green) 32%, var(--border) 68%);
}

.optimization-action-card.is-expanded {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 5%, var(--surface) 95%);
}

.optimization-action-card.is-dimmed {
  opacity: .62;
}

.optimization-action-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.optimization-action-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.optimization-action-card-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.optimization-action-card-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.8;
}

.optimization-action-card-name {
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.optimization-action-card-desc {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.optimization-action-card-meta {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.optimization-action-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 2px 0;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.optimization-action-stat {
  display: flex;
  flex: 1 1 112px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.optimization-action-stat-label {
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.35;
  text-transform: uppercase;
}

.optimization-confidence-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.optimization-confidence-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: none;
  cursor: help;
}

.optimization-confidence-info:focus-visible {
  outline: 2px solid var(--c-azure);
  outline-offset: 2px;
}

.optimization-action-stat span:not(.optimization-action-stat-label):not(.optimization-confidence-info),
.optimization-action-stat .amount,
.optimization-action-stat .amount-dash {
  margin-bottom: 0;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
}

.optimization-action-stat-highlight {
  color: var(--c-azure) !important;
  font-weight: 750 !important;
}

.optimization-action-stat-risk span:not(.optimization-action-stat-label) {
  color: var(--orange);
}

.optimization-action-stat-risk-low span:not(.optimization-action-stat-label) {
  color: var(--green);
}

.optimization-action-stat-risk-high span:not(.optimization-action-stat-label) {
  color: #dc2626;
}

.optimization-action-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.optimization-action-card-actions .rfb {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.optimization-action-card-actions .rfb:hover {
  background: color-mix(in srgb, var(--green) 84%, #000 16%);
  border-color: color-mix(in srgb, var(--green) 84%, #000 16%);
}

.optimization-action-card-expansion {
  display: grid;
  gap: 14px;
  margin-top: 2px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  opacity: 1;
  transform: translateY(0);
  max-height: none;
  overflow: visible;
  transition: opacity .18s ease, transform .18s ease;
}

.optimization-action-grid-expansion {
  grid-column: 1 / -1;
  min-width: 0;
  cursor: default;
  animation: optimizationExpansionIn .18s ease both;
}

@media (max-width: 1120px) {
  .optimization-action-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .optimization-action-card-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes optimizationExpansionIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.optimization-expanded-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.optimization-detail-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.optimization-detail-card strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.optimization-detail-card span {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}

.optimization-confidence-reasons {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.optimization-what-if-analysis {
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.optimization-what-if-analysis > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.optimization-what-if-analysis > summary strong {
  color: var(--text);
  font-size: 13px;
}

.optimization-what-if-analysis > summary span {
  color: var(--text-muted);
  font-size: 11px;
}

.optimization-what-if-note {
  padding: 0 14px 10px;
  color: var(--text-muted);
  font-size: 12px;
}

.optimization-what-if-refund-summary {
  padding: 0 14px 10px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  white-space: normal;
}

.optimization-what-if-wrap,
.what-if-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--border);
  border-radius: 0;
  -webkit-overflow-scrolling: touch;
}

table.reco.optimization-what-if-table {
  width: 100%;
  min-width: 0;
  max-width: none;
  table-layout: fixed;
  font-size: 12px;
  border-collapse: collapse;
}

table.reco.optimization-what-if-table th,
table.reco.optimization-what-if-table td {
  padding: 6px 8px;
  line-height: 1.3;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

table.reco.optimization-what-if-table thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 700;
  text-align: right;
  vertical-align: bottom;
}

table.reco.optimization-what-if-table thead th:first-child {
  text-align: left;
}

table.reco.optimization-what-if-table tbody th {
  position: sticky;
  left: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  z-index: 1;
}

table.reco.optimization-what-if-table tbody td {
  color: var(--text-dim);
  font-size: 10.5px;
  text-align: right;
  white-space: nowrap;
}

table.reco.optimization-what-if-table th:first-child,
table.reco.optimization-what-if-table td:first-child {
  text-align: left;
}

@media (max-width: 780px) {
  table.reco.optimization-what-if-table {
    min-width: 680px;
  }
}

@media (max-width: 980px) {
  .optimization-refund-capacity-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.optimization-confidence-reasons strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.optimization-confidence-reasons ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.optimization-confidence-reasons li {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
}

.optimization-card-detail-table {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.optimization-resource-id-detail {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10.5px;
}

.optimization-resource-id-detail summary {
  cursor: pointer;
  width: fit-content;
}

.optimization-resource-id-detail span {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

.optimization-copyable-detail {
  user-select: all;
  cursor: copy;
}

.optimization-savings-plan-panel.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: none;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.panel-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.panel-sub {
  max-width: 620px;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.panel-right {
  text-align: right;
}

.optimization-panel-tools {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.optimization-view-selector {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.optimization-view-controls-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.optimization-view-label {
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.optimization-view-toggle {
  width: fit-content;
  max-width: 100%;
}

.optimization-view-toggle .costx-quick-btn.active {
  background: rgba(22, 163, 74, .08);
  color: var(--green);
}

.panel-right-val {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.panel-right-lbl {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.optimization-current-risk-panel .panel-head {
  position: relative;
  margin-bottom: 16px;
}

.optimization-risk-info-wrap {
  position: relative;
}

.optimization-risk-info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.optimization-risk-info-trigger > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.optimization-risk-info-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 12;
  width: min(420px, calc(100vw - 48px));
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
  text-align: left;
  animation: optimization-risk-popover-in .16s ease-out;
}

.optimization-risk-info-title {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.optimization-risk-info-copy,
.optimization-risk-info-copy li {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
}

.optimization-risk-info-copy p {
  margin: 0 0 8px;
}

.optimization-risk-info-copy ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.optimization-risk-policy-notes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.optimization-risk-summary-strip {
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.optimization-current-risk-panel .optimization-risk-summary-strip .executivev2-kpi-card {
  min-height: 82px;
  padding: 11px 13px;
  border-color: var(--border);
}

.optimization-current-risk-panel .optimization-risk-summary-strip .anl-card-lbl {
  margin-bottom: 5px;
  font-size: 9.5px;
  line-height: 1.2;
}

.optimization-current-risk-panel .optimization-risk-summary-strip .anl-card-val {
  margin-bottom: 3px;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.05;
}

.optimization-current-risk-panel .optimization-risk-summary-strip .anl-card-sub {
  font-size: 10.5px;
  line-height: 1.3;
}

.optimization-risk-card-grid {
  display: grid;
  gap: 10px;
}

.optimization-risk-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.optimization-risk-item.is-expanded {
  border-color: color-mix(in srgb, var(--green) 32%, var(--border) 68%);
}

.optimization-risk-item-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(92px, .34fr) minmax(150px, .52fr) auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.optimization-risk-item-summary:hover {
  background: color-mix(in srgb, var(--green) 4%, var(--surface) 96%);
}

.optimization-risk-item-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.optimization-risk-summary-metric {
  display: grid;
  gap: 3px;
}

.optimization-risk-summary-metric span {
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.optimization-risk-summary-metric strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.optimization-risk-detail-toggle {
  justify-self: end;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.optimization-risk-item-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 0 16px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  animation: optimization-risk-detail-in .2s ease-out;
}

.optimization-risk-detail-group {
  padding: 13px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.optimization-risk-detail-group h4 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.optimization-risk-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.optimization-risk-detail-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.optimization-risk-detail-cell span {
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.optimization-risk-detail-cell strong {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.optimization-risk-card-reason {
  grid-column: 1 / -1;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--orange) 22%, var(--border) 78%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--orange) 7%, var(--surface) 93%);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
}

@keyframes optimization-risk-detail-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes optimization-risk-popover-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sp-summary-row {
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 10px;
  border-radius: 10px;
}

.sp-summary-row.reservation-summary-row {
  grid-template-columns: minmax(220px, 1.35fr) repeat(5, minmax(0, 1fr));
}

.executivev2-kpi-row .sp-summary-tile {
  min-height: 64px;
  max-height: 72px;
  padding: 8px 12px 7px;
}

.executivev2-kpi-row .sp-summary-tile-recommended .anl-card-val {
  color: var(--green);
}

.executivev2-kpi-row .sp-summary-tile .anl-card-lbl {
  margin-bottom: 3px;
  font-size: 9.5px;
  line-height: 1.15;
  letter-spacing: .07em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.executivev2-kpi-row .sp-summary-tile .anl-card-val {
  margin-bottom: 2px;
  font-size: 16px;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.executivev2-kpi-row .sp-summary-tile .anl-card-sub {
  font-size: 10.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1180px) {
  .sp-summary-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sp-summary-row.reservation-summary-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .executivev2-kpi-row .sp-summary-tile {
    border-bottom: 1px solid var(--border);
  }

  .executivev2-kpi-row .sp-summary-tile:nth-child(3n) {
    border-right: none;
  }

  .executivev2-kpi-row .sp-summary-tile:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 980px) {
  .optimization-risk-item-summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .optimization-risk-summary-metric {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  .optimization-risk-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .optimization-risk-detail-toggle {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .optimization-risk-item-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .optimization-current-risk-head {
    flex-direction: column;
  }

  .optimization-risk-info-wrap,
  .optimization-risk-info-trigger {
    width: 34px;
  }

  .optimization-risk-info-panel {
    right: 0;
    left: auto;
    width: min(420px, calc(100vw - 48px));
  }

  .optimization-risk-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.reco-wrap {
  overflow-x: auto;
}

.optimization-savings-plan-wrap {
  overflow-x: hidden;
}

table.reco {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font-size: 12px;
}

table.optimization-savings-plan-table,
table.optimization-contributors-table {
  table-layout: fixed;
  min-width: 0;
}

table.optimization-savings-plan-table .sp-option-col {
  width: 13%;
}

table.optimization-savings-plan-table .sp-workload-col {
  width: 22%;
}

table.optimization-savings-plan-table .sp-commit-col {
  width: 11%;
}

table.optimization-savings-plan-table .sp-savings-col {
  width: 10%;
}

table.optimization-savings-plan-table .sp-util-col {
  width: 8%;
}

table.optimization-savings-plan-table .sp-reason-col {
  width: 26%;
}

table.reco thead th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}

table.reco tbody td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.5;
  vertical-align: top;
}

table.optimization-savings-plan-table tbody td,
table.optimization-contributors-table tbody td {
  padding: 10px 8px;
}

table.optimization-savings-plan-table th,
table.optimization-savings-plan-table td,
table.optimization-contributors-table th,
table.optimization-contributors-table td {
  overflow-wrap: normal;
  word-break: normal;
}

table.optimization-contributors-table {
  font-size: 11px;
}

table.optimization-contributors-table th,
table.optimization-contributors-table td {
  white-space: normal;
}

table.reco tbody tr:last-child td {
  border-bottom: 0;
}

table.reco tbody tr:hover td {
  background: var(--surface-2);
}

.sku-name {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sku-path {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sku-usage,
.amount-note,
.reco-sub,
.conf {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.amount {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.amount-dash {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 300;
}

.reco-tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 5px 10px;
  border: 1px solid rgba(22, 163, 74, .20);
  border-radius: 999px;
  background: rgba(22, 163, 74, .10);
  color: var(--green);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.reco-tag.y1 {
  border-color: rgba(0, 120, 212, .20);
  background: var(--c-azure-bg);
  color: var(--c-azure);
}

.reco-tag.no {
  border-color: var(--border);
  background: var(--surface-3);
  color: var(--text-muted);
}

.reco-tag.unavail {
  border-color: rgba(217, 119, 6, .20);
  background: rgba(217, 119, 6, .10);
  color: var(--orange);
}

.reco-tag.contract-risk {
  margin-left: 6px;
}

.reco-tag.contract-risk-low {
  border-color: rgba(22, 163, 74, .20);
  background: rgba(22, 163, 74, .10);
  color: var(--green);
}

.reco-tag.contract-risk-medium,
.reco-tag.contract-risk-review_required {
  border-color: rgba(217, 119, 6, .24);
  background: rgba(217, 119, 6, .11);
  color: var(--orange);
}

.reco-tag.contract-risk-high,
.reco-tag.contract-risk-blocked {
  border-color: rgba(220, 38, 38, .24);
  background: rgba(220, 38, 38, .11);
  color: #dc2626;
}

.optimization-contract-warning {
  margin-top: 8px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
}

.optimization-contract-warning.is-high-exposure {
  color: #dc2626;
}

.reason {
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.conf {
  display: block;
  margin-top: 6px;
}

.conf .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--orange);
  vertical-align: middle;
}

.conf.low .dot {
  background: #fbbf24;
}

.conf.med .dot {
  background: var(--orange);
}

.conf.high .dot {
  background: var(--green);
}

.optimization-action-btn {
  min-width: 88px;
}

.optimization-neutral {
  color: var(--text-muted);
}

@media (max-width: 1180px) {
  .optimization-kpi-row,
  .optimization-plan-kpi-row,
  .optimization-lever-grid,
  .optimization-strategy-breakdown,
  .optimization-strategy-compare,
  .optimization-action-summary-grid,
  .optimization-header-bar,
  .consumption-plan-timeline,
  .consumption-plan-phase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-summary-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sp-summary-row.reservation-summary-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .optimization-coverage-grid,
  .optimization-plan-intro-grid,
  .optimization-plan-workbench-grid,
  .optimization-plan-whatif-grid,
  .optimization-page > .advisor-mix-grid,
  .consumption-plan-summary-grid,
  .consumption-plan-grid {
    grid-template-columns: 1fr;
  }

  .optimization-coverage-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .advisor-workflow-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .optimization-strategy-head,
  .optimization-strategy-total-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .optimization-strategy-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .optimization-kpi-row,
  .optimization-plan-kpi-row,
  .optimization-lever-grid,
  .optimization-strategy-breakdown,
  .optimization-strategy-compare,
  .optimization-header-bar,
  .optimization-action-summary-grid,
  .optimization-plan-flow,
  .optimization-plan-advice-grid,
  .optimization-plan-rules-grid,
  .optimization-plan-readiness-grid,
  .optimization-plan-impact-grid,
  .optimization-plan-whatif-metrics,
  .optimization-plan-scope-metrics,
  .sp-summary-row,
  .optimization-lifecycle-grid,
  .optimization-coverage-stats,
  .optimization-page > .advisor-mix-grid,
  .advisor-workflow-strip,
  .advisor-detail-grid,
  .consumption-plan-timeline,
  .consumption-plan-phase-grid,
  .consumption-plan-metrics {
    grid-template-columns: 1fr;
  }

  .advisor-detail-actions,
  .advisor-detail-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .panel-head,
  .optimization-panel-tools {
    align-items: flex-start;
    flex-direction: column;
  }

  .optimization-view-selector {
    justify-items: start;
  }

  .optimization-view-controls-row {
    flex-direction: column;
    align-items: stretch;
  }

  .optimization-plan-flow::before,
  .optimization-plan-step-arrow {
    display: none;
  }

  .optimization-plan-runtime-score,
  .optimization-plan-runtime-lane {
    grid-template-columns: 1fr;
  }

  .optimization-plan-runtime-state,
  .optimization-plan-scope-top,
  .optimization-plan-advice-line,
  .optimization-plan-runtime-foot {
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
  }
}

.computeconsumption-history-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.computeconsumption-history-chart-shell {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, transparent), var(--surface));
  overflow: hidden;
}

.computeconsumption-history-chart-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 10px 6px;
}

.computeconsumption-history-chart {
  display: block;
  min-width: 640px;
}

.computeconsumption-history-grid line {
  stroke: color-mix(in srgb, var(--border) 75%, transparent);
  stroke-width: 1;
}

.computeconsumption-history-grid text,
.computeconsumption-history-labels text {
  fill: var(--text-muted);
  font-size: 10px;
}

.computeconsumption-history-area {
  fill: color-mix(in srgb, var(--c-azure) 14%, transparent);
}

.computeconsumption-history-line {
  fill: none;
  stroke: var(--c-azure);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.computeconsumption-history-point {
  fill: var(--surface);
  stroke: var(--c-azure);
  stroke-width: 2;
}

.computeconsumption-history-point.is-mtd {
  fill: color-mix(in srgb, var(--c-azure) 18%, var(--surface));
}

.computeconsumption-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.computeconsumption-history-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.computeconsumption-history-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.computeconsumption-history-item-label {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.computeconsumption-history-item-value {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.computeconsumption-history-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.computeconsumption-history-status.is-mtd {
  border-color: color-mix(in srgb, var(--c-azure) 30%, var(--border));
  color: color-mix(in srgb, var(--c-azure) 70%, var(--text));
}

.computeconsumption-history-bar {
  width: 100%;
  height: 8px;
  background: color-mix(in srgb, var(--surface-3) 82%, transparent);
  border-radius: 999px;
  overflow: hidden;
}

.computeconsumption-history-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-azure) 88%, white 12%), color-mix(in srgb, var(--c-azure) 58%, white 42%));
}

.computeconsumption-history-bar-fill.is-mtd {
  opacity: .7;
}

@media (max-width: 900px) {
  .computeconsumption-mtd-banner,
  .computeconsumption-kpi-row,
  .computeconsumption-insights-grid,
  .computeconsumption-secondary-grid,
  .computeconsumption-state-grid {
    grid-template-columns: 1fr;
  }

  .computeconsumption-table-head {
    flex-direction: column;
    align-items: stretch;
  }

  .cc-donut-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .cc-bar-label {
    width: 90px;
  }

  .advisor-overview-grid,
  .advisor-mix-grid {
    grid-template-columns: 1fr;
  }

  .advisor-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advisor-kpi-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .advisor-trend-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .advisor-driver-row {
    grid-template-columns: minmax(0, 1fr) minmax(110px, 1fr) 70px 80px;
  }
}

@media (max-width: 640px) {
  .computeconsumption-mtd-banner {
    padding: 14px;
  }

  .computeconsumption-mtd-stats {
    grid-template-columns: 1fr;
  }

  .computeconsumption-history-item-head {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .computeconsumption-history-item-value,
  .computeconsumption-history-status {
    justify-self: flex-start;
  }

  .advisor-summary-strip,
  .advisor-kpi-row,
  .advisor-filterbar {
    grid-template-columns: 1fr;
  }

  .advisor-trend-stats,
  .advisor-driver-row {
    grid-template-columns: 1fr;
  }
}

.tagcat-shell {
  padding-bottom: 32px;
}

.tagcat-page {
  min-height: 200px;
  display: grid;
  gap: 16px;
}

.tagcat-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--surface-2) 12%), color-mix(in srgb, var(--surface) 94%, var(--surface-2) 6%));
}

.tagcat-context-label,
.tagcat-metric-label,
.tagcat-insight-label,
.tagcat-hint,
.tagcat-selected-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tagcat-context-label,
.tagcat-metric-label,
.tagcat-hint,
.tagcat-selected-kicker {
  color: var(--text-muted);
}

.tagcat-context-links,
.tagcat-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tagcat-context-chip,
.tagcat-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.tagcat-context-chip {
  min-height: 36px;
  padding: 0 14px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.tagcat-context-chip:hover {
  border-color: rgba(22, 163, 74, .3);
  color: var(--green);
  background: #F7FAF6;
}

.tagcat-context-chip.is-active {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border) 76%);
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, var(--surface) 90%);
}

.tagcat-summary-strip,
.tagcat-kpi-row {
  margin-bottom: 0;
}

.tagcat-filters {
  margin-bottom: 0;
}

.tagcat-filter-grow {
  flex: 1;
  min-width: 280px;
}

.tagcat-workspace {
  display: grid;
  gap: 16px;
}

.tagcat-workspace {
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .95fr);
}

.tagcat-panel,
.tagcat-support-card {
  padding: 18px;
}

.tagcat-side-panel {
  position: sticky;
  top: 84px;
  align-self: start;
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.tagcat-side-panel-head,
.tagcat-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tagcat-side-panel-section {
  display: grid;
  gap: 10px;
}

.tagcat-key-list,
.tagcat-insight-list,
.tagcat-mini-list {
  display: grid;
  gap: 12px;
}

.tagcat-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .78fr) minmax(0, .82fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--surface-2) 12%), color-mix(in srgb, var(--surface) 96%, var(--surface-2) 4%));
}

.tagcat-key-row.is-active {
  border-color: color-mix(in srgb, var(--c-azure) 32%, var(--border) 68%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-azure) 18%, transparent 82%);
}

.tagcat-key-title {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}

.tagcat-key-copy,
.tagcat-insight-copy,
.tagcat-selected-copy {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.tagcat-key-copy {
  margin-bottom: 10px;
}

.tagcat-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
}

.tagcat-pill.tone-green {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 18%, var(--border) 82%);
  background: color-mix(in srgb, var(--green) 10%, var(--surface) 90%);
}

.tagcat-pill.tone-blue {
  color: var(--c-azure);
  border-color: color-mix(in srgb, var(--c-azure) 18%, var(--border) 82%);
  background: color-mix(in srgb, var(--c-azure-bg) 58%, var(--surface) 42%);
}

.tagcat-pill.tone-orange {
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 18%, var(--border) 82%);
  background: color-mix(in srgb, var(--orange) 10%, var(--surface) 90%);
}

.tagcat-pill.tone-red {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 18%, var(--border) 82%);
  background: color-mix(in srgb, var(--red) 10%, var(--surface) 90%);
}

.tagcat-pill.tone-purple {
  color: #6d3bdd;
  border-color: color-mix(in srgb, #6d3bdd 18%, var(--border) 82%);
  background: color-mix(in srgb, #6d3bdd 10%, var(--surface) 90%);
}

.tagcat-metric-block,
.tagcat-selected-stat,
.tagcat-insight,
.tagcat-mini-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.tagcat-metric-block {
  min-height: 88px;
  padding: 12px;
  border-left-width: 3px;
}

.tagcat-metric-block.tone-green {
  border-left-color: var(--green);
}

.tagcat-metric-block.tone-blue {
  border-left-color: var(--c-azure);
}

.tagcat-metric-block.tone-orange {
  border-left-color: var(--orange);
}

.tagcat-metric-block.tone-red {
  border-left-color: var(--red);
}

.tagcat-metric-value {
  margin-bottom: 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}

.tagcat-metric-copy {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.tagcat-row-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.tagcat-insight {
  padding: 14px;
  border-left-width: 3px;
}

.tagcat-insight.tone-blue {
  border-left-color: var(--c-azure);
}

.tagcat-insight.tone-green {
  border-left-color: var(--green);
}

.tagcat-insight.tone-orange {
  border-left-color: var(--orange);
}

.tagcat-insight.tone-red {
  border-left-color: var(--red);
}

.tagcat-insight-label.tone-blue,
.tagcat-insight.tone-blue .tagcat-insight-label {
  color: var(--c-azure);
}

.tagcat-insight.tone-green .tagcat-insight-label {
  color: var(--green);
}

.tagcat-insight.tone-orange .tagcat-insight-label {
  color: var(--orange);
}

.tagcat-insight.tone-red .tagcat-insight-label {
  color: var(--red);
}

.tagcat-selected-card {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--c-azure) 18%, var(--border) 82%);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-azure-bg) 44%, var(--surface) 56%), color-mix(in srgb, var(--surface) 96%, var(--c-azure-bg) 4%));
}

.tagcat-selected-title {
  margin: 6px 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}

.tagcat-selected-top,
.tagcat-conflict-head,
.tagcat-conflict-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tagcat-selected-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.tagcat-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.tagcat-selected-stat {
  padding: 12px;
}

.tagcat-selected-stat span {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tagcat-selected-stat strong {
  font-size: 13px;
  color: var(--text);
}

.tagcat-mini-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 12px;
}

.tagcat-mini-item strong {
  font-size: 13px;
  color: var(--text);
}

.tagcat-mini-copy {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.tagcat-conflict-workbench,
.tagcat-mapping-workflow {
  display: grid;
  gap: 14px;
}

.tagcat-conflict-workbench.is-compact .tagcat-conflict-list {
  gap: 8px;
}

.tagcat-conflict-list,
.tagcat-detail-list,
.tagcat-draft-list {
  display: grid;
  gap: 10px;
}

.tagcat-conflict-card,
.tagcat-detail-card,
.tagcat-detail-section,
.tagcat-detail-list-item,
.tagcat-mapping-preview {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.tagcat-conflict-card {
  padding: 14px;
  border-left-width: 3px;
}

.tagcat-conflict-card.tone-red {
  border-left-color: var(--red);
}

.tagcat-conflict-card.tone-orange {
  border-left-color: var(--orange);
}

.tagcat-conflict-title,
.tagcat-detail-list-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.tagcat-conflict-empty,
.tagcat-form-message {
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 80%, var(--surface) 20%);
  color: var(--text-muted);
  font-size: 13px;
}

.tagcat-form-message {
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--border) 76%);
  color: var(--green);
}

.tagcat-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tagcat-panel-cta {
  justify-self: start;
}

.tagcat-detail-card,
.tagcat-detail-section {
  padding: 14px;
}

.tagcat-detail-card span,
.tagcat-detail-section strong {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tagcat-detail-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--text);
}

.tagcat-detail-sections {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.tagcat-detail-list-item {
  padding: 12px;
}

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

.tagcat-textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
}

.tagcat-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
}

.tagcat-overlay-drawer {
  place-items: stretch end;
  padding: 0;
}

.tagcat-overlay-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(5, 10, 20, .52);
  cursor: pointer;
}

.tagcat-modal,
.tagcat-drawer {
  position: relative;
  z-index: 1;
  width: min(860px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.tagcat-drawer {
  width: min(760px, 92vw);
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  padding: 24px;
  background: var(--surface);
}

.tagcat-modal {
  padding: 22px;
}

.tagcat-overlay-close {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 1180px) {
  .tagcat-workspace,
  .tagcat-selected-grid,
  .tagcat-detail-grid,
  .tagcat-form-grid {
    grid-template-columns: 1fr;
  }

  .tagcat-side-panel {
    position: static;
    max-height: none;
  }

  .tagcat-key-row {
    grid-template-columns: 1fr;
  }

  .tagcat-row-actions {
    justify-items: start;
    grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  }
}

@media (max-width: 760px) {
  .tagcat-overlay {
    padding: 12px;
  }

  .tagcat-modal,
  .tagcat-drawer {
    width: 100%;
    max-height: calc(100vh - 24px);
  }

  .tagcat-drawer {
    padding: 16px;
  }
}

.auth-app-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.auth-app-page-head-copy {
  max-width: 760px;
}

.auth-app-page-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 6px;
}

.auth-app-page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.auth-app-page-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
  max-width: 720px;
  line-height: 1.6;
}

.auth-app-page-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.auth-app-page-control {
  min-width: 220px;
}

.auth-app-page-control label,
.auth-app-form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.auth-app-info-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(0, 120, 212, 0.22);
  background: rgba(0, 120, 212, 0.08);
  border-radius: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}

.auth-app-main-grid,
.auth-app-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.auth-app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.auth-app-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.auth-app-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.auth-app-card-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

.auth-app-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}

.auth-app-kpi-cell {
  position: relative;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
}

.auth-app-kpi-cell:last-child {
  border-right: none;
}

.auth-app-kpi-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.auth-app-kpi-cell[data-tone="good"]::before {
  background: #16a34a;
}

.auth-app-kpi-cell[data-tone="warn"]::before {
  background: #d97706;
}

/* ==========================================================================
   PHASE 4 SECTION: Admin
   ========================================================================== */
.auth-app-kpi-cell[data-tone="danger"]::before {
  background: #dc2626;
}

.auth-app-kpi-cell[data-tone="accent"]::before {
  background: #0891b2;
}

.auth-app-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.auth-app-kpi-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.auth-app-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.auth-app-kpi-sub {
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
}

.auth-app-kpi-status,
.auth-app-status-pill,
.auth-app-inline-badge,
.auth-app-readiness-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-app-kpi-status.ok,
.auth-app-status-pill.ok,
.auth-app-inline-badge.ok,
.auth-app-readiness-badge.ok {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.auth-app-kpi-status.warn,
.auth-app-status-pill.warn,
.auth-app-inline-badge.warn,
.auth-app-readiness-badge.warn {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.auth-app-kpi-status.danger,
.auth-app-status-pill.danger,
.auth-app-inline-badge.danger,
.auth-app-readiness-badge.danger {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.auth-app-kpi-status.info,
.auth-app-status-pill.info,
.auth-app-inline-badge.info,
.auth-app-readiness-badge.info {
  background: rgba(0, 120, 212, 0.1);
  color: #0369a1;
}

.auth-app-table-wrap,
.auth-app-readiness-list,
.auth-app-detail-sections {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.auth-app-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.auth-app-table-wrap th,
.auth-app-table-wrap td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.auth-app-table-wrap tbody tr:last-child td,
.auth-app-readiness-item:last-child,
.auth-app-detail-section:last-child {
  border-bottom: none;
}

.auth-app-table-wrap tbody tr.is-selected td {
  background: rgba(0, 120, 212, 0.06);
}

.auth-app-table-wrap tbody tr:hover td {
  background: var(--surface-2);
}

.auth-app-registration-name {
  font-weight: 700;
  color: var(--text);
}

.auth-app-registration-sub {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
}

.auth-app-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.auth-app-action-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.auth-app-action-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.auth-app-action-btn.danger:hover {
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}

.auth-app-readiness-item,
.auth-app-detail-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.auth-app-readiness-top,
.auth-app-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.auth-app-readiness-title,
.auth-app-detail-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.auth-app-readiness-copy,
.auth-app-detail-copy {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

.auth-app-detail-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.auth-app-detail-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.auth-app-detail-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

.auth-app-detail-value {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}

.auth-app-detail-value code {
  font-size: 11px;
}

.auth-app-link-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.auth-app-link-row .rfb,
.auth-app-link-row a {
  text-decoration: none;
}

.auth-app-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.auth-app-form-field-span-2 {
  grid-column: 1 / -1;
}

.auth-app-textarea {
  min-height: 94px;
  resize: vertical;
  padding-top: 10px;
  padding-bottom: 10px;
}

.auth-app-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.auth-app-form-footer-note {
  max-width: 560px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.auth-app-form-footer-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 1200px) {
  .auth-app-kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 980px) {
  .auth-app-main-grid,
  .auth-app-detail-grid,
  .auth-app-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .auth-app-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .auth-app-detail-grid-2 {
    grid-template-columns: 1fr;
  }
}

.streamone-admin-page {
  width: min(100%, 1320px);
  max-width: 1320px;
  margin: 0 auto;
  min-width: 0;
}

.streamone-control-card {
  margin-bottom: 14px;
  overflow: visible;
}

.streamone-control-bar {
  align-items: flex-end;
  gap: 16px;
  padding-top: 0;
}

.streamone-header-controls {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}

.streamone-import-status {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.streamone-mapping-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.streamone-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.streamone-kpi {
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid var(--border);
}

.streamone-kpi:last-child {
  border-right: 0;
}

.streamone-kpi-label,
.streamone-status-strip span,
.streamone-detail-section h4 {
  margin: 0;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.streamone-kpi-value {
  margin-top: 5px;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.streamone-kpi-sub {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.streamone-status-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.streamone-status-strip > div {
  min-width: 0;
  padding: 11px 14px;
  border-right: 1px solid var(--border);
}

.streamone-status-strip > div:last-child {
  border-right: 0;
}

.streamone-status-strip strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.streamone-warning {
  margin: 0;
}

.streamone-debug {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.streamone-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 14px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.streamone-hierarchy-panel {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.streamone-panel {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.streamone-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

.streamone-panel-head strong {
  color: var(--text);
  font-size: 13px;
}

.streamone-panel-head span {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.streamone-tree {
  max-height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  min-width: 0;
  max-width: 100%;
}

.streamone-tree-customer {
  margin: 0 0 6px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.streamone-tree-row {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: hidden;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.streamone-tree-row:hover {
  background: var(--surface-2);
}

.streamone-tree-row.selected {
  background: var(--c-azure-bg);
  box-shadow: inset 3px 0 0 var(--c-azure);
}

.streamone-entitlement-row {
  padding-left: 16px;
}

.streamone-tree-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.streamone-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.streamone-tree-main strong {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.streamone-id {
  color: var(--text-muted);
  font-size: 10.5px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

.streamone-summary {
  display: block;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.streamone-tree-stat,
.streamone-tree-money {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.streamone-tree-stat {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.streamone-tree-money {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.streamone-tree-children {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  margin-left: 16px;
  padding: 3px 0 6px 14px;
  border-left: 1px solid var(--border);
}

.streamone-caret {
  flex: 0 0 auto;
  width: 12px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  text-align: center;
  transition: transform .16s ease;
}

.streamone-customer-row[aria-expanded="true"] .streamone-caret {
  transform: rotate(90deg);
}

.streamone-caret-leaf {
  visibility: hidden;
}

.streamone-detail-panel {
  position: sticky;
  top: 96px;
}

.streamone-detail-slot {
  min-width: 0;
  max-width: 100%;
}

.streamone-detail-head,
.streamone-detail-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.streamone-detail-section:last-child {
  border-bottom: 0;
}

.streamone-detail-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.streamone-detail-head span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.streamone-detail-head strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.streamone-detail-head code {
  color: var(--text-muted);
  font-size: 11px;
  white-space: normal;
  word-break: break-word;
}

.streamone-current-map {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(22,163,74,.18);
  border-radius: 8px;
  background: rgba(22,163,74,.08);
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.streamone-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}

.streamone-field span {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
}

.streamone-field select,
.streamone-field input {
  width: 100%;
}

.streamone-action-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.streamone-action-row .rfb {
  flex: 1;
}

.streamone-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.streamone-stat-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.streamone-stat-grid span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.streamone-stat-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.streamone-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(90px, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin-top: 9px;
}

.streamone-bar-row span {
  min-width: 0;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.streamone-bar-row div {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.streamone-bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-azure);
}

.streamone-bar-row strong {
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.streamone-note {
  margin-top: 10px;
  color: var(--orange);
  font-size: 11px;
  line-height: 1.5;
}

.streamone-empty {
  padding: 12px;
  color: var(--text-muted);
  font-size: 12px;
}

.streamone-product-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 360px;
  overflow-x: auto;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.streamone-product-table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}

.streamone-product-table th,
.streamone-product-table td {
  white-space: nowrap;
}

.streamone-product-name,
.streamone-product-sku {
  display: inline-block;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  vertical-align: bottom;
}

.streamone-product-sku {
  max-width: none;
  color: var(--text-dim);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.streamone-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.streamone-chip-azure {
  color: var(--c-azure);
  background: var(--c-azure-bg);
}

.streamone-chip-license {
  color: #7c3aed;
  background: rgba(124,58,237,.12);
}

.streamone-chip-reservation {
  color: var(--orange);
  background: rgba(217,119,6,.12);
}

.streamone-chip-neutral {
  color: var(--text-dim);
  background: var(--surface-3);
}

.streamone-subscription-map {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.streamone-subscription-map + .streamone-subscription-map {
  margin-top: 8px;
}

.streamone-subscription-map code {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  word-break: break-word;
}

.streamone-tree-inline-entitlements {
  margin: 0 0 8px 28px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.streamone-tree-inline-title {
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.streamone-tree-inline-entitlements .streamone-subscription-map {
  background: var(--surface);
}

.streamone-v3-inline-status {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.streamone-v3-inline-error {
  color: var(--danger);
}

.connector-admin-page {
  max-width: 1500px;
}

.connector-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.connector-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.connector-page-header-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.connector-page-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
}

.connector-page-subtitle {
  max-width: 760px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.connector-page-header-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.connector-period-selector {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.connector-period-selector label {
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.connector-period-input {
  min-width: 152px;
}

.connector-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.connector-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 2px;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.connector-section-label span {
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.connector-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.connector-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 10px 24px -20px rgba(0,0,0,.36);
}

.connector-card-live {
  position: relative;
  overflow: hidden;
}

.connector-card-live::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-azure, #0078d4);
}

.connector-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.connector-card-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--c-azure, #0078d4) 10%, transparent);
  color: var(--c-azure, #0078d4);
  font-size: 15px;
  font-weight: 700;
  flex: 0 0 auto;
}

.connector-card-head {
  min-width: 0;
}

.connector-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.connector-card-name-row strong {
  font-size: 14px;
  color: var(--text);
}

.connector-card-source {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}

.connector-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.connector-health-badge[data-tone="good"] {
  color: var(--green);
}

.connector-health-badge[data-tone="warn"] {
  color: #d97706;
}

.connector-health-badge[data-tone="danger"] {
  color: var(--red);
}

.connector-health-badge[data-tone="neutral"] {
  color: var(--text-muted);
}

.connector-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 16%, transparent);
}

.connector-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--border);
}

.connector-metric-cell {
  padding: 10px 12px;
  background: var(--surface);
}

.connector-metric-label {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.connector-metric-value {
  margin-top: 3px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}

.connector-coverage-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.connector-coverage-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

.connector-coverage-title {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}

.connector-coverage-summary {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.connector-coverage-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.connector-coverage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.connector-coverage-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 10px;
}

.connector-coverage-legend-item i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.connector-card-diagnostics {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 8px 12px;
  align-items: baseline;
  color: var(--text-muted);
  font-size: 10px;
}

.connector-card-diagnostics strong {
  color: var(--text);
  font-size: 11px;
}

.connector-last-sync-meta {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.5;
}

.connector-last-sync-meta strong {
  color: var(--text-dim);
}

.connector-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.connector-card-action {
  min-height: 32px;
}

.connector-card-action-accent,
.connector-action-btn-primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.connector-card-action-accent:hover,
.connector-action-btn-primary:hover {
  background: #13803a;
  border-color: #13803a;
  color: #fff;
}

.connector-card-action-ghost {
  background: var(--surface-2);
}

.connector-card-add {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--surface-2);
  border-style: dashed;
  min-height: 248px;
}

.connector-add-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
}

.connector-add-title {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 700;
}

.connector-add-subtitle {
  max-width: 230px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.connector-kpi-strip-shell {
  margin: 0;
}

.ledger-kpi-row.ce-kpi-strip-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.connector-details-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.connector-module-status:empty {
  display: none;
}

.connector-streamone-module-shell .streamone-mapping-shell {
  margin-top: 0;
}

@media (max-width: 1180px) {
  .connector-card-row {
    grid-template-columns: 1fr;
  }

  .connector-card-diagnostics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger-kpi-row.ce-kpi-strip-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .streamone-kpi-row,
  .streamone-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .streamone-workspace {
    grid-template-columns: 1fr;
  }

  .streamone-detail-panel {
    position: static;
  }
}

@media (max-width: 980px) {
  .streamone-tree-stat {
    display: none;
  }
}

@media (max-width: 720px) {
  .connector-page-header-controls,
  .connector-action-bar,
  .connector-card-actions {
    width: 100%;
  }

  .connector-card-diagnostics,
  .ledger-kpi-row.ce-kpi-strip-five {
    grid-template-columns: 1fr;
  }

  .streamone-kpi-row,
  .streamone-status-strip,
  .streamone-stat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .compo-body,
  .composition-body,
  .insights-panel.explorerv2-support-grid {
    grid-template-columns: 1fr;
  }

  .composition-body {
    align-items: start;
  }

  .composition-signal-panel,
  .ranked-list {
    max-width: 100%;
    justify-self: stretch;
  }

  .ip-side {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 780px) {
  .compo.explorerv2-composition-card {
    padding: 0;
  }

  .donut-wrap {
    width: min(100%, 260px);
  }

  .composition-body {
    padding: 16px;
    gap: 14px;
  }

  .composition-body > .donut-wrap,
  .donut {
    width: min(280px, 100%);
    justify-self: center;
  }

  .donut-center {
    width: min(146px, 54%);
    height: min(146px, 54%);
  }

  .rank-row {
    grid-template-columns: 20px minmax(0, 1fr) 104px;
  }

  .rank-context {
    width: min(300px, 100%);
  }

  .rank-values .delta {
    max-width: 104px;
    font-size: 8.8px;
  }

  .summary-strip {
    grid-template-columns: 1fr;
  }

  .summary-card {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .summary-card:last-child {
    border-bottom: 0;
  }

  .cons-row {
    grid-template-columns: 24px minmax(0, 1fr) 74px;
  }

  .cons-row .tag,
  .cons-row .delta {
    display: none;
  }

  .ip-headline {
    font-size: 18px;
  }
}

/* ==========================================================================
   PHASE 4 SECTION: Cost Explorer
   ========================================================================== */
.cost-explorer-page,
.cost-explorer-root,
#panel-costs .explorerv2-shell {
  max-width: 100%;
  min-width: 0;
}

#panel-costs .cost-filter-card {
  display: flex;
  align-items: flex-end;
  margin: 0;
}

#panel-costs .cost-filter-card .costx-field {
  min-width: 0;
}

#panel-costs .ce-overview {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--cost-section-gap);
}

#panel-costs .period-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 6% 0%, rgba(22, 163, 74, .13), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #ffffff 45%, #f1fbf4 100%);
  padding: 24px 26px;
  background-size: 140% 140% !important;
  animation:
    heroFade .8s cubic-bezier(.2, .85, .2, 1) both,
    gradientShift 10s ease-in-out infinite;
}

#panel-costs .period-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(460px, .82fr) !important;
  gap: 28px;
  align-items: center;
}

#panel-costs .period-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(22, 163, 74, .10);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  border: 1px solid rgba(22, 163, 74, .16);
}

#panel-costs .period-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, .12);
}

#panel-costs .period-title {
  margin: 14px 0 8px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  letter-spacing: -.045em;
}

#panel-costs .period-title strong {
  font-size: 44px;
  line-height: .95;
  font-weight: 800;
}

#panel-costs .period-title span {
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

#panel-costs .period-copy {
  margin: 0;
  max-width: 620px;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.6;
}

#panel-costs .soft-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

#panel-costs .soft-chip {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 700;
  animation: softRise .7s cubic-bezier(.2, .85, .2, 1) both;
}

#panel-costs .soft-chip.good {
  background: #eef9f2;
  border-color: #bfe8cc;
  color: var(--green);
}

#panel-costs .soft-chip:nth-child(1) {
  animation-delay: .22s;
}

#panel-costs .soft-chip:nth-child(2) {
  animation-delay: .30s;
}

#panel-costs .soft-chip:nth-child(3) {
  animation-delay: .38s;
}

#panel-costs .period-summary {
  align-self: center;
  justify-self: end;
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: minmax(82px, .75fr) 1px minmax(82px, .75fr) 1px minmax(160px, 1.3fr);
  align-items: center;
  gap: 18px;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  animation: summarySlide .7s cubic-bezier(.2, .85, .2, 1) both;
  animation-delay: .16s;
}

#panel-costs .period-summary:hover {
  background: transparent !important;
  border-color: transparent !important;
}

#panel-costs .summary-stat {
  min-width: 0;
}

#panel-costs .summary-stat span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 6px;
  white-space: nowrap;
}

#panel-costs .summary-stat strong {
  display: block;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-costs .summary-stat.wide strong {
  font-size: 20px;
}

#panel-costs .summary-divider {
  width: 1px;
  height: 34px;
  background: var(--border-strong) !important;
  opacity: .75;
}

#panel-costs .metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

#panel-costs .metric {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  will-change: transform;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: none;
  min-height: 132px;
  padding: 17px 17px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform .28s cubic-bezier(.2, .85, .2, 1),
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
  animation: cardEntrance .75s cubic-bezier(.2, .85, .2, 1) both;
}

#panel-costs .metric:nth-child(1) {
  animation-delay: .05s;
}

#panel-costs .metric:nth-child(2) {
  animation-delay: .12s;
}

#panel-costs .metric:nth-child(3) {
  animation-delay: .19s;
}

#panel-costs .metric:nth-child(4) {
  animation-delay: .26s;
}

#panel-costs .metric:nth-child(5) {
  animation-delay: .33s;
}

#panel-costs .metric:nth-child(6) {
  animation-delay: .40s;
}

#panel-costs .metric::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(22, 163, 74, .075) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .65s cubic-bezier(.2, .85, .2, 1);
  pointer-events: none;
  display: block !important;
}

#panel-costs .metric::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at center, rgba(22, 163, 74, .06), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease, transform .45s ease;
  transform: scale(.9);
  pointer-events: none;
}

#panel-costs .metric:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(22, 163, 74, .28) !important;
  box-shadow: 0 14px 34px rgba(24, 24, 31, .08) !important;
  background: var(--surface) !important;
}

#panel-costs .metric:hover::before {
  transform: translateX(120%);
}

#panel-costs .metric:hover::after {
  opacity: 1;
  transform: scale(1);
}

#panel-costs .metric:hover .metric-value {
  transform: translateY(-2px) scale(1.025);
}

#panel-costs .metric:hover .metric-label {
  color: #16a34a;
}

#panel-costs .metric-label {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
  transition: transform .28s cubic-bezier(.2, .85, .2, 1), color .28s ease;
}

#panel-costs .metric-value {
  margin-top: 13px;
  color: var(--text);
  font-size: 27px;
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .28s cubic-bezier(.2, .85, .2, 1), color .28s ease;
  animation: valuePop .9s cubic-bezier(.2, .85, .2, 1) both;
  animation-delay: inherit;
}

#panel-costs .metric-value.green {
  color: var(--green);
}

#panel-costs .metric-value.orange {
  color: #b45309;
}

#panel-costs .metric-value.red {
  color: #dc2626;
}

#panel-costs .metric-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

#panel-costs .metric-note b {
  color: var(--text-dim);
  font-weight: 700;
}

/* ==========================================================================
   PHASE 4 SECTION: Animations/Transitions
   ========================================================================== */
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes valuePop {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  60% {
    opacity: 1;
    transform: translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes summarySlide {
  from {
    opacity: 0;
    transform: translateX(14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1180px) {
  #panel-costs .period-card-inner {
    grid-template-columns: 1fr !important;
  }

  #panel-costs .period-summary {
    justify-self: start;
    width: 100%;
    border-radius: 18px;
  }

  #panel-costs .metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #panel-costs .period-card {
    padding: 20px;
  }

  #panel-costs .period-title strong {
    font-size: 36px;
  }

  #panel-costs .period-summary {
    grid-template-columns: 1fr;
    border-radius: 18px;
    gap: 12px;
  }

  #panel-costs .summary-divider {
    display: none;
  }

  #panel-costs .metrics-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rank-row,
  .rank-context,
  .compo-donut-segment {
    transition: none !important;
  }

  #panel-costs .ce-overview *,
  #panel-costs .ce-overview *::before,
  #panel-costs .ce-overview *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* Azure Commitment Diagnostics (Reservations / Savings Plans / Azure Hybrid Benefit) */
.commitment-diagnostics { display: flex; flex-direction: column; gap: 14px; }
.commitment-diagnostics .commit-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.commitment-diagnostics .commit-header h3 { margin: 0; }
.commitment-diagnostics .commit-source { color: var(--text-dim); font-size: 12px; }
.commitment-diagnostics .commit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.commitment-diagnostics .commit-tile { background: var(--card, #1b1b1f); border: 1px solid var(--border, #2a2a30); border-radius: 10px; padding: 12px 14px; }
.commitment-diagnostics .commit-tile-label { color: var(--text-dim); font-size: 12px; }
.commitment-diagnostics .commit-tile-value { font-size: 20px; font-weight: 600; margin-top: 4px; }
.commitment-diagnostics .commit-tile-sub { color: var(--text-muted, var(--text-dim)); font-size: 11px; margin-top: 2px; }
.commitment-diagnostics .commit-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--border, #2a2a30); }
.commitment-diagnostics .commit-badge-good { color: var(--c-good, #3fb950); border-color: var(--c-good, #3fb950); }
.commitment-diagnostics .commit-badge-warn { color: var(--c-warn, #d29922); border-color: var(--c-warn, #d29922); }
.commitment-diagnostics .commit-badge-neutral { color: var(--text-dim); }
.commitment-diagnostics .commit-note { color: var(--text-dim); font-size: 11px; }
.commitment-diagnostics .commit-warnings { border: 1px solid var(--c-warn, #d29922); border-radius: 10px; padding: 10px 14px; }
.commitment-diagnostics .commit-warnings-empty { border-color: var(--border, #2a2a30); color: var(--text-dim); }
.commitment-diagnostics .commit-warnings-title { font-weight: 600; margin-bottom: 6px; }
.commitment-diagnostics .commit-warnings ul { margin: 0; padding-left: 18px; }
.commitment-diagnostics .commit-ahb, .commitment-diagnostics .commit-streamone { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Phase 2 — Cost Basis Comparison (validation view, additive) */
.costbasis-diagnostics { display: flex; flex-direction: column; gap: 16px; max-width: 100%; color: var(--text, inherit); }
.costbasis-diagnostics .costbasis-header h3,
.costbasis-diagnostics .costbasis-section-head h4 { margin: 0; }
.costbasis-diagnostics .costbasis-note { color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.costbasis-diagnostics .costbasis-banner { border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.45; background: rgba(148, 163, 184, 0.10); }
.costbasis-diagnostics .costbasis-banner-warn { border: 1px solid rgba(210, 153, 34, 0.45); color: var(--c-warn, #d29922); }
.costbasis-diagnostics .costbasis-banner-error { border: 1px solid rgba(248, 81, 73, 0.55); color: var(--c-danger, #f85149); background: rgba(248, 81, 73, 0.10); font-weight: 600; }
.costbasis-diagnostics .costbasis-banner-info { border: 1px solid rgba(59, 130, 246, 0.35); color: var(--text, inherit); background: rgba(59, 130, 246, 0.08); }
.costbasis-diagnostics .costbasis-section { border: 1px solid rgba(148, 163, 184, 0.20); border-radius: 16px; padding: 16px; background: rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; gap: 14px; }
.costbasis-diagnostics .costbasis-section-head { display: flex; flex-direction: column; gap: 4px; }
.costbasis-diagnostics .costbasis-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.costbasis-diagnostics .costbasis-card-grid-tight { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.costbasis-diagnostics .costbasis-card,
.costbasis-diagnostics .costbasis-detail-cardlet,
.costbasis-diagnostics .costbasis-warning-card,
.costbasis-diagnostics .costbasis-mode-card { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 14px; background: rgba(255, 255, 255, 0.72); padding: 12px 14px; min-width: 0; }
.costbasis-diagnostics .costbasis-card-good { border-color: rgba(63, 185, 80, 0.35); }
.costbasis-diagnostics .costbasis-card-warn { border-color: rgba(210, 153, 34, 0.38); }
.costbasis-diagnostics .costbasis-card-danger { border-color: rgba(248, 81, 73, 0.40); }
.costbasis-diagnostics .costbasis-card-label { color: var(--text-dim); font-size: 12px; }
.costbasis-diagnostics .costbasis-card-value { font-size: 20px; font-weight: 600; line-height: 1.2; margin-top: 6px; }
.costbasis-diagnostics .costbasis-card-sub,
.costbasis-diagnostics .costbasis-cell-sub,
.costbasis-diagnostics .costbasis-inline-note,
.costbasis-diagnostics .costbasis-empty-detail { color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.costbasis-diagnostics .costbasis-scroll-wrap { width: 100%; overflow-x: auto; }
.costbasis-diagnostics .costbasis-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 980px; }
.costbasis-diagnostics .costbasis-table-compact { min-width: 880px; }
.costbasis-diagnostics .costbasis-table th,
.costbasis-diagnostics .costbasis-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); vertical-align: top; }
.costbasis-diagnostics .costbasis-table th { color: var(--text-dim); font-weight: 600; white-space: nowrap; background: rgba(148, 163, 184, 0.08); }
.costbasis-diagnostics .costbasis-cell-usage,
.costbasis-diagnostics .costbasis-cell-actual,
.costbasis-diagnostics .costbasis-cell-amortized,
.costbasis-diagnostics .costbasis-cell-coverage,
.costbasis-diagnostics .costbasis-cell-details { white-space: nowrap; }
.costbasis-diagnostics .costbasis-cell-warnings { min-width: 180px; }
.costbasis-diagnostics .costbasis-cell-warnings .costbasis-badge { margin: 0 6px 6px 0; }
.costbasis-diagnostics .costbasis-empty { text-align: center; color: var(--text-dim); padding: 18px; }
.costbasis-diagnostics .costbasis-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid rgba(148, 163, 184, 0.28); white-space: nowrap; color: var(--text, inherit); background: rgba(148, 163, 184, 0.08); }
.costbasis-diagnostics .costbasis-badge-good { color: var(--c-good, #3fb950); border-color: rgba(63, 185, 80, 0.40); background: rgba(63, 185, 80, 0.10); }
.costbasis-diagnostics .costbasis-badge-ok,
.costbasis-diagnostics .costbasis-badge-muted { color: var(--text-dim); }
.costbasis-diagnostics .costbasis-badge-warn { color: var(--c-warn, #d29922); border-color: rgba(210, 153, 34, 0.42); background: rgba(210, 153, 34, 0.10); }
.costbasis-diagnostics .costbasis-badge-danger { color: var(--c-danger, #f85149); border-color: rgba(248, 81, 73, 0.42); background: rgba(248, 81, 73, 0.10); }
.costbasis-diagnostics .costbasis-badge-info { color: var(--text, inherit); border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.10); }
.costbasis-diagnostics .costbasis-inline-details,
.costbasis-diagnostics .costbasis-advanced-panel,
.costbasis-diagnostics .costbasis-advanced-details { border: 1px solid rgba(148, 163, 184, 0.20); border-radius: 12px; background: rgba(255, 255, 255, 0.56); }
.costbasis-diagnostics .costbasis-inline-details > summary,
.costbasis-diagnostics .costbasis-advanced-panel > summary,
.costbasis-diagnostics .costbasis-advanced-details > summary { cursor: pointer; list-style: none; padding: 11px 14px; font-weight: 600; }
.costbasis-diagnostics .costbasis-inline-details > summary::-webkit-details-marker,
.costbasis-diagnostics .costbasis-advanced-panel > summary::-webkit-details-marker,
.costbasis-diagnostics .costbasis-advanced-details > summary::-webkit-details-marker { display: none; }
.costbasis-diagnostics .costbasis-inline-details > summary::after,
.costbasis-diagnostics .costbasis-advanced-panel > summary::after,
.costbasis-diagnostics .costbasis-advanced-details > summary::after { content: "+"; float: right; color: var(--text-dim); }
.costbasis-diagnostics .costbasis-inline-details[open] > summary::after,
.costbasis-diagnostics .costbasis-advanced-panel[open] > summary::after,
.costbasis-diagnostics .costbasis-advanced-details[open] > summary::after { content: "−"; }
.costbasis-diagnostics .costbasis-month-detail-body,
.costbasis-diagnostics .costbasis-advanced-stack { display: flex; flex-direction: column; gap: 14px; padding: 0 14px 14px; }
.costbasis-diagnostics .costbasis-detail-grid,
.costbasis-diagnostics .costbasis-mode-grid,
.costbasis-diagnostics .costbasis-warning-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.costbasis-diagnostics .costbasis-mode-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.costbasis-diagnostics .costbasis-detail-list { margin: 8px 0 0; padding-left: 18px; color: var(--text, inherit); }
.costbasis-diagnostics .costbasis-detail-list li { margin: 0 0 6px; }
.costbasis-diagnostics .costbasis-stack { display: flex; flex-direction: column; gap: 10px; }
.costbasis-diagnostics code { font-size: 12px; }
@media (max-width: 1440px) {
  .costbasis-diagnostics .costbasis-card-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .costbasis-diagnostics .costbasis-section { padding: 14px; }
}