:root {
  --primary: #1d4ed8;
  --primary-dark: #1e3a8a;
  --accent: #b45309;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --bg: #f4f6f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --muted: #64748b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 18px; color: var(--text); }
h2 { font-size: 1.15rem; font-weight: 650; margin: 0 0 14px; color: var(--text); }
h3 { font-size: 1rem; font-weight: 650; margin: 0 0 12px; color: var(--text); }
h4 { font-size: 0.92rem; font-weight: 650; margin: 16px 0 8px; color: var(--text); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .nav-dropdown-toggle:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: #0f172a; color: #fff; padding: 10px 24px; flex-wrap: wrap; gap: 10px;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1.08rem; letter-spacing: -0.01em; }
.topbar-logo { height: 32px; width: auto; border-radius: 4px; background: #fff; padding: 2px; }
.topnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topnav a { color: #cbd5e1; padding: 8px 12px; border-radius: 6px; font-size: 0.92rem; }
.topnav a:hover { background: #1e293b; color: #fff; text-decoration: none; }
.topnav a.active { background: #1e293b; color: #fff; }
.topbar-user { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: #cbd5e1; }
.btn-link { color: #fca5a5 !important; }

/* Grouped nav dropdowns (Assets / Billing / Admin) - a dropdown's
   toggle looks and behaves like the plain nav links around it, only
   gaining a small indicator and an open menu on click. */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: none; border: none; color: #cbd5e1; padding: 8px 12px; border-radius: 6px;
  font-size: 0.92rem; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.nav-dropdown-toggle::after {
  content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor; opacity: .75; margin-top: 1px;
}
.nav-dropdown-toggle:hover, .nav-dropdown.active .nav-dropdown-toggle, .nav-dropdown.open .nav-dropdown-toggle {
  background: #1e293b; color: #fff;
}
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(15,23,42,.16);
  min-width: 195px; padding: 6px; z-index: 60;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; color: var(--text); padding: 8px 10px; border-radius: 6px; font-size: 0.88rem;
}
.nav-dropdown-menu a:hover { background: var(--bg); text-decoration: none; }

.container { max-width: 1300px; margin: 24px auto; padding: 0 20px; }
.auth-container { max-width: 420px; margin: 80px auto; padding: 0 20px; }

/* Sidebar layout */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main .container { flex: 1; width: 100%; }

.sidebar {
  width: 240px; flex: 0 0 240px; background: #0f172a; color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1.02rem;
  padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo { height: 28px; width: auto; border-radius: 4px; background: #fff; padding: 2px; }

.sidebar-nav { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-link, .sidebar-group-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; color: #cbd5e1; text-decoration: none;
  background: none; border: none; font-family: inherit; font-size: 0.9rem; text-align: left;
  padding: 9px 10px; border-radius: 7px; cursor: pointer; border-left: 3px solid transparent;
}
.sidebar-link svg, .sidebar-group-toggle svg:first-child { width: 17px; height: 17px; flex: 0 0 auto; }
.sidebar-link span, .sidebar-group-toggle span { flex: 1; }
.sidebar-link:hover, .sidebar-group-toggle:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar-link.active { background: rgba(37,99,235,.18); color: #fff; border-left-color: var(--primary); }
.sidebar-group.active > .sidebar-group-toggle { border-left-color: var(--primary); color: #fff; }
.sidebar-chevron { width: 13px; height: 13px; opacity: .7; transition: transform .15s ease; flex: 0 0 auto; }
.sidebar-group.open .sidebar-chevron { transform: rotate(180deg); }

.sidebar-submenu { display: none; padding-left: 31px; margin-top: 1px; }
.sidebar-submenu a {
  display: block; color: #94a3b8; text-decoration: none; font-size: 0.86rem;
  padding: 7px 10px; border-radius: 6px; margin: 1px 0;
}
.sidebar-submenu a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar-submenu a.active { background: rgba(37,99,235,.18); color: #fff; font-weight: 550; }

.sidebar-footer {
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 0.85rem;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sidebar-footer a { color: #cbd5e1; }
.sidebar-footer em { font-style: normal; color: #64748b; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex: 0 0 auto; height: auto; position: static; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-group { position: relative; }
}

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
}
.card h2, .card h3 { margin-top: 0; }
.chart-wrap { position: relative; height: 260px; width: 100%; } /* Chart.js needs an explicitly sized, positioned ancestor - without this a canvas inside a CSS Grid cell can render at zero size */

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; text-align: left; }
.stat-card .value { font-size: 1.8rem; font-weight: 700; }
.stat-card .label { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-card.running .value { color: var(--success); }
.stat-card.stopped .value { color: var(--warning); }
.stat-card.deleted .value { color: var(--danger); }

table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
td select { width: auto; min-width: 130px; } /* prevent selects from collapsing to blank inside auto-sized table columns */
th { background: #f1f5f9; font-weight: 600; position: sticky; top: 0; }
tr:hover td { background: #f8fafc; }
.table-wrap {
  overflow-x: auto; max-width: 100%;
  scrollbar-width: auto; /* Firefox: always show, not just on hover */
}
.table-wrap::-webkit-scrollbar { height: 12px; } /* Chrome/Edge/Safari: force a visible, grabbable scrollbar */
.table-wrap::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: #64748b; }
.table-wrap-hint {
  font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-running { background: #dcfce7; color: #166534; }
.badge-stopped { background: #fef3c7; color: #92400e; }
.badge-deleted { background: #fee2e2; color: #991b1b; }
.badge-unknown { background: #e2e8f0; color: #475569; }
.badge-progress { background: #dbeafe; color: #1e40af; }

.btn {
  display: inline-block; background: var(--primary); color: #fff; border: none; padding: 9px 16px;
  border-radius: 6px; cursor: pointer; font-size: 0.9rem; text-decoration: none;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn-secondary { background: #64748b; }
.btn-secondary:hover { background: #475569; }
.btn-danger { background: var(--danger); }
.btn-sm { padding: 5px 10px; font-size: 0.8rem; }

form label { display: block; margin: 10px 0 4px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
input, select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.92rem;
  font-family: inherit;
}
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; min-width: 18px; max-width: 18px;
  padding: 0; margin: 0; border: 1px solid var(--border);
  accent-color: var(--primary); vertical-align: middle;
  flex: 0 0 18px;
}
.checkbox-row, .radio-row { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0; font-weight: 500; color: var(--text); }
.checkbox-row input, .radio-row input { margin: 0; }
.dependency-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.dependency-form { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:12px 14px; align-items:end; }
.dependency-form label { margin:0; }
.dependency-wide { grid-column:1/-1; }
@media(max-width:900px){.dependency-form{grid-template-columns:repeat(2,minmax(0,1fr));}.dependency-kpis{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.dependency-form,.dependency-kpis{grid-template-columns:1fr;}.dependency-wide{grid-column:auto;}}

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-danger { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef3c7; color: #92400e; }

.app-footer { text-align: center; padding: 20px; color: var(--muted); font-size: 0.8rem; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filters input, .filters select { width: auto; min-width: 160px; }

.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.muted { color: var(--muted); }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }

@media (max-width: 600px) {
  .nav-dropdown-menu { position: static; box-shadow: none; border: none; margin-top: 2px; padding-left: 10px; }
}

@media print {
  .topbar, .sidebar, .app-footer, .no-print { display: none !important; }
  body { background: #fff; }
  .app-shell { display: block; }
}

/* Asset Register column chooser */
.vm-list-actions { display: flex; align-items: center; gap: 8px; }
.column-picker-wrap { position: relative; }
.column-picker {
  position: absolute; z-index: 1000; right: 0; top: calc(100% + 6px);
  width: min(720px, 90vw); max-height: 70vh; overflow: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15,23,42,.18); padding: 12px;
}
.column-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.column-picker-head > div { display: flex; gap: 5px; flex-wrap: wrap; }
.column-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 4px 14px; }
.column-option { display: flex; align-items: center; gap: 7px; margin: 0; padding: 6px 4px; font-weight: 500; color: var(--text); cursor: pointer; }
.column-option input { flex: 0 0 auto; }
.column-option:hover { background: #f8fafc; border-radius: 5px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .78rem; }
@media (max-width: 800px) {
  .column-picker-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
@media (max-width: 520px) {
  .column-picker-grid { grid-template-columns: 1fr; }
  .column-picker { right: -30px; }
}
/* Custom dashboard builder */
.dashboard-quick-add{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.widget-builder-row{border-left:4px solid var(--primary)}.builder-check-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:4px 12px;border:1px solid var(--border);padding:8px;border-radius:7px;max-height:260px;overflow:auto;background:#fff}.dashboard-builder-filters{background:#f8fafc}@media(max-width:900px){.builder-check-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}}@media(max-width:600px){.builder-check-grid{grid-template-columns:1fr}.dashboard-quick-add{justify-content:flex-start}}

/* =====================================================================
   Cloud Infrastructure UI Layer — v2.20
   Presentation-only overrides. No business logic, forms, APIs, or
   calculations are changed by this section.
   ===================================================================== */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #eff6ff;
  --accent: #7c3aed;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --info: #0284c7;
  --bg: #f6f8fb;
  --card: #ffffff;
  --border: #e5eaf1;
  --text: #172033;
  --muted: #64748b;
  --sidebar: #0b1220;
  --sidebar-2: #111a2b;
  --sidebar-text: #cbd5e1;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 5px rgba(15,23,42,.035);
  --shadow-md: 0 8px 24px rgba(15,23,42,.07);
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-size: 14px; }
body.nav-open { overflow: hidden; }
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

h1 { font-size: clamp(1.45rem, 2vw, 1.75rem); letter-spacing: -.025em; margin-bottom: 20px; }
h2 { font-size: 1.12rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; }


/* v5.21.2 — Stable sidebar branding with independently scrollable navigation. */
.sidebar { height:100vh; min-height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.sidebar-brand { position:relative; flex:0 0 auto; z-index:2; background:linear-gradient(180deg,var(--sidebar) 0%,#0e1728 100%); }
.sidebar-brand-home { display:flex; align-items:center; gap:11px; min-width:0; flex:1 1 auto; color:inherit; text-decoration:none !important; }
.sidebar-brand-home:hover { color:inherit; text-decoration:none !important; }
.sidebar-nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; }
.sidebar-footer { flex:0 0 auto; }
.sidebar-brand-mark, .sidebar-logo { flex-shrink:0; }

/* Application shell */
.app-shell { min-height: 100vh; }
.sidebar {
  width: 256px; flex-basis: 256px; background: linear-gradient(180deg, var(--sidebar) 0%, #0e1728 100%);
  border-right: 1px solid rgba(148,163,184,.12); box-shadow: 3px 0 18px rgba(15,23,42,.04); z-index: 1100;
}
.sidebar-brand { min-height: 76px; padding: 16px 15px; border-bottom: 1px solid rgba(255,255,255,.075); gap: 11px; }
.sidebar-brand-mark { width: 38px; height: 38px; display:flex; align-items:center; justify-content:center; flex:0 0 38px; border-radius: 10px; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.15); }
.sidebar-logo { max-width: 31px; max-height: 31px; width: auto; height: auto; border-radius: 7px; padding: 0; background: transparent; }
.sidebar-logo-fallback { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: -.04em; }
.sidebar-brand-copy { min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.sidebar-brand-copy strong { color:#f8fafc; font-size: .96rem; font-weight: 700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-brand-copy span { color:#7f8da4; font-size:.67rem; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-close { display:none; margin-left:auto; background:transparent; border:0; color:#94a3b8; font-size:24px; line-height:1; cursor:pointer; }
.sidebar-nav { padding: 15px 11px; gap: 4px; }
.sidebar-link, .sidebar-group-toggle { min-height: 42px; padding: 10px 11px; border-left: 3px solid transparent; border-radius: 9px; font-size:.88rem; }
.sidebar-link svg, .sidebar-group-toggle svg:first-child { width:18px; height:18px; }
.sidebar-link.active { background: linear-gradient(90deg, rgba(37,99,235,.22), rgba(37,99,235,.10)); border-left-color:#60a5fa; box-shadow: inset 0 0 0 1px rgba(96,165,250,.06); }
.sidebar-group.active > .sidebar-group-toggle { background: rgba(255,255,255,.035); border-left-color: #3b82f6; }
.sidebar-submenu { padding-left: 29px; margin: 2px 0 5px; border-left:1px solid rgba(148,163,184,.12); margin-left: 22px; }
.sidebar-submenu a { padding: 8px 10px; font-size:.82rem; border-radius:7px; }
.sidebar-submenu a.active { background: rgba(37,99,235,.17); color:#fff; font-weight:600; }
.sidebar-footer { padding: 12px 13px; border-top:1px solid rgba(255,255,255,.075); }
.sidebar-user { display:flex; align-items:center; gap:9px; min-width:0; color:#cbd5e1 !important; text-decoration:none !important; }
.sidebar-avatar { width:32px; height:32px; flex:0 0 32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(59,130,246,.18); color:#93c5fd; font-size:.78rem; font-weight:700; }
.sidebar-user-copy { min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.sidebar-user-copy strong { color:#e2e8f0; font-size:.79rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user-copy em { color:#64748b; font-size:.68rem; margin-top:3px; text-transform:capitalize; }
.sidebar-logout { color:#94a3b8 !important; font-size:1.05rem; text-decoration:none !important; padding:6px; border-radius:7px; }
.sidebar-logout:hover { color:#fca5a5 !important; background:rgba(255,255,255,.05); }

.app-main { background: var(--bg); }
.container { max-width: 1440px; margin: 0 auto; padding: 28px 28px 38px; }
.app-main .container { min-height: calc(100vh - 50px); }

/* Page surfaces */
.card, .stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, border-color .18s ease;
}
.card { padding: 20px; margin-bottom: 18px; }
.card:hover { border-color:#dce3ec; }
.stat-card { padding: 18px 20px; }
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-card .value { font-size: clamp(1.65rem, 2.3vw, 2rem); letter-spacing:-.035em; }
.stat-card .label { font-size:.72rem; letter-spacing:.08em; font-weight:650; }

/* Data tables */
.table-wrap { border:1px solid var(--border); border-radius:10px; background:#fff; }
.table-wrap table { border:0; }
table { font-size:.82rem; }
th, td { padding: 10px 11px; }
th { background:#f8fafc; color:#475569; font-size:.73rem; text-transform:uppercase; letter-spacing:.045em; font-weight:700; border-bottom:1px solid #dfe6ef; }
td { color:#334155; border-bottom-color:#edf1f5; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#f8fbff; }
td a { font-weight:600; }
.table-wrap-hint { padding:0 0 9px; line-height:1.5; }

/* Buttons and controls — v2.42 design system */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px;
  padding:10px 16px; border:1px solid transparent; border-radius:11px; cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; font-size:.88rem;
  font-weight:750; letter-spacing:.005em; text-decoration:none; white-space:nowrap;
  box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 18%,transparent), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease, background .16s ease;
  position:relative; overflow:hidden;
}
.btn::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.13) 48%,transparent 76%); transform:translateX(-125%); transition:transform .45s ease; pointer-events:none; }
.btn:hover { color:#fff; text-decoration:none; transform:translateY(-1px); filter:saturate(1.06); box-shadow:0 9px 22px color-mix(in srgb,var(--primary) 22%,transparent), inset 0 1px 0 rgba(255,255,255,.16); }
.btn:hover::after { transform:translateX(125%); }
.btn:active { transform:translateY(0); box-shadow:0 4px 10px color-mix(in srgb,var(--primary) 16%,transparent); }
.btn:focus-visible { outline:0; box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent), 0 6px 18px color-mix(in srgb,var(--primary) 18%,transparent); }
.btn:disabled, .btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; filter:none; }
.btn-secondary { background:var(--card); color:var(--text); border-color:var(--border); box-shadow:0 2px 8px rgba(15,23,42,.06); }
.btn-secondary:hover { background:color-mix(in srgb,var(--primary-soft) 55%,var(--card)); color:var(--text); border-color:color-mix(in srgb,var(--primary) 35%,var(--border)); box-shadow:0 7px 16px rgba(15,23,42,.08); }
.btn-secondary::after { background:linear-gradient(115deg,transparent 20%,color-mix(in srgb,var(--primary) 8%,transparent) 48%,transparent 76%); }
.btn-ghost { background:transparent !important; color:var(--primary) !important; border-color:transparent !important; box-shadow:none !important; text-shadow:none; }
.btn-ghost:hover { background:color-mix(in srgb,var(--primary) 10%,transparent) !important; color:var(--primary-dark) !important; box-shadow:none !important; }
.btn-ghost:visited { color:var(--primary) !important; }
html[data-theme="dark"] .btn-ghost { color:color-mix(in srgb,var(--primary) 88%,#fff) !important; }
html[data-theme="dark"] .btn-ghost:hover { background:color-mix(in srgb,var(--primary) 14%,transparent) !important; color:#fff !important; }
.btn-danger { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; }
.btn-success { background:linear-gradient(135deg,#10b981,#059669); color:#fff; }
.btn-warning { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
.btn-outline-danger { background:transparent; color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,var(--border)); box-shadow:none; }
.btn-outline-danger:hover { background:color-mix(in srgb,var(--danger) 8%,transparent); color:var(--danger); box-shadow:none; }
.btn-icon { width:40px; min-width:40px; padding:0; border-radius:11px; }
.btn-sm { min-height:34px; padding:7px 11px; border-radius:9px; font-size:.78rem; }
.btn-lg { min-height:46px; padding:12px 20px; border-radius:13px; font-size:.94rem; }
.btn-block { width:100%; }
.btn .btn-arrow { display:inline-flex; transition:transform .16s ease; }
.btn:hover .btn-arrow { transform:translateX(3px); }

input, select, textarea { min-height:40px; padding:9px 11px; border-radius:8px; background:#fff; color:var(--text); border-color:#d6dee9; transition:border-color .15s ease, box-shadow .15s ease; }
input:hover, select:hover, textarea:hover { border-color:#bdc9d8; }
input:focus, select:focus, textarea:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(37,99,235,.10); outline:none; }
form label { margin:12px 0 5px; color:#475569; font-size:.78rem; letter-spacing:.01em; }

/* Filters */
.filters { padding:14px; gap:8px; align-items:center; background:#fff; }
.filters input, .filters select { min-width:150px; min-height:38px; }
.filters input { min-width:250px; }

/* Status badges */
.badge { padding:4px 9px; font-size:.7rem; letter-spacing:.01em; border:1px solid transparent; }
.badge-running { background:#ecfdf3; color:#15803d; border-color:#bbf7d0; }
.badge-stopped { background:#fffbeb; color:#a16207; border-color:#fde68a; }
.badge-deleted { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.badge-unknown { background:#f1f5f9; color:#64748b; border-color:#e2e8f0; }
.badge-progress { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }

/* Alerts */
.alert { border:1px solid transparent; padding:12px 14px; border-radius:9px; box-shadow:var(--shadow-sm); }
.alert-success { border-color:#bbf7d0; }
.alert-danger { border-color:#fecaca; }
.alert-warning { border-color:#fde68a; }

/* Column chooser */
.column-picker { border-radius:12px; box-shadow:0 18px 45px rgba(15,23,42,.16); border-color:#dbe3ed; }
.column-picker-head { padding-bottom:10px; border-bottom:1px solid #eef2f6; }
.column-option { border-radius:7px; }

/* Footer */
.app-footer { padding:14px 20px 20px; border-top:1px solid #e9edf3; background:var(--bg); color:#94a3b8; font-size:.72rem; }

/* Mobile navigation */
.mobile-nav-toggle { display:none; position:fixed; top:12px; left:12px; z-index:1300; width:42px; height:42px; border:1px solid rgba(148,163,184,.25); border-radius:10px; background:#0b1220; box-shadow:0 8px 20px rgba(15,23,42,.18); cursor:pointer; padding:9px; }
.mobile-nav-toggle span { display:block; height:2px; background:#e2e8f0; margin:4px 0; border-radius:2px; }
.sidebar-overlay { display:none; position:fixed; inset:0; z-index:1050; background:rgba(2,6,23,.55); backdrop-filter:blur(2px); }
.sidebar-overlay.visible { display:block; }

@media (max-width: 860px) {
  .mobile-nav-toggle { display:block; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; height:100vh; transform:translateX(-102%); transition:transform .2s ease; box-shadow:12px 0 35px rgba(15,23,42,.2); }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar-close { display:block; }
  .app-shell { display:block; }
  .container { padding:22px 16px 30px; }
  .app-footer { padding-bottom:18px; }
}
@media (max-width: 600px) {
  h1 { margin-left:52px; }
  .container { padding-top:18px; }
  .card { padding:15px; border-radius:10px; }
  .filters { align-items:stretch; }
  .filters input, .filters select, .filters .btn { width:100%; min-width:0; }
  .flex-between { align-items:flex-start; }
  .vm-list-actions { width:100%; flex-wrap:wrap; }
  .vm-list-actions .btn, .column-picker-wrap { flex:1 1 auto; }
  .column-picker-wrap .btn { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* Settings administration workspace */
.settings-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}
.settings-page-head h1{margin-bottom:4px}
.settings-intro{max-width:760px;margin:0}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;color:#64748b;margin-bottom:6px}
.settings-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.settings-nav-item{appearance:none;border:1px solid #e2e8f0;background:#fff;color:#334155;border-radius:12px;padding:13px 14px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;transition:.16s ease;box-shadow:0 1px 2px rgba(15,23,42,.03)}
.settings-nav-item:hover{border-color:#cbd5e1;background:#f8fafc;transform:translateY(-1px)}
.settings-nav-item.is-active{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 1px rgba(37,99,235,.08)}
.settings-nav-item strong{display:block;font-size:13px;line-height:18px;color:#0f172a}
.settings-nav-item small{display:block;color:#64748b;font-size:11px;line-height:16px;margin-top:1px}
.settings-nav-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#f1f5f9;color:#475569;font-size:14px;flex:0 0 31px}
.settings-nav-item.is-active .settings-nav-icon{background:#dbeafe;color:#1d4ed8}
.settings-panels{min-width:0}
.settings-panel{display:none;margin-bottom:18px}
.settings-panel.is-active{display:block;animation:settingsFadeIn .14s ease-out}
.settings-panel>h3{margin-top:0}
.settings-panel>h4{margin-top:26px}
.settings-panel .table-wrap{margin-top:14px}
.settings-panel .card{box-shadow:none}
@keyframes settingsFadeIn{from{opacity:.65;transform:translateY(2px)}to{opacity:1;transform:none}}
@media(max-width:900px){.settings-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.settings-page-head{display:block}.settings-nav{grid-template-columns:1fr}.settings-nav-item{padding:12px}.settings-intro{font-size:13px}}


/* =====================================================================
   Cloud Infrastructure UI Layer — v2.22 Appearance Preferences
   Browser-local presentation preferences. No backend or business logic.
   ===================================================================== */
html[data-accent="blue"] { --primary:#2563eb; --primary-dark:#1d4ed8; --primary-soft:#eff6ff; --accent:#2563eb; }
html[data-accent="indigo"] { --primary:#4f46e5; --primary-dark:#4338ca; --primary-soft:#eef2ff; --accent:#4f46e5; }
html[data-accent="violet"] { --primary:#7c3aed; --primary-dark:#6d28d9; --primary-soft:#f5f3ff; --accent:#7c3aed; }
html[data-accent="fuchsia"] { --primary:#c026d3; --primary-dark:#a21caf; --primary-soft:#fdf4ff; --accent:#d946ef; }
html[data-accent="rose"] { --primary:#e11d48; --primary-dark:#be123c; --primary-soft:#fff1f2; --accent:#e11d48; }
html[data-accent="coral"] { --primary:#f04f3e; --primary-dark:#d63d2f; --primary-soft:#fff3f0; --accent:#ff6b57; }
html[data-accent="amber"] { --primary:#d97706; --primary-dark:#b45309; --primary-soft:#fffbeb; --accent:#f59e0b; }
html[data-accent="gold"] { --primary:#b7791f; --primary-dark:#975a16; --primary-soft:#fffbeb; --accent:#d69e2e; }
html[data-accent="emerald"] { --primary:#059669; --primary-dark:#047857; --primary-soft:#ecfdf5; --accent:#10b981; }
html[data-accent="teal"] { --primary:#0d9488; --primary-dark:#0f766e; --primary-soft:#f0fdfa; --accent:#14b8a6; }
html[data-accent="cyan"] { --primary:#0891b2; --primary-dark:#0e7490; --primary-soft:#ecfeff; --accent:#06b6d4; }
html[data-accent="sky"] { --primary:#0284c7; --primary-dark:#0369a1; --primary-soft:#f0f9ff; --accent:#38bdf8; }

/* Replace the most visible hard-coded blue presentation values with the selected accent. */
a { color:var(--primary); }
.sidebar-link.active { border-left-color:var(--primary); background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--primary) 10%, transparent)); }
.sidebar-group.active > .sidebar-group-toggle { border-left-color:var(--primary); color:#fff; }
.sidebar-submenu a.active { background:color-mix(in srgb, var(--primary) 17%, transparent); }
.settings-nav-item.is-active { border-color:var(--primary); background:var(--primary-soft); }
.settings-nav-item.is-active .settings-nav-icon { background:color-mix(in srgb, var(--primary) 14%, white); color:var(--primary-dark); }
input:focus, select:focus, textarea:focus { border-color:color-mix(in srgb, var(--primary) 55%, #fff); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }

html[data-theme="dark"] body { background:#0b1220; color:#dbe4f0; }
html[data-theme="dark"] .app-main { background:#0b1220; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color:#f1f5f9; }
html[data-theme="dark"] .muted, html[data-theme="dark"] .settings-nav-item small { color:#94a3b8; }
html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .settings-nav-item, html[data-theme="dark"] .table-wrap, html[data-theme="dark"] .filters { background:#111a2b; border-color:#263449; color:#dbe4f0; }
html[data-theme="dark"] .card:hover { border-color:#34445d; }
html[data-theme="dark"] th { background:#172235; color:#aebbd0; border-bottom-color:#2b3a50; }
html[data-theme="dark"] td { color:#d1dae7; border-bottom-color:#223047; }
html[data-theme="dark"] tbody tr:hover td { background:#162238; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background:#0d1727; color:#e2e8f0; border-color:#334155; }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color:#64748b; }
html[data-theme="dark"] .btn-secondary { background:#172235; color:#dbe4f0; border-color:#34445d; }
html[data-theme="dark"] .btn-secondary:hover { background:#1e2a3d; color:#fff; }
html[data-theme="dark"] .nav-dropdown-menu { background:#111a2b; border-color:#2b3a50; }
html[data-theme="dark"] .nav-dropdown-menu a { color:#dbe4f0; }
html[data-theme="dark"] .nav-dropdown-menu a:hover { background:#172235; }
html[data-theme="dark"] .app-footer { background:#0b1220; border-color:#1e293b; }
html[data-theme="dark"] .column-picker { background:#111a2b; border-color:#334155; }
html[data-theme="dark"] .settings-nav-item:hover { background:#172235; }
html[data-theme="dark"] .settings-nav-item strong { color:#f1f5f9; }
html[data-theme="dark"] .settings-nav-icon { background:#172235; color:#aebbd0; }
html[data-theme="dark"] .appearance-card, html[data-theme="dark"] .appearance-preview-bar { background:#0d1727; border-color:#2b3a50; }
html[data-theme="dark"] .segmented-control { background:#111a2b; border-color:#334155; }
html[data-theme="dark"] .segmented-control button { color:#94a3b8; }
html[data-theme="dark"] .appearance-choice { background:#111a2b; border-color:#334155; color:#dbe4f0; }
html[data-theme="dark"] .appearance-choice small { color:#94a3b8; }

html[data-density="compact"] .card { padding:15px 16px; margin-bottom:12px; }
html[data-density="compact"] .stat-card { padding:13px 16px; }
html[data-density="compact"] th, html[data-density="compact"] td { padding:7px 9px; }
html[data-density="compact"] .container { padding-top:20px; padding-bottom:28px; }
html[data-density="compact"] .settings-nav { gap:7px; }
html[data-density="compact"] .settings-nav-item { padding:10px 12px; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }

.sidebar-user-actions { display:flex; align-items:center; gap:3px; margin-left:auto; }
.sidebar-theme-toggle { border:0; background:transparent; color:#94a3b8; cursor:pointer; width:30px; height:30px; border-radius:7px; font-size:17px; }
.sidebar-theme-toggle:hover { color:#fff; background:rgba(255,255,255,.06); }

/* Appearance settings */
.settings-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.appearance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.appearance-card { border:1px solid var(--border); border-radius:12px; padding:17px; background:#fbfcfe; }
.appearance-card-title { font-weight:750; color:var(--text); font-size:.9rem; }
.appearance-card-help { margin:4px 0 14px; color:var(--muted); font-size:.77rem; line-height:1.45; }
.appearance-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.appearance-choice { appearance:none; border:1px solid var(--border); background:#fff; color:var(--text); border-radius:9px; padding:9px; text-align:left; cursor:pointer; }
.appearance-choice:hover, .appearance-choice.selected { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 10%, transparent); }
.appearance-choice strong, .appearance-choice small { display:block; }
.appearance-choice strong { font-size:.76rem; margin-top:7px; }
.appearance-choice small { color:var(--muted); font-size:.66rem; margin-top:2px; line-height:1.25; }
.appearance-preview { height:42px; display:block; border-radius:6px; border:1px solid #dbe3ed; position:relative; overflow:hidden; }
.preview-light { background:linear-gradient(#fff 0 28%,#f1f5f9 28% 100%); }
.preview-light::after { content:""; position:absolute; left:7px; right:7px; top:17px; height:17px; background:#fff; border:1px solid #e2e8f0; border-radius:3px; }
.preview-dark { background:linear-gradient(#111a2b 0 28%,#0b1220 28% 100%); border-color:#334155; }
.preview-dark::after { content:""; position:absolute; left:7px; right:7px; top:17px; height:17px; background:#172235; border:1px solid #334155; border-radius:3px; }
.preview-system { background:linear-gradient(135deg,#fff 0 50%,#111a2b 50%); }
.preview-system::after { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:#94a3b8; left:calc(50% - 6px); top:calc(50% - 6px); }
.accent-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.accent-swatch { appearance:none; border:1px solid transparent; background:transparent; padding:5px 3px; border-radius:8px; cursor:pointer; color:var(--muted); }
.accent-swatch span { display:block; width:28px; height:28px; border-radius:50%; margin:0 auto 4px; border:3px solid #fff; box-shadow:0 0 0 1px #cbd5e1; }
.accent-swatch strong { display:block; font-size:.62rem; font-weight:650; }
.accent-swatch.selected { border-color:var(--border); background:var(--primary-soft); color:var(--text); }
.accent-swatch[data-accent-value="blue"] span{background:#2563eb}.accent-swatch[data-accent-value="indigo"] span{background:#4f46e5}.accent-swatch[data-accent-value="emerald"] span{background:#059669}.accent-swatch[data-accent-value="violet"] span{background:#7c3aed}.accent-swatch[data-accent-value="amber"] span{background:#d97706}.accent-swatch[data-accent-value="rose"] span{background:#e11d48}
.segmented-control { display:inline-flex; padding:3px; border:1px solid var(--border); border-radius:9px; background:#f8fafc; }
.segmented-control button { border:0; background:transparent; padding:7px 12px; border-radius:6px; color:#64748b; font:inherit; font-size:.75rem; cursor:pointer; }
.segmented-control button.selected { background:var(--primary); color:#fff; box-shadow:0 1px 3px rgba(15,23,42,.12); }
.appearance-preview-bar { margin-top:14px; padding:13px 15px; border:1px dashed var(--border); border-radius:10px; background:#f8fafc; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.appearance-preview-bar strong, .appearance-preview-bar span { display:block; }.appearance-preview-bar span { color:var(--muted); font-size:.72rem; margin-top:2px; }.appearance-demo-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
@media(max-width:760px){.appearance-grid{grid-template-columns:1fr}.appearance-choice-grid{grid-template-columns:1fr 1fr}.accent-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.appearance-preview-bar{display:block}.appearance-demo-actions{margin-top:10px}.settings-section-head{display:block}.settings-section-head .btn{margin-top:8px}}

/* =====================================================================
   Cloud Console Visual System — v2.23
   Inspired by the supplied visual references. Presentation-only.
   ===================================================================== */
html[data-ui-style="modern"] .card,
html[data-ui-style="modern"] .stat-card { border-radius:16px; box-shadow:0 8px 28px rgba(15,23,42,.045); }
html[data-ui-style="modern"] .card { padding:22px; }
html[data-ui-style="modern"] .stat-card { position:relative; overflow:hidden; min-height:112px; padding:19px 20px; background:linear-gradient(145deg,var(--card) 0%,color-mix(in srgb,var(--primary-soft) 28%,var(--card)) 100%); }
html[data-ui-style="modern"] .stat-card::after { content:""; position:absolute; right:-24px; top:-24px; width:78px; height:78px; border-radius:50%; background:color-mix(in srgb,var(--primary) 10%,transparent); }
html[data-ui-style="modern"] .stat-card .label,html[data-ui-style="modern"] .stat-card .value { position:relative; z-index:1; }
html[data-ui-style="modern"] .btn { border-radius:10px; }
html[data-ui-style="modern"] input,html[data-ui-style="modern"] select,html[data-ui-style="modern"] textarea { border-radius:10px; }
html[data-ui-style="modern"] .table-wrap { border-radius:14px; overflow:auto; }
html[data-ui-style="modern"] .settings-nav-item { border-radius:14px; padding:14px; }
html[data-ui-style="modern"] .settings-nav-icon { border-radius:10px; }
html[data-ui-style="modern"] .sidebar { width:264px; flex-basis:264px; }
html[data-ui-style="modern"] .sidebar-link,html[data-ui-style="modern"] .sidebar-group-toggle { border-radius:10px; }
html[data-ui-style="modern"] .sidebar-submenu a { border-radius:9px; }

html[data-ui-style="aurora"] body,html[data-ui-style="aurora"] .app-main { background:radial-gradient(circle at 78% 0%,rgba(124,58,237,.13),transparent 32%),#f6f5fb; }
html[data-ui-style="aurora"] .sidebar { background:linear-gradient(180deg,#0e0b1f 0%,#17102c 58%,#0d1225 100%); }
html[data-ui-style="aurora"] .card,html[data-ui-style="aurora"] .stat-card { border-color:rgba(124,58,237,.14); border-radius:16px; box-shadow:0 10px 32px rgba(49,24,89,.07); }
html[data-ui-style="aurora"] .stat-card { background:linear-gradient(145deg,#fff 0%,#f7f1ff 100%); }
html[data-ui-style="aurora"] .btn { border-radius:10px; }
html[data-ui-style="aurora"] .sidebar-link.active { background:linear-gradient(90deg,rgba(168,85,247,.28),rgba(124,58,237,.10)); border-left-color:#c084fc; }
html[data-ui-style="aurora"] .sidebar-submenu a.active { background:rgba(168,85,247,.18); }
html[data-theme="dark"][data-ui-style="modern"] body,html[data-theme="dark"][data-ui-style="modern"] .app-main { background:#0b1220; }
html[data-theme="dark"][data-ui-style="modern"] .card,html[data-theme="dark"][data-ui-style="modern"] .stat-card { box-shadow:0 12px 34px rgba(0,0,0,.20); }
html[data-theme="dark"][data-ui-style="modern"] .stat-card { background:linear-gradient(145deg,#111a2b 0%,color-mix(in srgb,var(--primary) 7%,#111a2b) 100%); }
html[data-theme="dark"][data-ui-style="aurora"] body,html[data-theme="dark"][data-ui-style="aurora"] .app-main { background:radial-gradient(circle at 72% -8%,rgba(168,85,247,.19),transparent 30%),radial-gradient(circle at 5% 30%,rgba(37,99,235,.10),transparent 25%),#090817; }
html[data-theme="dark"][data-ui-style="aurora"] .card,html[data-theme="dark"][data-ui-style="aurora"] .stat-card { background:linear-gradient(145deg,rgba(20,15,38,.96),rgba(14,18,38,.98)); border-color:rgba(168,85,247,.18); box-shadow:0 14px 36px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025); }
html[data-theme="dark"][data-ui-style="aurora"] .stat-card::after { background:rgba(168,85,247,.13); }
html[data-theme="dark"][data-ui-style="aurora"] .table-wrap { background:#11102a; border-color:rgba(168,85,247,.15); }
html[data-theme="dark"][data-ui-style="aurora"] th { background:#181431; }
html[data-theme="dark"][data-ui-style="aurora"] tbody tr:hover td { background:#1a1736; }
.appearance-style-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.appearance-style-preview { height:42px; display:block; position:relative; overflow:hidden; border-radius:7px; border:1px solid #dbe3ed; background:#f4f7fb; }
.appearance-style-preview i { position:absolute; left:0; top:0; bottom:0; width:24%; background:#111827; }
.appearance-style-preview b { position:absolute; left:31%; right:7%; top:8px; height:8px; border-radius:4px; background:#fff; border:1px solid #e2e8f0; }
.appearance-style-preview em { position:absolute; left:31%; right:7%; top:24px; height:12px; border-radius:4px; background:#fff; border:1px solid #e2e8f0; }
.style-preview-modern i { background:linear-gradient(#0b1220,#16233b); }
.style-preview-modern b,.style-preview-modern em { border-radius:6px; }
.style-preview-classic i { background:#1e293b; }
.style-preview-classic b,.style-preview-classic em { border-radius:2px; }
.style-preview-aurora { background:linear-gradient(135deg,#0e0b1f,#21133e 55%,#111c3a); border-color:#3b275d; }
.style-preview-aurora i { background:linear-gradient(#120c25,#24133e); }
.style-preview-aurora b { background:rgba(255,255,255,.08); border-color:rgba(192,132,252,.25); }
.style-preview-aurora em { background:linear-gradient(90deg,rgba(168,85,247,.35),rgba(37,99,235,.22)); border-color:rgba(168,85,247,.2); }
.style-preview-ocean{background:linear-gradient(135deg,#071a2b,#0e7490 55%,#22d3ee);border-color:#164e63}.style-preview-ocean i{background:#062235}.style-preview-ocean b{background:rgba(255,255,255,.10);border-color:rgba(103,232,249,.28)}.style-preview-ocean em{background:rgba(34,211,238,.28);border-color:rgba(103,232,249,.22)}
.style-preview-forest{background:linear-gradient(135deg,#071b14,#0b6b4f 55%,#34d399);border-color:#14532d}.style-preview-forest i{background:#061b14}.style-preview-forest b{background:rgba(255,255,255,.10);border-color:rgba(110,231,183,.24)}.style-preview-forest em{background:rgba(52,211,153,.28);border-color:rgba(110,231,183,.22)}
.style-preview-sunset{background:linear-gradient(135deg,#24100c,#9a3412 55%,#f472b6);border-color:#7c2d12}.style-preview-sunset i{background:#24100c}.style-preview-sunset b{background:rgba(255,255,255,.10);border-color:rgba(251,146,60,.25)}.style-preview-sunset em{background:rgba(244,114,182,.28);border-color:rgba(251,146,60,.22)}
.style-preview-midnight{background:linear-gradient(135deg,#090b16,#312e81 55%,#818cf8);border-color:#312e81}.style-preview-midnight i{background:#080b16}.style-preview-midnight b{background:rgba(255,255,255,.09);border-color:rgba(165,180,252,.25)}.style-preview-midnight em{background:rgba(99,102,241,.28);border-color:rgba(165,180,252,.22)}
.style-preview-slate{background:linear-gradient(135deg,#17202b,#475569 55%,#94a3b8);border-color:#334155}.style-preview-slate i{background:#17202b}.style-preview-slate b{background:rgba(255,255,255,.12);border-color:rgba(203,213,225,.28)}.style-preview-slate em{background:rgba(148,163,184,.30);border-color:rgba(203,213,225,.24)}
@media(max-width:760px){.appearance-style-grid{grid-template-columns:1fr 1fr}.appearance-style-grid .appearance-choice:last-child{grid-column:1/-1}}

/* =====================================================================
   Cloud Operations Dashboard — v2.24
   Presentation-only dashboard layer. Existing queries/actions are reused.
   ===================================================================== */
.cloud-dashboard{padding-bottom:32px}
.dashboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:4px 0 24px}
.eyebrow{display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:800;color:var(--primary);margin-bottom:8px}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}
.dashboard-title{margin:0!important;font-size:28px!important;letter-spacing:-.025em!important}
.dashboard-subtitle{margin:7px 0 0;color:var(--muted);font-size:14px;max-width:700px}
.dashboard-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.dashboard-actions form{margin:0!important}
.dashboard-action-primary{background:linear-gradient(135deg,var(--primary),var(--accent))!important;border-color:transparent!important;color:#fff!important}
.dashboard-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.dashboard-kpi{position:relative;display:flex;flex-direction:column;min-height:146px;padding:18px 19px;border:1px solid var(--border);border-radius:18px;background:var(--card);color:var(--text);text-decoration:none;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.dashboard-kpi:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,23,42,.09);border-color:color-mix(in srgb,var(--primary) 20%,var(--border))}
.dashboard-kpi:after{content:"";position:absolute;right:-28px;top:-35px;width:110px;height:110px;border-radius:50%;background:var(--kpi-glow);opacity:.75;pointer-events:none}
.dashboard-kpi.kpi-blue{--kpi-glow:#dbeafe}.dashboard-kpi.kpi-green{--kpi-glow:#dcfce7}.dashboard-kpi.kpi-amber{--kpi-glow:#fef3c7}.dashboard-kpi.kpi-violet{--kpi-glow:#ede9fe}
.kpi-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--primary) 11%,var(--card));color:var(--primary);font-weight:800;font-size:13px;margin-bottom:12px;z-index:1}
.kpi-green .kpi-icon{color:#16a34a;background:#ecfdf3}.kpi-amber .kpi-icon{color:#d97706;background:#fff7ed}.kpi-violet .kpi-icon{color:#7c3aed;background:#f5f3ff}
.kpi-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;z-index:1}.dashboard-kpi strong{font-size:27px;line-height:1.15;letter-spacing:-.025em;margin-top:5px;z-index:1}.kpi-violet strong{font-size:23px}.kpi-meta{font-size:12px;color:var(--muted);margin-top:7px;z-index:1}
.dashboard-resource-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);gap:18px;margin-bottom:18px}
.dashboard-panel{border-radius:18px!important;padding:20px!important}
.dashboard-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}.dashboard-section-heading h2{font-size:16px;margin:2px 0 0;letter-spacing:-.01em}.section-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted)}.text-link{font-size:12px;font-weight:700;color:var(--primary);text-decoration:none;white-space:nowrap}.text-link:hover{text-decoration:underline}
.resource-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.resource-metric{display:flex;align-items:center;gap:11px;padding:14px;border-radius:13px;background:var(--bg);border:1px solid var(--border)}.resource-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;letter-spacing:.03em;flex:0 0 40px}.resource-icon.blue{background:#eff6ff;color:#2563eb}.resource-icon.violet{background:#f5f3ff;color:#7c3aed}.resource-icon.cyan{background:#ecfeff;color:#0891b2}.resource-metric strong{display:block;font-size:15px}.resource-metric span{display:block;font-size:11px;color:var(--muted);margin-top:3px}.resource-strip{display:flex;justify-content:space-between;gap:12px;margin-top:13px;padding-top:13px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}.resource-strip b{color:var(--text)}
.platform-list{display:flex;flex-direction:column;gap:15px}.platform-row-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:7px}.platform-row-top strong{font-size:12px}.progress-track{height:7px;border-radius:999px;background:color-mix(in srgb,var(--muted) 12%,var(--card));overflow:hidden}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent))}.progress-large{height:9px}.migration-summary{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}.migration-summary strong{font-size:25px;letter-spacing:-.02em}.migration-summary span{font-size:12px;color:var(--muted)}
.dashboard-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}.dashboard-table table{margin-top:-3px}.dashboard-table th{font-size:10px;text-transform:uppercase;letter-spacing:.06em}.dashboard-table td{padding-top:12px;padding-bottom:12px}
.activity-list{display:flex;flex-direction:column}.activity-item{display:flex;align-items:center;gap:11px;padding:11px 3px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)}.activity-item:last-child{border-bottom:0}.activity-item:hover{background:color-mix(in srgb,var(--primary) 3%,transparent);border-radius:9px}.activity-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8;flex:0 0 8px}.activity-dot.running{background:#16a34a;box-shadow:0 0 0 4px #dcfce7}.activity-dot.deleted{background:#dc2626;box-shadow:0 0 0 4px #fee2e2}.activity-copy{display:flex;flex-direction:column;min-width:0;flex:1}.activity-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-copy small{font-size:11px;color:var(--muted);margin-top:3px}.activity-item time{font-size:10px;color:var(--muted);white-space:nowrap}
.sync-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.sync-card{padding:14px;border:1px solid var(--border);border-radius:13px;background:var(--bg)}.sync-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.sync-card-top strong{font-size:13px}.status-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.status-chip.success{background:#ecfdf3;color:#15803d}.status-chip.danger{background:#fef2f2;color:#b91c1c}.sync-stats{display:flex;gap:13px;margin:14px 0 9px;font-size:10px;color:var(--muted)}.sync-stats b{color:var(--text);font-size:13px;margin-right:2px}.sync-card>small{font-size:10px;color:var(--muted)}
.empty-state.compact{display:flex;align-items:center;gap:10px;padding:20px 5px;color:var(--muted)}.empty-state.compact>span{font-size:22px;color:var(--primary)}.empty-state.compact strong{color:var(--text);font-size:12px}.empty-state.compact small{font-size:11px}
.dashboard-sync-result{margin-bottom:18px}
html[data-theme="dark"] .dashboard-kpi:after{opacity:.12}html[data-theme="dark"] .resource-metric,html[data-theme="dark"] .sync-card{background:color-mix(in srgb,var(--card) 78%,#000)}html[data-theme="dark"] .kpi-green .kpi-icon{background:rgba(22,163,74,.14)}html[data-theme="dark"] .kpi-amber .kpi-icon{background:rgba(217,119,6,.14)}html[data-theme="dark"] .kpi-violet .kpi-icon{background:rgba(124,58,237,.14)}html[data-theme="dark"] .status-chip.success{background:rgba(22,163,74,.14)}html[data-theme="dark"] .status-chip.danger{background:rgba(220,38,38,.14)}
html[data-ui-style="aurora"] .dashboard-kpi,html[data-ui-style="aurora"] .dashboard-panel{box-shadow:0 12px 34px rgba(49,24,89,.08)}
@media(max-width:1050px){.dashboard-kpis{grid-template-columns:repeat(2,1fr)}.dashboard-resource-grid,.dashboard-content-grid{grid-template-columns:1fr}.sync-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.dashboard-hero{align-items:flex-start;flex-direction:column}.dashboard-actions{justify-content:flex-start}.dashboard-kpis{grid-template-columns:1fr}.resource-metrics{grid-template-columns:1fr}.sync-grid{grid-template-columns:1fr}.resource-strip{flex-direction:column}.dashboard-title{font-size:24px!important}}
@media(prefers-reduced-motion:reduce){.dashboard-kpi{transition:none}.dashboard-kpi:hover{transform:none}}

/* =====================================================================
   v2.25 — VM Operations Center
   Presentation only. No business logic or API behaviour.
   ===================================================================== */
.vm-operations-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:16px; }
.vm-operations-head h1 { margin-bottom:4px; }
.vm-operations-subtitle { margin:0; max-width:760px; }
.vm-status-strip { display:flex; gap:8px; overflow-x:auto; margin:0 0 14px; padding:3px 0 5px; scrollbar-width:thin; }
.vm-status-tab { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; border:1px solid var(--border); background:var(--card); color:var(--muted); border-radius:999px; padding:8px 13px; text-decoration:none; box-shadow:var(--shadow-sm); }
.vm-status-tab:hover { color:var(--text); border-color:var(--primary); text-decoration:none; }
.vm-status-tab strong { color:var(--text); font-size:.78rem; }
.vm-status-tab.active { color:var(--primary-dark); border-color:var(--primary); background:var(--primary-soft); }
.vm-status-tab.active.running { border-color:#16a34a; background:#f0fdf4; color:#166534; }
.vm-status-tab.active.stopped { border-color:#d97706; background:#fffbeb; color:#92400e; }
.vm-status-tab.active.error { border-color:#dc2626; background:#fef2f2; color:#991b1b; }
.vm-status-tab.active.deleted { border-color:#94a3b8; background:#f8fafc; color:#475569; }
#vmTable thead th { position:sticky; top:0; z-index:2; }
#vmTable tbody tr { transition:none; }
#vmTable tbody tr:hover td { background:color-mix(in srgb,var(--primary) 4%,var(--card)); }

html[data-theme="dark"] .vm-status-tab { background:#111a2b; border-color:#2b3a50; color:#94a3b8; }
html[data-theme="dark"] .vm-status-tab strong { color:#e2e8f0; }
html[data-theme="dark"] .vm-status-tab.active { background:color-mix(in srgb,var(--primary) 14%,#111a2b); color:#bfdbfe; }
html[data-theme="dark"] .vm-status-tab.active.running { background:rgba(22,163,74,.12); color:#86efac; }
html[data-theme="dark"] .vm-status-tab.active.stopped { background:rgba(217,119,6,.12); color:#fcd34d; }
html[data-theme="dark"] .vm-status-tab.active.error { background:rgba(220,38,38,.12); color:#fca5a5; }
html[data-theme="dark"] .vm-status-tab.active.deleted { background:#172235; color:#cbd5e1; }

@media(max-width:760px){
  .vm-operations-head { display:block; }
  .vm-operations-head .vm-list-actions { margin-top:12px; }
  .settings-nav { position:static; }
}

/* =====================================================================
   v2.26 — VM Detail / Operations Center
   Presentation-only layer. Existing forms, actions and data are unchanged.
   ===================================================================== */
.vm-detail-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:4px 0 18px;border-bottom:1px solid var(--border);margin-bottom:14px}
.vm-detail-eyebrow{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-weight:700;margin-bottom:8px}
.vm-detail-eyebrow a{color:var(--primary);text-decoration:none}.vm-detail-eyebrow a:hover{text-decoration:underline}
.vm-detail-title-row{display:flex;align-items:center;gap:14px}.vm-detail-title{margin:0!important;font-size:28px!important;letter-spacing:-.03em!important}.vm-detail-subtitle{margin:5px 0 0;color:var(--muted);font-size:13px}.vm-detail-state{display:inline-flex;align-items:center;gap:6px;padding:7px 10px}.vm-state-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 12%,transparent)}.vm-back-btn{white-space:nowrap}
.vm-detail-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 16px}.vm-detail-metric{min-width:0;padding:13px 15px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:var(--shadow-sm)}.vm-detail-metric>span{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.vm-detail-metric strong{display:block;margin-top:6px;font-size:18px;line-height:1.2;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vm-detail-metric strong small{font-size:11px;color:var(--muted);font-weight:600}.vm-detail-metric .metric-value-text{font-size:14px;letter-spacing:0}
.vm-detail-nav{position:sticky;top:0;z-index:10;display:flex;gap:3px;overflow-x:auto;margin:0 0 18px;padding:5px;border:1px solid var(--border);border-radius:13px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);scrollbar-width:thin}.vm-detail-nav a{padding:8px 12px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}.vm-detail-nav a:hover{color:var(--text);background:var(--primary-soft)}.vm-detail-section{scroll-margin-top:78px}
html[data-theme="dark"] .vm-detail-metric{background:#111a2b;border-color:#263449}html[data-theme="dark"] .vm-detail-nav{background:rgba(17,26,43,.9);border-color:#263449}
html[data-ui-style="modern"] .vm-detail-metric{border-radius:16px}html[data-ui-style="aurora"] .vm-detail-metric{box-shadow:0 10px 30px rgba(49,24,89,.07)}
@media(max-width:1050px){.vm-detail-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.vm-detail-hero{display:block}.vm-back-btn{display:inline-flex;margin-top:12px}.vm-detail-title-row{align-items:flex-start;flex-direction:column;gap:9px}.vm-detail-title{font-size:24px!important}.vm-detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.vm-detail-nav{position:static}}
@media(max-width:460px){.vm-detail-metrics{grid-template-columns:1fr}.vm-detail-metric strong{font-size:16px}}

/* v2.27 VM lifecycle operations UI — presentation only */
.vm-operations-card{position:relative;overflow:hidden;margin-bottom:18px}
.vm-operations-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px}
.vm-operations-header h3{margin:2px 0 3px!important}
.vm-section-kicker{font-size:9px;line-height:1;font-weight:850;letter-spacing:.12em;color:var(--primary);text-transform:uppercase}
.vm-provider-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-muted,var(--card));font-size:11px;font-weight:750;color:var(--text);white-space:nowrap}
.vm-provider-dot{width:7px;height:7px;border-radius:50%;background:var(--success,#16a34a);box-shadow:0 0 0 4px color-mix(in srgb,var(--success,#16a34a) 12%,transparent)}
.vm-action-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.vm-action-toolbar form{min-width:0}
.vm-action{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:11px 12px;border:1px solid var(--border);border-radius:13px;background:var(--card);color:var(--text);cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease}
.vm-action:hover:not(:disabled){border-color:color-mix(in srgb,var(--primary) 45%,var(--border));background:var(--primary-soft);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.vm-action:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.vm-action:disabled{opacity:.45;cursor:not-allowed}
.vm-action-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;border-radius:9px;background:var(--primary-soft);color:var(--primary);font-size:13px;font-weight:850}
.vm-action-primary{border-color:color-mix(in srgb,var(--primary) 28%,var(--border))}
.vm-action strong,.vm-action small{display:block}
.vm-action strong{font-size:12px;line-height:1.2}
.vm-action small{margin-top:2px;color:var(--muted);font-size:10px;line-height:1.25}
.vm-recent-actions{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.vm-subsection-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.vm-subsection-head h4{margin:0!important;font-size:13px}
html[data-theme="dark"] .vm-action{background:#111a2b;border-color:#263449}
html[data-theme="dark"] .vm-provider-pill{background:#111a2b;border-color:#263449}
html[data-ui-style="modern"] .vm-action{border-radius:15px}
html[data-ui-style="aurora"] .vm-operations-card{box-shadow:0 12px 34px rgba(49,24,89,.08)}
@media(max-width:900px){.vm-action-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.vm-operations-header{display:block}.vm-provider-pill{margin-top:10px}.vm-action-toolbar{grid-template-columns:1fr}}

/* v2.28 Create VM provider-neutral UI */
.create-vm-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}
.create-vm-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.create-vm-steps{padding:12px;position:sticky;top:18px}
.create-vm-step{display:flex;gap:12px;align-items:flex-start;padding:14px 12px;border-radius:12px;color:var(--text-muted,#6b7280)}
.create-vm-step span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-muted,#f3f4f6);font-weight:700;font-size:13px;flex:0 0 auto}
.create-vm-step strong,.create-vm-step small{display:block}.create-vm-step strong{font-size:14px;color:var(--text,#111827)}.create-vm-step small{margin-top:3px;line-height:1.4}.create-vm-step.active{background:color-mix(in srgb,var(--accent,#4f46e5) 9%,transparent);color:var(--text,#111827)}
.create-vm-step.active span{background:var(--accent,#4f46e5);color:#fff}
.create-vm-form{padding:26px}.section-head h2{margin:4px 0 6px}.provider-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.provider-choice{position:relative;display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:16px;border:1px solid var(--border,#e5e7eb);border-radius:14px;background:var(--surface,#fff);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.provider-choice:hover{border-color:var(--accent,#4f46e5);transform:translateY(-1px)}.provider-choice.selected{border-color:var(--accent,#4f46e5);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#4f46e5) 14%,transparent)}
.provider-choice input{position:absolute;opacity:0}.provider-choice-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent,#4f46e5) 11%,var(--surface,#fff));color:var(--accent,#4f46e5);font-weight:800;font-size:12px}
.provider-choice strong,.provider-choice small{display:block}.provider-choice small{margin-top:4px;color:var(--text-muted,#6b7280);line-height:1.4}.provider-choice b{font-size:11px;padding:5px 8px;border-radius:999px;background:var(--surface-muted,#f3f4f6);color:var(--text-muted,#6b7280);white-space:nowrap}
.provider-choice.selected b{background:color-mix(in srgb,var(--accent,#4f46e5) 11%,transparent);color:var(--accent,#4f46e5)}
.create-vm-divider{height:1px;background:var(--border,#e5e7eb);margin:26px 0}.form-section-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.form-section h3{margin:5px 0 16px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600}.form-grid input,.form-grid select{width:100%;box-sizing:border-box}
.create-vm-hierarchy-grid{grid-template-columns:1fr 1fr}.create-vm-scope-summary{margin-top:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent,#4f46e5) 18%,var(--border,#e5e7eb));border-radius:10px;background:color-mix(in srgb,var(--accent,#4f46e5) 6%,var(--surface,#fff));font-size:12px;color:var(--text-muted,#6b7280)}.create-vm-scope-summary strong{color:var(--text,#111827)}
.create-vm-notice{display:flex;gap:12px;margin-top:26px;padding:15px;border-radius:12px;background:color-mix(in srgb,var(--accent,#4f46e5) 7%,var(--surface,#fff));border:1px solid color-mix(in srgb,var(--accent,#4f46e5) 18%,var(--border,#e5e7eb))}.create-vm-notice>span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent,#4f46e5);color:#fff;font-weight:800;flex:0 0 auto}.create-vm-notice strong{font-size:13px}.create-vm-notice p{margin:3px 0 0;color:var(--text-muted,#6b7280);font-size:13px;line-height:1.5}.create-vm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border,#e5e7eb)}
@media(max-width:900px){.create-vm-layout{grid-template-columns:1fr}.create-vm-steps{position:static;display:grid;grid-template-columns:repeat(5,1fr);overflow:auto}.create-vm-step{min-width:130px}.form-section-grid,.provider-choice-grid{grid-template-columns:1fr}}
@media(max-width:640px){.create-vm-hero{align-items:flex-start;flex-direction:column}.create-vm-form{padding:18px}.create-vm-steps{display:block}.form-grid{grid-template-columns:1fr}}
.create-vm-result{margin-bottom:18px}.full-field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600}.full-field input,.full-field select{width:100%;box-sizing:border-box}.create-vm-form code{font-size:12px;padding:2px 5px;border-radius:5px;background:var(--surface-muted,#f3f4f6)}

/* =====================================================================
   v2.31 — Adaptive Enterprise Shell
   Presentation-only UI improvements. No business logic or DB changes.
   - Full-size logo with company name below it
   - Persistent desktop sidebar collapse / expand control
   - Theme-aware semantic colors for shared UI components
   ===================================================================== */
:root {
  --surface: var(--card);
  --surface-raised: var(--card);
  --surface-muted: #f8fafc;
  --text-strong: #0f172a;
  --text-body: var(--text);
  --text-muted: var(--muted);
  --text-subtle: #94a3b8;
  --border-strong: #cbd5e1;
  --table-head: #f8fafc;
  --table-hover: #f8fafc;
  --input-bg: #ffffff;
  --input-text: var(--text);
  --control-bg: #ffffff;
  --control-text: var(--text);
  --control-hover: #f8fafc;
  --surface-accent: var(--primary-soft);
}

/* Brand block: give the uploaded logo enough room to be completely visible. */
.sidebar-brand {
  position: relative;
  min-height: 142px;
  padding: 18px 38px 17px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
.sidebar-brand-mark {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border-radius: 14px;
}
.sidebar-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
  border-radius: 8px;
  padding: 0;
}
.sidebar-logo-fallback { font-size: 17px; }
.sidebar-brand-copy {
  width: 100%;
  min-width: 0;
  align-items: center;
  text-align: center;
}
.sidebar-brand-copy strong {
  width: 100%;
  color: #f8fafc;
  font-size: .98rem;
  line-height: 1.22;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.sidebar-brand-copy span {
  width: 100%;
  color: #94a3b8;
  font-size: .69rem;
  line-height: 1.25;
  margin-top: 4px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.sidebar-collapse-toggle {
  position: absolute;
  top: 10px;
  right: 9px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.sidebar-collapse-toggle svg { width: 15px; height: 15px; }
.sidebar-collapse-toggle:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar.collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); }

/* Collapsed desktop navigation. */
@media (min-width: 861px) {
  html[data-sidebar-collapsed="1"] .sidebar { width:82px; flex-basis:82px; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-brand { min-height:92px; padding:16px 8px 12px; gap:0; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-brand-mark { width:52px; height:52px; flex-basis:52px; border-radius:12px; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-logo { max-width:44px; max-height:44px; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-brand-copy { display:none; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-collapse-toggle svg { transform:rotate(180deg); }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-nav { padding:15px 10px; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-link,
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-group-toggle { justify-content:center; padding:11px 8px; min-height:44px; border-left:0; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-link span,
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-group-toggle span,
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-chevron { display:none; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-submenu { display:none !important; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-footer { padding:12px 9px; flex-direction:column; gap:8px; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-user { justify-content:center; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-user-copy { display:none; }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-user-actions { margin-left:0; }

  .sidebar { transition: width .18s ease, flex-basis .18s ease; }
  .sidebar.collapsed {
    width: 82px;
    flex-basis: 82px;
  }
  .sidebar.collapsed .sidebar-brand {
    min-height: 92px;
    padding: 16px 8px 12px;
    gap: 0;
  }
  .sidebar.collapsed .sidebar-brand-mark {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 12px;
  }
  .sidebar.collapsed .sidebar-logo {
    max-width: 44px;
    max-height: 44px;
  }
  .sidebar.collapsed .sidebar-brand-copy { display: none; }
  .sidebar.collapsed .sidebar-collapse-toggle { top: 8px; right: 5px; }
  .sidebar.collapsed .sidebar-nav { padding: 15px 10px; }
  .sidebar.collapsed .sidebar-link,
  .sidebar.collapsed .sidebar-group-toggle {
    justify-content: center;
    padding: 11px 8px;
    min-height: 44px;
    border-left: 0;
  }
  .sidebar.collapsed .sidebar-link span,
  .sidebar.collapsed .sidebar-group-toggle span,
  .sidebar.collapsed .sidebar-chevron { display: none; }
  .sidebar.collapsed .sidebar-link svg,
  .sidebar.collapsed .sidebar-group-toggle svg:first-child { width: 20px; height: 20px; }
  .sidebar.collapsed .sidebar-submenu { display: none !important; }
  .sidebar.collapsed .sidebar-group.active > .sidebar-group-toggle { border-left: 0; }
  .sidebar.collapsed .sidebar-footer {
    padding: 12px 9px;
    flex-direction: column;
    gap: 8px;
  }
  .sidebar.collapsed .sidebar-user { justify-content: center; }
  .sidebar.collapsed .sidebar-user-copy { display: none; }
  .sidebar.collapsed .sidebar-user-actions { margin-left: 0; }
  .sidebar.collapsed .sidebar-theme-toggle,
  .sidebar.collapsed .sidebar-logout { width: 30px; text-align: center; }
}

/* Semantic, theme-aware shared text/surface controls. */
body,
.app-main,
.container,
.card,
.stat-card,
.dashboard-kpi,
.dashboard-panel,
.vm-detail-metric,
.vm-detail-nav,
.vm-action,
.vm-provider-pill,
.migration-card,
.migration-panel,
.migration-table,
.table-wrap,
.filters { color: var(--text-body); }

h1, h2, h3, h4, h5, h6,
.stat-card .value,
.dashboard-kpi strong,
.resource-metric strong,
.platform-row-top strong,
.activity-copy strong,
.sync-card-top strong,
.vm-detail-title,
.vm-detail-metric strong,
.vm-action strong,
.vm-provider-pill,
.migration-card h2,
.migration-card h3 { color: var(--text-strong); }

.muted,
.dashboard-subtitle,
.kpi-label,
.kpi-meta,
.resource-metric span,
.activity-copy small,
.activity-item time,
.sync-card > small,
.section-kicker,
.dashboard-section-heading .section-kicker,
.vm-detail-subtitle,
.vm-detail-eyebrow,
.vm-detail-metric > span,
.vm-action small,
form label,
.table-wrap-hint { color: var(--text-muted); }

table th { background: var(--table-head); color: var(--text-muted); border-bottom-color: var(--border); }
table td { color: var(--text-body); border-bottom-color: var(--border); }
tbody tr:hover td { background: var(--table-hover); }

input, select, textarea {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
.btn-secondary { background: var(--control-bg); color: var(--control-text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--control-hover); color: var(--text-strong); }

.settings-nav-item,
.appearance-card,
.appearance-choice,
.segmented-control,
.appearance-preview-bar,
.builder-check-grid,
.dashboard-panel,
.resource-metric,
.sync-card { color: var(--text-body); }
.settings-nav-item { background: var(--surface); border-color: var(--border); }
.settings-nav-item strong,
.appearance-card-title,
.appearance-choice strong,
.appearance-preview-bar strong { color: var(--text-strong); }
.settings-nav-item small,
.appearance-card-help,
.appearance-choice small,
.appearance-preview-bar span { color: var(--text-muted); }
.appearance-choice,
.segmented-control { background: var(--surface); border-color: var(--border); }
.segmented-control button { color: var(--text-muted); }
.appearance-preview-bar,
.builder-check-grid,
.dashboard-resource-grid .resource-metric,
.sync-card { background: var(--surface-muted); border-color: var(--border); }

/* Keep the always-dark navigation legible while allowing the application
   content to follow the selected Light/Dark theme. */
.sidebar,
.sidebar-link,
.sidebar-group-toggle,
.sidebar-submenu a,
.sidebar-user { color: #cbd5e1; }

html[data-theme="dark"] {
  --surface: #111a2b;
  --surface-raised: #172235;
  --surface-muted: #0d1727;
  --text-strong: #f1f5f9;
  --text-body: #dbe4f0;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --border: #263449;
  --border-strong: #34445d;
  --table-head: #172235;
  --table-hover: #162238;
  --input-bg: #0d1727;
  --input-text: #e2e8f0;
  --control-bg: #172235;
  --control-text: #dbe4f0;
  --control-hover: #1e2a3d;
  --surface-accent: color-mix(in srgb, var(--primary) 14%, #111a2b);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .dashboard-kpi,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .vm-detail-metric,
html[data-theme="dark"] .vm-detail-nav,
html[data-theme="dark"] .vm-action,
html[data-theme="dark"] .vm-provider-pill,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .settings-nav-item,
html[data-theme="dark"] .appearance-card,
html[data-theme="dark"] .appearance-choice,
html[data-theme="dark"] .appearance-preview-bar,
html[data-theme="dark"] .builder-check-grid { color: var(--text-body); }

html[data-theme="dark"] .settings-nav-item:hover,
html[data-theme="dark"] .appearance-choice:hover,
html[data-theme="dark"] .appearance-choice.selected { background: var(--surface-raised); }
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .resource-metric,
html[data-theme="dark"] .sync-card { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .dashboard-kpi:after { opacity: .12; }

/* Light-theme semantic defaults for the components that historically used
   fixed gray/white presentation values. */
html[data-theme="light"] {
  --text-strong: #0f172a;
  --text-body: #172033;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --border: #e5eaf1;
  --border-strong: #cbd5e1;
  --table-head: #f8fafc;
  --table-hover: #f8fafc;
  --input-bg: #ffffff;
  --input-text: #172033;
  --control-bg: #ffffff;
  --control-text: #172033;
  --control-hover: #f8fafc;
  --surface-muted: #f8fafc;
}

@media (max-width: 860px) {
  .sidebar-brand { min-height: 118px; padding: 14px 48px 14px 20px; flex-direction: row; text-align: left; justify-content: flex-start; }
  .sidebar-brand-mark { width: 56px; height: 56px; flex-basis: 56px; }
  .sidebar-logo { max-width: 48px; max-height: 48px; }
  .sidebar-brand-copy { align-items: flex-start; text-align: left; }
  .sidebar-brand-copy strong { text-align: left; }
  .sidebar-brand-copy span { text-align: left; }
  .sidebar-collapse-toggle { display: none; }
}

/* v2.31 semantic accents used by legacy inline presentation blocks. */
:root {
  --progress-track: #e2e8f0;
  --success-soft: #ecfdf3;
  --success-strong: #15803d;
  --danger-soft: #fef2f2;
  --danger-strong: #b91c1c;
  --warning-soft: #fffbeb;
  --warning-border: #fde68a;
}
html[data-theme="dark"] {
  --progress-track: #263449;
  --success-soft: rgba(22,163,74,.14);
  --success-strong: #86efac;
  --danger-soft: rgba(220,38,38,.14);
  --danger-strong: #fca5a5;
  --warning-soft: rgba(217,119,6,.14);
  --warning-border: #7c5a24;
}

/* Migration lifecycle tiles were previously tied to --card, which remains
   white in the dark theme for legacy compatibility. Make the lifecycle
   control explicitly semantic so its text always has sufficient contrast. */
.migration-pipeline > .migration-stage {
  min-width: 130px;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  padding: 12px;
  background: var(--surface) !important;
  color: var(--text-body);
}
.migration-stage strong,
.migration-stage-count { color: var(--text-strong); }
.migration-stage-count { font-size: 1.3rem; font-weight: 750; margin-top: 8px; }

/* =====================================================================
   v2.32 — Adaptive shell refinement + unified provider capacity
   Presentation and dashboard aggregation only. No schema changes.
   ===================================================================== */

/* The uploaded brand is a wide wordmark. Give it a landscape canvas rather
   than squeezing it into a square icon; contain keeps the complete artwork
   visible regardless of the source image dimensions. */
.sidebar-brand-mark {
  width: 154px;
  height: 78px;
  flex: 0 0 78px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.sidebar-logo {
  display: block;
  width: 142px;
  height: 68px;
  max-width: calc(100% - 12px);
  max-height: calc(100% - 10px);
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
  padding: 0;
  background: transparent;
}
.sidebar-brand-copy strong { font-size: 1.02rem; line-height: 1.18; }
.sidebar-brand-copy span { font-size: .72rem; }

/* Collapsed mode: keep the whole wordmark visible inside a compact square. */
@media (min-width: 861px) {
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-brand-mark,
  .sidebar.collapsed .sidebar-brand-mark {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    border-radius: 12px;
  }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-logo,
  .sidebar.collapsed .sidebar-logo {
    width: 54px;
    height: 54px;
    max-width: 54px;
    max-height: 54px;
  }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-brand,
  .sidebar.collapsed .sidebar-brand {
    min-height: 98px;
    padding: 18px 8px 12px;
  }
}

/* Dark mode must never inherit white legacy surfaces with light text. */
html[data-theme="dark"] {
  --card: #111a2b;
  --bg: #0b1220;
  --text: #dbe4f0;
  --muted: #94a3b8;
}
html[data-theme="dark"] .dashboard-kpi,
html[data-theme="dark"] .resource-metric,
html[data-theme="dark"] .sync-card,
html[data-theme="dark"] .provider-capacity-card {
  background: var(--surface);
  color: var(--text-body);
  border-color: var(--border);
}
html[data-theme="dark"] .dashboard-kpi strong,
html[data-theme="dark"] .resource-metric strong,
html[data-theme="dark"] .provider-capacity-card strong,
html[data-theme="dark"] .provider-resource-top strong {
  color: var(--text-strong);
}
html[data-theme="dark"] .dashboard-kpi .kpi-label,
html[data-theme="dark"] .dashboard-kpi .kpi-meta,
html[data-theme="dark"] .resource-metric span,
html[data-theme="dark"] .provider-capacity-intro,
html[data-theme="dark"] .capacity-overview-intro,
html[data-theme="dark"] .provider-resource-meta,
html[data-theme="dark"] .provider-capacity-source,
html[data-theme="dark"] .provider-capacity-note {
  color: var(--text-muted);
}
html[data-theme="dark"] .kpi-icon,
html[data-theme="dark"] .resource-icon {
  background: var(--surface-raised);
  border: 1px solid var(--border);
}
html[data-theme="dark"] .kpi-green .kpi-icon { color: #86efac; }
html[data-theme="dark"] .kpi-amber .kpi-icon { color: #fcd34d; }
html[data-theme="dark"] .kpi-violet .kpi-icon { color: #c4b5fd; }
html[data-theme="dark"] .resource-icon.blue { color: #93c5fd; }
html[data-theme="dark"] .resource-icon.violet { color: #c4b5fd; }
html[data-theme="dark"] .resource-icon.cyan { color: #67e8f9; }

/* Provider capacity widget */
.capacity-overview-panel { margin-bottom: 18px; }
.capacity-overview-intro {
  margin: -7px 0 18px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  max-width: 920px;
}
.provider-capacity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 13px;
}
.provider-capacity-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
}
.provider-capacity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--border);
}
.provider-capacity-head > div { min-width: 0; }
.provider-capacity-head strong {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-capacity-kicker {
  display: block;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  color: var(--primary);
}
.provider-capacity-source {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}
.provider-resource-list { display: grid; gap: 13px; margin-top: 12px; }
.provider-resource-row { min-width: 0; }
.provider-resource-top,
.provider-resource-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.provider-resource-top {
  color: var(--text-body);
  font-size: 11px;
  font-weight: 700;
}
.provider-resource-top strong { font-size: 12px; }
.provider-resource-meta {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 9px;
}
.provider-capacity-track {
  height: 7px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--progress-track);
}
.provider-capacity-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.provider-capacity-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.45;
}
@media (max-width: 860px) {
  .sidebar-brand-mark { width: 92px; height: 62px; flex-basis: 62px; }
  .sidebar-logo { width: 84px; height: 54px; max-width: 84px; max-height: 54px; }
}

/* =====================================================================
   Authentication experience — v2.33
   Presentation-only. Existing login/register processing is unchanged.
   ===================================================================== */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 12%, rgba(37,99,235,.18), transparent 32%),
    radial-gradient(circle at 86% 82%, rgba(124,58,237,.16), transparent 34%),
    var(--bg);
  color: var(--text-body, var(--text));
}
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, .85fr) minmax(520px, 1.15fr);
}
.auth-brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px clamp(34px, 5vw, 84px);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 10%, rgba(37,99,235,.28), transparent 34%),
    linear-gradient(145deg, #080b18 0%, #11132a 48%, #17102b 100%);
  color: #fff;
}
.auth-brand-panel::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  right: -210px; bottom: -220px;
  border: 1px solid rgba(129,140,248,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(129,140,248,.025), 0 0 0 120px rgba(129,140,248,.02);
  pointer-events: none;
}
.auth-brand { position: relative; z-index: 1; max-width: 390px; }
.auth-logo-wrap {
  width: 132px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  margin-bottom: 22px;
}
.auth-logo { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.auth-logo-fallback {
  font-size: 1.45rem; font-weight: 800; color: #1d4ed8;
}
.auth-brand h1 { color: #fff; font-size: clamp(1.65rem, 2.4vw, 2.25rem); line-height: 1.08; margin: 0 0 8px; letter-spacing: -.035em; }
.auth-brand-subtitle { color: #aab7cf; margin: 0; font-size: .98rem; font-weight: 600; }
.auth-brand-content { position: relative; z-index: 1; max-width: 560px; margin: auto 0; padding: 54px 0; }
.auth-brand-content h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 3.35rem); line-height: 1.04; letter-spacing: -.045em; margin: 12px 0 18px; max-width: 560px; }
.auth-brand-content p { color: #b8c4da; font-size: 1rem; line-height: 1.7; max-width: 500px; margin: 0; }
.auth-eyebrow { display: inline-block; color: #7ea4ff; font-size: .73rem; line-height: 1; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.auth-feature-list { display: grid; gap: 10px; margin-top: 28px; color: #d7e1f4; font-size: .9rem; font-weight: 600; }
.auth-brand-footer { position: relative; z-index: 1; color: #75829a; font-size: .78rem; }
.auth-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px clamp(24px, 7vw, 110px);
  background: var(--surface, var(--card));
}
.auth-card {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 46px);
  background: var(--surface, var(--card));
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 22px 70px rgba(15,23,42,.10);
}
.auth-card-register { max-width: 680px; }
.auth-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.auth-card-head h2 { color: var(--text-strong, var(--text)); font-size: 2rem; letter-spacing: -.035em; margin: 9px 0 6px; }
.auth-card-head p { color: var(--text-muted, var(--muted)); margin: 0; line-height: 1.5; }
.auth-theme-toggle {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-raised, var(--bg));
  color: var(--text-body, var(--text)); cursor: pointer; font-size: 1rem;
}
.auth-theme-toggle:hover { border-color: var(--primary); color: var(--primary); }
.auth-alert { margin-bottom: 20px; }
.auth-form label { color: var(--text-muted, var(--muted)); margin-top: 15px; }
.auth-form label:first-of-type { margin-top: 0; }
.auth-form input, .auth-form select {
  background: var(--control-bg, var(--card)); color: var(--text-body, var(--text));
  border-color: var(--border); min-height: 48px; border-radius: 11px; padding: 11px 13px;
}
.auth-form input:focus, .auth-form select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); outline: none; }
.auth-form input::placeholder { color: var(--text-subtle, #94a3b8); }
.auth-field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.auth-field-row label { margin-top: 0; }
.auth-field-row a { font-size: .82rem; font-weight: 650; }
.auth-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-form-grid label { margin-top: 15px; }
.auth-help { font-weight: 400; color: var(--text-subtle, #94a3b8); }
.auth-submit {
  width: 100%; min-height: 50px; margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 11px; font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 24px rgba(37,99,235,.22);
}
.auth-submit:hover { transform: translateY(-1px); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; color: var(--text-subtle, #94a3b8); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: var(--border); flex: 1; }
.auth-switch { text-align: center; margin: 0; color: var(--text-muted, var(--muted)); font-size: .9rem; }
.auth-switch a { font-weight: 700; }
.auth-security-note { width: min(100%, 560px); margin: 16px auto 0; text-align: center; color: var(--text-subtle, #94a3b8); font-size: .75rem; }
.auth-success-panel {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 14px;
  background: var(--success-soft, #f0fdf4); border: 1px solid rgba(22,163,74,.25); color: var(--text-body, var(--text));
}
.auth-success-icon { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #16a34a; color: #fff; font-weight: 800; }
.auth-success-panel strong { color: var(--text-strong, var(--text)); }
.auth-success-panel p { color: var(--text-muted, var(--muted)); margin: 5px 0 0; line-height: 1.5; font-size: .86rem; }

html[data-theme="dark"] .auth-content { background: #0a0918; }
html[data-theme="dark"] .auth-card { background: #101023; border-color: rgba(124,58,237,.24); box-shadow: 0 24px 80px rgba(0,0,0,.30); }
html[data-theme="dark"] .auth-form input, html[data-theme="dark"] .auth-form select { background: #0d1727; color: #dbe4f0; border-color: #2b3a50; }
html[data-theme="dark"] .auth-success-panel { background: rgba(22,163,74,.10); border-color: rgba(74,222,128,.22); }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand-panel { min-height: 340px; padding: 34px 28px; }
  .auth-brand-content { padding: 34px 0 20px; margin: 0; }
  .auth-brand-content h2 { font-size: 2rem; }
  .auth-brand-footer { display: none; }
  .auth-content { padding: 28px 18px 40px; }
}
@media (max-width: 560px) {
  .auth-brand-panel { min-height: 300px; }
  .auth-logo-wrap { width: 112px; height: 78px; border-radius: 16px; }
  .auth-brand h1 { font-size: 1.45rem; }
  .auth-brand-content { display: none; }
  .auth-card { padding: 24px 20px; border-radius: 18px; }
  .auth-form-grid { grid-template-columns: 1fr; gap: 0; }
}

/* =====================================================================
   v2.34 — Native landscape brand treatment
   Keep the uploaded rectangular wordmark rectangular. The previous shell
   wrapped it in an almost-square canvas, which made a wide logo appear
   visually boxed/cropped. These overrides preserve the source aspect ratio.
   ===================================================================== */
.sidebar-brand-mark {
  width: 228px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  padding: 0 14px;
  box-sizing: border-box;
}
.sidebar-logo {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}
.sidebar-brand-copy { margin-top: 0; }

/* Collapsed navigation still shows the complete wordmark, scaled down
   proportionally instead of placing it inside a square logo tile. */
@media (min-width: 861px) {
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-brand-mark,
  .sidebar.collapsed .sidebar-brand-mark {
    width: 58px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 9px;
    padding: 0 4px;
  }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-logo,
  .sidebar.collapsed .sidebar-logo {
    width: 50px;
    height: auto;
    max-width: 50px;
    max-height: 34px;
    border-radius: 0;
  }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-brand,
  .sidebar.collapsed .sidebar-brand {
    min-height: 84px;
    padding: 14px 5px 10px;
  }
}

/* Authentication branding uses the uploaded logo's natural landscape form.
   The white presentation surface remains rectangular rather than square. */
.auth-logo-wrap {
  width: min(280px, 100%);
  height: 104px;
  box-sizing: border-box;
  padding: 10px 18px;
  border-radius: 18px;
}
.auth-logo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 860px) {
  .sidebar-brand-mark {
    width: 190px;
    height: 68px;
    flex-basis: 68px;
    padding: 0 12px;
  }
  .sidebar-logo {
    width: 100%;
    max-width: 100%;
    max-height: 58px;
  }
}

/* =====================================================================
   v2.35 — Intrinsic Logo Adaptation
   Branding containers follow the uploaded image's natural aspect ratio.
   Square uploads remain square; landscape/portrait uploads remain proportional.
   ===================================================================== */
.sidebar-brand-mark {
  width: fit-content;
  height: fit-content;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 96px;
  flex: 0 1 auto;
  aspect-ratio: auto;
  padding: 8px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sidebar-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 210px;
  max-height: 80px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

@media (min-width: 861px) {
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-brand-mark,
  .sidebar.collapsed .sidebar-brand-mark {
    width: auto;
    height: auto;
    max-width: 62px;
    max-height: 62px;
    min-width: 0;
    min-height: 0;
    flex: 0 1 auto;
    padding: 5px;
  }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-logo,
  .sidebar.collapsed .sidebar-logo {
    width: auto;
    height: auto;
    max-width: 52px;
    max-height: 52px;
  }
}

.auth-logo-wrap {
  width: fit-content;
  height: fit-content;
  max-width: min(100%, 360px);
  max-height: 150px;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.auth-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 330px;
  max-height: 126px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .auth-logo-wrap {
    max-width: 100%;
    max-height: 110px;
    padding: 9px;
  }
  .auth-logo {
    max-width: 260px;
    max-height: 92px;
  }
}


/* =====================================================================
   v2.36 — Logo boundary correction
   Keep the uploaded image proportional while constraining BOTH the logo
   artwork and its presentation surface to the actual sidebar content box.
   This prevents wide wordmarks from being clipped at the right edge.
   ===================================================================== */
.sidebar-brand {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}
.sidebar-brand-mark {
  width: auto;
  max-width: calc(100% - 16px);
  height: auto;
  max-height: 96px;
  box-sizing: border-box;
  flex: 0 1 auto;
  overflow: hidden;
}
.sidebar-brand-mark .sidebar-logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80px;
  flex: 0 1 auto;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 861px) {
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-brand-mark,
  .sidebar.collapsed .sidebar-brand-mark {
    max-width: 62px;
    max-height: 62px;
  }
  html[data-sidebar-collapsed="1"] .sidebar .sidebar-brand-mark .sidebar-logo,
  .sidebar.collapsed .sidebar-brand-mark .sidebar-logo {
    max-width: 52px;
    max-height: 52px;
  }
}

@media (max-width: 860px) {
  .sidebar-brand {
    max-width: 100%;
  }
  .sidebar-brand-mark {
    max-width: calc(100% - 8px);
    max-height: 68px;
  }
  .sidebar-brand-mark .sidebar-logo {
    max-width: 100%;
    max-height: 58px;
  }
}


/* =====================================================================
   v2.40 — Expanded theme library
   Browser-local visual themes. These rules are presentation-only and
   intentionally use the shared semantic variables so the selected style
   propagates across the complete application shell.
   ===================================================================== */
html[data-ui-style="ocean"] body,
html[data-ui-style="ocean"] .app-main { background:linear-gradient(180deg,#f5fbff 0%,#eef7ff 100%); }
html[data-ui-style="ocean"] .sidebar { background:linear-gradient(180deg,#071a2b 0%,#0b2d45 58%,#08344a 100%); }
html[data-ui-style="ocean"] .card,html[data-ui-style="ocean"] .stat-card,html[data-ui-style="ocean"] .dashboard-panel { border-color:rgba(8,145,178,.18); box-shadow:0 10px 30px rgba(3,105,161,.08); }
html[data-ui-style="ocean"] .stat-card { background:linear-gradient(145deg,#fff,#eefaff); }
html[data-ui-style="ocean"] .sidebar-link.active { background:linear-gradient(90deg,rgba(6,182,212,.24),rgba(14,116,144,.10)); }
html[data-theme="dark"][data-ui-style="ocean"] body,html[data-theme="dark"][data-ui-style="ocean"] .app-main { background:radial-gradient(circle at 80% -5%,rgba(6,182,212,.16),transparent 32%),#07131f; }
html[data-theme="dark"][data-ui-style="ocean"] .card,html[data-theme="dark"][data-ui-style="ocean"] .stat-card,html[data-theme="dark"][data-ui-style="ocean"] .dashboard-panel { background:linear-gradient(145deg,#0d1d2b,#0b1724); border-color:rgba(34,211,238,.16); }

html[data-ui-style="forest"] body,
html[data-ui-style="forest"] .app-main { background:linear-gradient(180deg,#f5fbf7 0%,#edf8f1 100%); }
html[data-ui-style="forest"] .sidebar { background:linear-gradient(180deg,#071b14 0%,#0b2b20 60%,#0d3325 100%); }
html[data-ui-style="forest"] .card,html[data-ui-style="forest"] .stat-card,html[data-ui-style="forest"] .dashboard-panel { border-color:rgba(5,150,105,.16); box-shadow:0 10px 30px rgba(6,95,70,.07); }
html[data-ui-style="forest"] .stat-card { background:linear-gradient(145deg,#fff,#effbf5); }
html[data-theme="dark"][data-ui-style="forest"] body,html[data-theme="dark"][data-ui-style="forest"] .app-main { background:radial-gradient(circle at 80% -5%,rgba(16,185,129,.15),transparent 32%),#071510; }
html[data-theme="dark"][data-ui-style="forest"] .card,html[data-theme="dark"][data-ui-style="forest"] .stat-card,html[data-theme="dark"][data-ui-style="forest"] .dashboard-panel { background:linear-gradient(145deg,#0d2119,#0b1914); border-color:rgba(52,211,153,.15); }

html[data-ui-style="sunset"] body,
html[data-ui-style="sunset"] .app-main { background:linear-gradient(180deg,#fffaf5 0%,#fff3ea 100%); }
html[data-ui-style="sunset"] .sidebar { background:linear-gradient(180deg,#24100c 0%,#351714 58%,#2b1220 100%); }
html[data-ui-style="sunset"] .card,html[data-ui-style="sunset"] .stat-card,html[data-ui-style="sunset"] .dashboard-panel { border-color:rgba(244,114,182,.14); box-shadow:0 10px 30px rgba(154,52,18,.07); }
html[data-ui-style="sunset"] .stat-card { background:linear-gradient(145deg,#fff,#fff5ed); }
html[data-theme="dark"][data-ui-style="sunset"] body,html[data-theme="dark"][data-ui-style="sunset"] .app-main { background:radial-gradient(circle at 80% -5%,rgba(249,115,22,.16),transparent 32%),#160b0d; }
html[data-theme="dark"][data-ui-style="sunset"] .card,html[data-theme="dark"][data-ui-style="sunset"] .stat-card,html[data-theme="dark"][data-ui-style="sunset"] .dashboard-panel { background:linear-gradient(145deg,#241315,#190e11); border-color:rgba(251,146,60,.16); }

html[data-ui-style="midnight"] body,
html[data-ui-style="midnight"] .app-main { background:#f3f5fa; }
html[data-ui-style="midnight"] .sidebar { background:linear-gradient(180deg,#090b16 0%,#11152a 60%,#11182f 100%); }
html[data-ui-style="midnight"] .card,html[data-ui-style="midnight"] .stat-card,html[data-ui-style="midnight"] .dashboard-panel { border-color:rgba(99,102,241,.15); box-shadow:0 10px 34px rgba(15,23,42,.07); }
html[data-ui-style="midnight"] .stat-card { background:linear-gradient(145deg,#fff,#f5f6ff); }
html[data-theme="dark"][data-ui-style="midnight"] body,html[data-theme="dark"][data-ui-style="midnight"] .app-main { background:radial-gradient(circle at 80% -8%,rgba(99,102,241,.20),transparent 30%),#060813; }
html[data-theme="dark"][data-ui-style="midnight"] .card,html[data-theme="dark"][data-ui-style="midnight"] .stat-card,html[data-theme="dark"][data-ui-style="midnight"] .dashboard-panel { background:linear-gradient(145deg,#101426,#0b0f1d); border-color:rgba(129,140,248,.17); }

html[data-ui-style="slate"] body,
html[data-ui-style="slate"] .app-main { background:#f5f7fa; }
html[data-ui-style="slate"] .sidebar { background:linear-gradient(180deg,#17202b 0%,#1d2936 100%); }
html[data-ui-style="slate"] .card,html[data-ui-style="slate"] .stat-card,html[data-ui-style="slate"] .dashboard-panel { border-color:#d5dde6; box-shadow:0 7px 24px rgba(15,23,42,.06); }
html[data-ui-style="slate"] .stat-card { background:#fff; }
html[data-theme="dark"][data-ui-style="slate"] body,html[data-theme="dark"][data-ui-style="slate"] .app-main { background:#0e141b; }
html[data-theme="dark"][data-ui-style="slate"] .card,html[data-theme="dark"][data-ui-style="slate"] .stat-card,html[data-theme="dark"][data-ui-style="slate"] .dashboard-panel { background:#151d26; border-color:#2a3643; }

/* Theme-wide semantic surfaces: keep the selected accent visible beyond links. */
html[data-ui-style] .btn:not(.btn-secondary),
html[data-ui-style] .dashboard-action-primary,
html[data-ui-style] .segmented-control button.selected { background:linear-gradient(135deg,var(--primary),var(--accent)); }
html[data-ui-style] .progress-track span { background:linear-gradient(90deg,var(--primary),var(--accent)); }
html[data-ui-style] .sidebar-link.active { border-left-color:var(--primary); }
html[data-ui-style] .eyebrow,.text-link { color:var(--primary); }
html[data-ui-style] .sidebar-brand-copy strong { color:var(--text-strong,var(--text)); }

/* Expanded accent swatches */
.accent-swatch[data-accent-value="blue"] span{background:#2563eb}.accent-swatch[data-accent-value="indigo"] span{background:#4f46e5}.accent-swatch[data-accent-value="violet"] span{background:#7c3aed}.accent-swatch[data-accent-value="fuchsia"] span{background:#c026d3}.accent-swatch[data-accent-value="rose"] span{background:#e11d48}.accent-swatch[data-accent-value="coral"] span{background:#f04f3e}.accent-swatch[data-accent-value="amber"] span{background:#d97706}.accent-swatch[data-accent-value="gold"] span{background:#b7791f}.accent-swatch[data-accent-value="emerald"] span{background:#059669}.accent-swatch[data-accent-value="teal"] span{background:#0d9488}.accent-swatch[data-accent-value="cyan"] span{background:#0891b2}.accent-swatch[data-accent-value="sky"] span{background:#0284c7}

/* =====================================================================
   v2.42 — Professional Button System
   Theme-aware, accessible controls inspired by current SaaS design-system
   patterns: clear hierarchy, subtle depth, restrained motion.
   ===================================================================== */
html[data-theme="dark"] .btn-secondary { background:color-mix(in srgb,var(--card) 86%,#000); color:var(--text); border-color:color-mix(in srgb,var(--border) 90%,#fff); box-shadow:0 3px 10px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035); }
html[data-theme="dark"] .btn-secondary:hover { background:color-mix(in srgb,var(--primary) 9%,var(--card)); border-color:color-mix(in srgb,var(--primary) 40%,var(--border)); }
html[data-theme="dark"] .btn-ghost:hover { background:color-mix(in srgb,var(--primary) 12%,transparent); }
html[data-theme="dark"] .btn-outline-danger { border-color:rgba(248,113,113,.38); }
html[data-ui-style="classic"] .btn { border-radius:8px; box-shadow:0 2px 7px rgba(15,23,42,.08); }
html[data-ui-style="classic"] .btn:hover { transform:none; }
html[data-ui-style="aurora"] .btn { box-shadow:0 7px 22px color-mix(in srgb,var(--primary) 24%,transparent), 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent); }
html[data-ui-style="aurora"] .btn-secondary { box-shadow:0 4px 15px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.04); }
@media(prefers-reduced-motion:reduce) {
  .btn, .btn::after, .btn .btn-arrow { transition:none !important; }
  .btn:hover { transform:none; }
}

/* v2.50 Operations Center */
.ops-page-head{align-items:flex-start}.ops-page-head .page-actions{display:flex;gap:10px;align-items:center}.ops-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:18px 0}.ops-kpi{padding:18px 20px;border:1px solid var(--border);background:var(--surface);border-radius:18px;box-shadow:var(--shadow-sm)}.ops-kpi span{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.ops-kpi strong{display:block;font-size:1.8rem;line-height:1.15;margin:8px 0 4px;color:var(--text)}.ops-kpi small{color:var(--muted)}.ops-number-critical{color:#dc2626!important}.ops-number-warning{color:#d97706!important}.ops-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:18px}.ops-main-card,.ops-side-card,.ops-section-card{overflow:hidden}.ops-side-stack{display:flex;flex-direction:column;gap:18px}.ops-live-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:var(--surface-muted);font-size:.76rem;font-weight:700;color:var(--muted);white-space:nowrap}.ops-live-badge i{width:7px;height:7px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12)}.ops-detection-list{display:flex;flex-direction:column}.ops-detection{display:flex;gap:13px;align-items:center;padding:15px 18px;border-top:1px solid var(--border)}.ops-detection:first-child{border-top:0}.ops-severity-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:#64748b}.ops-critical .ops-severity-dot{background:#dc2626}.ops-warning .ops-severity-dot{background:#d97706}.ops-info .ops-severity-dot{background:#2563eb}.ops-detection-body{min-width:0;flex:1}.ops-detection-top{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.ops-detection-top strong{font-size:.92rem}.ops-type{font-size:.67rem;font-weight:800;letter-spacing:.08em;color:var(--muted)}.ops-detection p{margin:5px 0 0;color:var(--muted);font-size:.84rem}.ops-empty{text-align:center;padding:56px 24px}.ops-empty-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:rgba(22,163,74,.1);color:#16a34a;font-size:1.4rem;font-weight:800}.ops-status-line{display:flex;align-items:center;gap:8px;font-size:1rem;margin-bottom:10px}.ops-status-line span{font-size:.8rem}.ops-success{color:#16a34a}.ops-critical{color:#dc2626}.ops-meta{font-size:.8rem;color:var(--muted);margin-top:6px}.ops-integration-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border)}.ops-integration-row:first-of-type{border-top:0}.status-pill.muted{background:var(--surface-muted);color:var(--muted)}.ops-progress{display:inline-block;width:110px;height:8px;border-radius:999px;background:var(--surface-muted);overflow:hidden;vertical-align:middle;margin-right:8px}.ops-progress span{display:block;height:100%;border-radius:inherit}.ops-progress span.success{background:#16a34a}.ops-progress span.warning{background:#d97706}.ops-progress span.danger{background:#dc2626}.ops-footnote{margin:16px 0 28px;padding:13px 16px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);font-size:.8rem;background:var(--surface-muted)}
@media (max-width:1100px){.ops-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ops-layout{grid-template-columns:1fr}}
@media (max-width:720px){.ops-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-page-head .page-actions{width:100%;flex-wrap:wrap}.ops-page-head .page-actions .btn{flex:1}.ops-detection{align-items:flex-start;flex-wrap:wrap}.ops-detection .btn{margin-left:22px}.ops-progress{width:80px}}

/* =====================================================================
   v2.51 — Navigation and dashboard consistency
   ===================================================================== */
.single-nav-group { margin: 0; }
.single-nav-group > .sidebar-link { width:100%; box-sizing:border-box; }
.sidebar-group.single-nav-group.active > .sidebar-link { background:linear-gradient(90deg,rgba(37,99,235,.22),rgba(37,99,235,.10)); border-left-color:#60a5fa; }
.dashboard-kpis-five { grid-template-columns: repeat(5, minmax(0,1fr)); }
.dashboard-kpi.kpi-red { --kpi-glow:#fee2e2; }
.dashboard-kpi.kpi-red .kpi-icon { color:#dc2626; background:#fef2f2; }
html[data-theme="dark"] .dashboard-kpi.kpi-red .kpi-icon { background:rgba(220,38,38,.14); color:#fca5a5; }
@media(max-width:1250px){ .dashboard-kpis-five { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1050px){ .dashboard-kpis-five { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px){ .dashboard-kpis-five { grid-template-columns:1fr; } }

/* v2.51 — Dedicated integration modules */
.integration-page-head{margin-bottom:20px}
.integration-nav-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}
.integration-module-card{position:relative;display:flex;align-items:flex-start;gap:14px;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.integration-module-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 35%,var(--border));box-shadow:0 12px 30px rgba(15,23,42,.10);text-decoration:none}
.integration-module-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,var(--card));color:var(--primary);font-weight:800}
.integration-module-card h2{margin:2px 0 4px;font-size:17px}.integration-module-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.integration-module-arrow{margin-left:auto;color:var(--primary);font-size:20px}
.integration-config-card,.integration-coverage-card{margin-bottom:18px}
.integration-config-grid{display:grid;gap:9px}.integration-config-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}.integration-config-row>div{min-width:0}.integration-config-row strong{display:block;font-size:13px}.integration-config-row small{display:block;margin-top:3px;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.integration-message{padding:0 14px 10px;font-size:11px}
.integration-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.integration-kpi{min-height:108px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm)}.integration-kpi span{display:block;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.integration-kpi strong{display:block;font-size:26px;letter-spacing:-.03em;margin-top:8px}.integration-kpi small{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.integration-progress{display:flex;align-items:center;gap:14px}.integration-progress .progress-track{flex:1}.integration-progress>strong{min-width:58px;text-align:right}.integration-breakdown{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}.integration-breakdown b{color:var(--text)}.integration-note{padding:14px 16px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));background:color-mix(in srgb,var(--primary) 4%,var(--card));border-radius:12px;color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:18px}
html[data-theme="dark"] .integration-module-card,html[data-theme="dark"] .integration-kpi,html[data-theme="dark"] .integration-config-row{background:#111a2b;border-color:#263449}
@media(max-width:900px){.integration-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.integration-nav-grid{grid-template-columns:1fr}}
@media(max-width:620px){.integration-kpi-grid{grid-template-columns:1fr}.integration-config-row{align-items:flex-start;flex-direction:column}}

/* =====================================================================
   v2.53 — Unified KPI cards + configurable migration lifecycle
   ===================================================================== */
.ops-kpi-grid.dashboard-kpis-five { margin-top: 18px; }
.ops-kpi.dashboard-kpi { min-height: 146px; }
.ops-kpi.dashboard-kpi .kpi-icon { font-weight: 800; }
.ops-kpi.dashboard-kpi strong.ops-number-critical { color: var(--danger, #dc2626) !important; }
.ops-kpi.dashboard-kpi strong.ops-number-warning { color: var(--warning, #d97706) !important; }
.ops-kpi.dashboard-kpi:hover { text-decoration: none; }
.migration-kpi-grid .stat-card { min-height: 116px; }
.migration-config-card { margin-top: 20px; }
.migration-status-add { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-muted); }
.form-hint { display:block; margin-top:6px; color:var(--text-muted); font-size:.75rem; line-height:1.45; }
html[data-theme="dark"] .migration-status-add { background: color-mix(in srgb, var(--surface) 88%, #000); }
.ops-kpi.dashboard-kpi .kpi-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; z-index:1; }
.ops-kpi.dashboard-kpi .kpi-meta { font-size:12px; font-weight:400; color:var(--muted); text-transform:none; letter-spacing:normal; margin-top:7px; z-index:1; }
.ops-kpi.dashboard-kpi strong { font-size:27px; line-height:1.15; letter-spacing:-.025em; margin-top:5px; margin-bottom:0; z-index:1; color:var(--text-strong); }
.ops-kpi.dashboard-kpi .kpi-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; margin-bottom:10px; }
/* v2.54 monitoring / ITSM phase */
.ops-monitor-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px}
.ops-monitor-tile{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:var(--card);color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.ops-monitor-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 28%,var(--border));box-shadow:0 12px 28px rgba(15,23,42,.08);color:var(--text)}
.ops-monitor-tile strong{font-size:28px;line-height:1.05;color:var(--text)}
.ops-monitor-tile small{font-size:11px;color:var(--muted)}
.metric-danger{color:#ef4444!important}
.table-sub{display:block;margin-top:3px;color:var(--muted);font-size:10px}
html[data-theme="dark"] .metric-danger{color:#f87171!important}
@media(max-width:760px){.ops-monitor-strip{grid-template-columns:1fr}}
.integration-live-count{display:block;margin-top:7px;color:var(--primary);font-size:10px;font-weight:750}


/* =====================================================================
   v2.55 — Global automatic theme propagation
   The appearance selected in Settings is a global application preference.
   Every page/component must consume the same semantic theme tokens; no
   page-specific theme selection is required.
   ===================================================================== */
html { background: var(--bg); color: var(--text); color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --card: #111a2b;
  --border: #263449;
  --text: #dbe4f0;
  --muted: #94a3b8;
  --surface: #111a2b;
  --surface-raised: #172235;
  --surface-muted: #0d1727;
  --text-strong: #f1f5f9;
  --text-body: #dbe4f0;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --border-strong: #34445d;
  --table-head: #172235;
  --table-hover: #162238;
  --input-bg: #0d1727;
  --input-text: #e2e8f0;
  --control-bg: #172235;
  --control-text: #dbe4f0;
  --control-hover: #1e2a3d;
  --surface-accent: color-mix(in srgb, var(--primary) 14%, #111a2b);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f9;
  --card: #ffffff;
  --border: #e5eaf1;
  --text: #172033;
  --muted: #64748b;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f8fafc;
  --text-strong: #0f172a;
  --text-body: #172033;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --border-strong: #cbd5e1;
  --table-head: #f8fafc;
  --table-hover: #f8fafc;
  --input-bg: #ffffff;
  --input-text: #172033;
  --control-bg: #ffffff;
  --control-text: #172033;
  --control-hover: #f8fafc;
}

/* Legacy and module-specific surfaces inherit the global theme automatically. */
.card,
.stat-card,
.table-wrap,
.filters,
.integration-kpi,
.integration-module-card,
.integration-config-card,
.integration-coverage-card,
.integration-note,
.migration-card,
.migration-panel,
.migration-table,
.migration-config-card,
.ops-monitor-tile,
.ops-side-card,
.ops-main-card,
.ops-section-card,
.dashboard-panel,
.dashboard-kpi,
.provider-capacity-card,
.vm-detail-metric,
.vm-detail-nav,
.vm-action,
.vm-provider-pill,
.settings-nav-item,
.appearance-card,
.appearance-choice,
.appearance-preview-bar,
.builder-check-grid,
.resource-metric,
.sync-card {
  background: var(--surface);
  color: var(--text-body);
  border-color: var(--border);
}

.stat-card .value,
.integration-kpi strong,
.integration-module-card h2,
.migration-card h2,
.migration-card h3,
.migration-stage strong,
.migration-stage-count,
.ops-monitor-tile strong,
.card h1,
.card h2,
.card h3,
.card h4,
.stat-card .label,
.integration-kpi span,
.integration-kpi small,
.integration-config-row strong,
.settings-nav-item strong,
.appearance-card-title,
.appearance-choice strong {
  color: var(--text-strong);
}

.integration-config-row,
.integration-config-grid,
.migration-status-add,
.builder-check-grid,
.dashboard-builder-filters {
  background: var(--surface-muted);
  color: var(--text-body);
  border-color: var(--border);
}

.integration-config-row small,
.integration-module-card p,
.integration-note,
.integration-breakdown,
.integration-kpi small,
.migration-card .muted,
.migration-panel .muted,
.migration-table .muted,
.migration-status-add .form-hint,
.ops-monitor-tile small,
.card .muted,
.stat-card .label,
.table-wrap-hint,
.empty-state,
.section-kicker {
  color: var(--text-muted);
}

.integration-module-card:hover,
.ops-monitor-tile:hover,
.card:hover,
.stat-card:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.integration-module-icon {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

.integration-config-row { background: var(--surface-muted); }
.integration-note { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }

.migration-pipeline > .migration-stage,
.migration-stage {
  background: var(--surface) !important;
  color: var(--text-body);
  border-color: var(--border) !important;
}

.migration-kpi-grid .stat-card { background: var(--surface); }

/* Keep semantic status colors visible on both themes. */
.stat-card.running .value { color: var(--success-strong); }
.stat-card.stopped .value { color: var(--warning-strong, #d97706); }
.stat-card.deleted .value { color: var(--danger-strong); }
.metric-danger { color: var(--danger-strong) !important; }

html[data-theme="dark"] .stat-card.running .value { color: #86efac; }
html[data-theme="dark"] .stat-card.stopped .value { color: #fcd34d; }
html[data-theme="dark"] .stat-card.deleted .value { color: #fca5a5; }
html[data-theme="dark"] .metric-danger { color: #f87171 !important; }

/* All standard controls inherit the selected application theme. */
input, select, textarea,
.builder-check-grid,
.dashboard-builder-filters {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border);
}

/* Prevent hard-coded light table treatment from leaking into dark mode. */
th { background: var(--table-head); color: var(--text-muted); border-bottom-color: var(--border); }
td { color: var(--text-body); border-bottom-color: var(--border); }
tbody tr:hover td { background: var(--table-hover); }

/* Login/recovery pages use the same global appearance preference. */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-panel,
html[data-theme="dark"] .auth-form-card {
  background: var(--surface);
  color: var(--text-body);
  border-color: var(--border);
}
html[data-theme="dark"] .auth-card h1,
html[data-theme="dark"] .auth-card h2,
html[data-theme="dark"] .auth-card h3 { color: var(--text-strong); }


/* v2.56 global semantic UX layer */
:root { --button-ghost-text: var(--text); }
[data-theme="dark"] { --button-ghost-text: #f8fafc; }
.soc-tabs { display:flex; gap:8px; flex-wrap:wrap; margin: 0 0 18px; }
.soc-tab { display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); text-decoration:none; font-weight:700; }
.soc-tab:hover,.soc-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.soc-form-card { margin-top:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
.form-grid label { margin:0; }
.form-grid .span-2 { grid-column:1 / -1; }
.posture-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.posture-grid > div { padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--card-soft,var(--card)); }
.posture-grid strong { display:block; font-size:2rem; color:var(--text); }
.posture-grid span { color:var(--muted); }
@media(max-width:800px){.form-grid,.posture-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}}

/* =====================================================================
   v2.57 — Global UX Agent / Universal KPI Surface
   All KPI/stat/summary boxes use the same theme-aware visual language.
   The UX agent adds .ux-kpi to recognized KPI components so future
   module pages inherit this treatment automatically.
   ===================================================================== */
.ux-kpi,
.stat-card.ux-kpi,
.integration-kpi.ux-kpi,
.dashboard-kpi.ux-kpi,
.posture-grid > div.ux-kpi,
.ops-kpi.ux-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 146px;
  padding: 18px 20px;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: var(--surface, var(--card)) !important;
  color: var(--text-body, var(--text)) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ux-kpi::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -35px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--ux-kpi-glow, color-mix(in srgb, var(--primary) 9%, var(--surface)));
  opacity: .78;
  pointer-events: none;
  z-index: -1;
}
.ux-kpi:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border)) !important;
  box-shadow: var(--shadow-md) !important;
}
.ux-kpi .label,
.ux-kpi > span:first-child,
.ux-kpi .kpi-label,
.ux-kpi > small:first-child,
.ux-kpi .integration-kpi-label {
  color: var(--text-muted, var(--muted)) !important;
  font-size: .72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .07em;
  position: relative;
  z-index: 1;
}
.ux-kpi .value,
.ux-kpi > strong,
.ux-kpi .integration-kpi-value {
  color: var(--text-strong, var(--text)) !important;
  font-size: clamp(1.65rem, 2.3vw, 2rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  margin-top: 7px;
  position: relative;
  z-index: 1;
}
.ux-kpi .meta,
.ux-kpi .kpi-meta,
.ux-kpi small,
.ux-kpi p {
  color: var(--text-muted, var(--muted));
  position: relative;
  z-index: 1;
}
.ux-kpi.kpi-blue { --ux-kpi-glow: #dbeafe; }
.ux-kpi.kpi-green,
.ux-kpi.running { --ux-kpi-glow: #dcfce7; }
.ux-kpi.kpi-amber,
.ux-kpi.stopped { --ux-kpi-glow: #fef3c7; }
.ux-kpi.kpi-red,
.ux-kpi.deleted { --ux-kpi-glow: #fee2e2; }
.ux-kpi.kpi-violet { --ux-kpi-glow: #ede9fe; }
.ux-kpi.ux-tone-critical { --ux-kpi-glow: #fee2e2; }
.ux-kpi.ux-tone-warning { --ux-kpi-glow: #fef3c7; }
.ux-kpi.ux-tone-info { --ux-kpi-glow: #ede9fe; }
.ux-kpi.ux-tone-success { --ux-kpi-glow: #dcfce7; }

/* Existing module-specific KPI grids inherit the universal component. */
.migration-kpi-grid .stat-card,
.integration-kpi-grid .integration-kpi,
.posture-grid > div {
  position: relative;
  min-width: 0;
  min-height: 146px;
  padding: 18px 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: var(--surface, var(--card)) !important;
  color: var(--text-body, var(--text)) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}
.migration-kpi-grid .stat-card::after,
.integration-kpi-grid .integration-kpi::after,
.posture-grid > div::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -35px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  opacity: .72;
  pointer-events: none;
}
.migration-kpi-grid .stat-card:hover,
.integration-kpi-grid .integration-kpi:hover,
.posture-grid > div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border)) !important;
  box-shadow: var(--shadow-md) !important;
}
.migration-kpi-grid .stat-card .label,
.integration-kpi-grid .integration-kpi span,
.posture-grid > div span {
  color: var(--text-muted) !important;
}
.migration-kpi-grid .stat-card .value,
.integration-kpi-grid .integration-kpi strong,
.posture-grid > div strong {
  color: var(--text-strong) !important;
  position: relative;
  z-index: 1;
}
html[data-theme="dark"] .ux-kpi.kpi-blue,
html[data-theme="dark"] .ux-kpi.kpi-green,
html[data-theme="dark"] .ux-kpi.kpi-amber,
html[data-theme="dark"] .ux-kpi.kpi-red,
html[data-theme="dark"] .ux-kpi.kpi-violet,
html[data-theme="dark"] .ux-kpi.running,
html[data-theme="dark"] .ux-kpi.stopped,
html[data-theme="dark"] .ux-kpi.deleted {
  --ux-kpi-glow: color-mix(in srgb, var(--primary) 14%, var(--surface));
}
html[data-theme="dark"] .migration-kpi-grid .stat-card::after,
html[data-theme="dark"] .integration-kpi-grid .integration-kpi::after,
html[data-theme="dark"] .posture-grid > div::after {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

/* Normalize common legacy white surfaces so theme changes propagate without
   page-specific overrides. */
.table-wrap,
.builder-check-grid,
.dashboard-builder-filters,
.sync-card,
.integration-config-row,
.integration-note,
.settings-panel .card {
  background: var(--surface, var(--card));
  color: var(--text-body, var(--text));
  border-color: var(--border);
}

@media (max-width: 900px) {
  .migration-kpi-grid .stat-card,
  .integration-kpi-grid .integration-kpi,
  .posture-grid > div { min-height: 132px; }
}

/* =====================================================================
   v2.58 — Internal Defender / SOC integration
   ===================================================================== */
.ux-kpi-icon{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  font-size:15px;font-weight:800;margin-bottom:13px;
  background:color-mix(in srgb,var(--primary) 9%,var(--surface,var(--card)));
  color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 12%,var(--border));
  position:relative;z-index:1;
}
.ux-tone-critical .ux-kpi-icon{background:color-mix(in srgb,var(--danger) 10%,var(--surface,var(--card)));color:var(--danger)}
.ux-tone-warning .ux-kpi-icon{background:color-mix(in srgb,var(--warning) 11%,var(--surface,var(--card)));color:var(--warning)}
.ux-tone-success .ux-kpi-icon{background:color-mix(in srgb,var(--success) 10%,var(--surface,var(--card)));color:var(--success)}
.ux-tone-info .ux-kpi-icon{background:color-mix(in srgb,#7c3aed 9%,var(--surface,var(--card)));color:#7c3aed}
.ux-tone-primary .ux-kpi-icon{background:color-mix(in srgb,var(--primary) 9%,var(--surface,var(--card)));color:var(--primary)}
.defender-kpis .integration-kpi{min-height:146px}
.soc-defender-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.defender-control-list{display:grid;gap:12px}
.defender-control-list>div{
  display:grid;grid-template-columns:220px 1fr;gap:4px 14px;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.defender-control-list>div:last-child{border-bottom:0}
.defender-control-list strong{color:var(--text-strong,var(--text))}
.defender-control-list span,.defender-control-list small{color:var(--muted);line-height:1.5}
.defender-control-list small{grid-column:2}
@media(max-width:760px){.defender-control-list>div{grid-template-columns:1fr}.defender-control-list small{grid-column:auto}}
html[data-theme="dark"] .ux-tone-info .ux-kpi-icon{color:#a78bfa}

/* v2.59 — universal KPI surface hardening + duplicate-icon guard */
.ux-kpi-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--primary) 8%,var(--surface));color:var(--primary);font-weight:800;font-size:1rem;margin-bottom:10px;position:relative;z-index:1}
.ux-kpi .kpi-icon + .ux-kpi-icon,.ux-kpi .ops-kpi-icon + .ux-kpi-icon,.ux-kpi .integration-kpi-icon + .ux-kpi-icon{display:none!important}
.ux-kpi.kpi-red .ux-kpi-icon,.ux-kpi.ux-tone-critical .ux-kpi-icon{background:color-mix(in srgb,var(--danger) 9%,var(--surface));color:var(--danger)}
.ux-kpi.kpi-green .ux-kpi-icon,.ux-kpi.ux-tone-success .ux-kpi-icon{background:color-mix(in srgb,var(--success) 9%,var(--surface));color:var(--success)}
.ux-kpi.kpi-amber .ux-kpi-icon,.ux-kpi.ux-tone-warning .ux-kpi-icon{background:color-mix(in srgb,var(--warning) 10%,var(--surface));color:var(--warning)}
.ux-kpi.kpi-violet .ux-kpi-icon,.ux-kpi.ux-tone-info .ux-kpi-icon{background:color-mix(in srgb,#7c3aed 9%,var(--surface));color:#7c3aed}
.stat-card,.integration-kpi,.posture-grid>div,.resource-metric,.provider-capacity-card,.metric-card{border-radius:18px!important;background:var(--surface,var(--card))!important;border-color:var(--border)!important;color:var(--text)!important;box-shadow:var(--shadow-sm)!important}
.tool-safety-banner{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;margin:0 0 20px;border:1px solid color-mix(in srgb,var(--warning) 28%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--warning) 7%,var(--surface));color:var(--text)}
.tool-safety-banner span{color:var(--muted)}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:20px}.tool-group{min-width:0}.tool-card{border:1px solid var(--border);border-radius:16px;background:var(--surface-muted);padding:16px;margin-top:12px}.tool-card-head{display:flex;justify-content:space-between;gap:14px}.tool-card-head strong{font-size:1rem}.tool-card-head p{margin:5px 0 0;color:var(--muted);font-size:.82rem}.tool-status{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--success);font-weight:800;white-space:nowrap}.tool-card label{display:block;margin-top:12px;color:var(--muted);font-size:.8rem;font-weight:700}.tool-card input,.tool-card select{margin-top:5px}.tool-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.tool-confirm{font-size:.72rem!important}.tool-result-card{margin-bottom:20px}.tool-output{max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:var(--surface-muted);border:1px solid var(--border);padding:14px;border-radius:12px;color:var(--text);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.check-row{display:flex!important;align-items:center;gap:8px}.check-row input{width:auto!important;margin:0!important}
@media(max-width:900px){.tool-grid{grid-template-columns:1fr}}

/* v2.60 — Admin Tools runtime diagnostics */
.tool-runtime-status{margin:12px 0 18px;padding:10px 14px;border:1px solid var(--border,#d8deea);border-radius:12px;background:var(--surface-2,#f8fafc);color:var(--text-muted,#64748b);font-size:.9rem}
.tool-runtime-status strong{color:var(--text,#0f172a)}
.tool-runtime-status .danger-text{color:var(--danger,#dc2626);font-weight:700}

/* v2.62 — Deployment Center, feed registry and tool implementation continuation */
.deploy-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:20px}.deploy-card{min-width:0}.deploy-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:16px 0 20px}.deploy-steps div{padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-muted);display:flex;flex-direction:column;gap:7px}.deploy-steps b{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}.deploy-steps span{font-size:.75rem;color:var(--muted);font-weight:700}.deploy-form label,.feed-form label{display:block;margin-top:14px;color:var(--text-strong);font-weight:700}.deploy-form input,.feed-form input,.feed-form select,.feed-form textarea{margin-top:6px}.deploy-note,.deploy-post{margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-muted);display:flex;flex-direction:column;gap:5px}.deploy-note span,.deploy-post span{color:var(--muted)}.deploy-result{margin-bottom:20px}.deploy-result.danger{border-color:color-mix(in srgb,var(--danger) 30%,var(--border))}.deploy-summary{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted)}.tool-result-implementation{margin-top:16px;padding:14px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--primary) 4%,var(--surface));display:flex;align-items:end;gap:12px;flex-wrap:wrap}.tool-result-implementation label{display:block;min-width:260px;font-size:.8rem;color:var(--muted);font-weight:700}.tool-result-implementation input{margin-top:6px}.feed-core-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.feed-core-grid>div{padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface-muted);display:flex;flex-direction:column;gap:5px}.feed-core-grid strong{font-size:1rem;color:var(--text-strong)}.feed-core-grid span,.feed-core-grid small{color:var(--muted)}.feed-form{max-width:900px}.page-head-actions{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}@media(max-width:1000px){.deploy-grid{grid-template-columns:1fr}.deploy-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.deploy-steps,.feed-core-grid{grid-template-columns:1fr}.tool-result-implementation{align-items:stretch;flex-direction:column}}

/* v2.65 — Deployment Center live progress */
.deployment-progress{margin-top:20px;padding:18px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--primary) 3%,var(--surface));box-shadow:var(--shadow-sm)}
.deployment-progress-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.deployment-progress-head h3{margin:4px 0 3px}.deployment-progress-head>strong{font-size:1.25rem;color:var(--primary);white-space:nowrap}.deployment-progress-bar{height:9px;background:var(--surface-muted);border-radius:999px;overflow:hidden;margin:16px 0}.deployment-progress-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 55%,#8b5cf6));transition:width .35s ease}.deployment-stage-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.deployment-stage-list>div{padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface);display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.75rem;font-weight:700}.deployment-stage-list b{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--surface-muted);color:var(--muted);flex:none}.deployment-stage-list .active{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 9%,transparent)}.deployment-stage-list .active b{background:color-mix(in srgb,var(--primary) 14%,var(--surface));color:var(--primary)}.deployment-stage-list .done{border-color:color-mix(in srgb,var(--success) 28%,var(--border));color:var(--success)}.deployment-stage-list .done b{background:color-mix(in srgb,var(--success) 12%,var(--surface));color:var(--success)}.deployment-stage-list .failed{border-color:color-mix(in srgb,var(--danger) 35%,var(--border));color:var(--danger)}.deployment-progress-result{margin-top:14px}.deploy-live-success,.deploy-live-error{padding:13px 14px;border-radius:12px;display:flex;flex-direction:column;gap:4px}.deploy-live-success{background:color-mix(in srgb,var(--success) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--success) 25%,var(--border));color:var(--text)}.deploy-live-success strong{color:var(--success)}.deploy-live-error{background:color-mix(in srgb,var(--danger) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border));color:var(--text)}.deploy-live-error strong{color:var(--danger)}@media(max-width:900px){.deployment-stage-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.deployment-progress-head{flex-direction:column}.deployment-stage-list{grid-template-columns:1fr}}


/* v2.69 — Deployment Intelligence Agent */
.deployment-intelligence-card{grid-column:1/-1}.deploy-intel-incident{margin:14px 0;padding:14px;border:1px solid color-mix(in srgb,var(--danger) 28%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--danger) 5%,var(--surface));}.deploy-intel-incident>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.deploy-intel-incident strong{color:var(--text-strong)}.deploy-intel-incident span{color:var(--muted);font-size:.82rem}.deploy-intel-incident p{margin:9px 0 0;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;overflow-wrap:anywhere}.deployment-diagnosis{margin-top:14px;display:flex;flex-direction:column;gap:10px}.diagnosis-summary{padding:13px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--danger) 28%,var(--border));background:color-mix(in srgb,var(--danger) 6%,var(--surface));display:flex;gap:12px;align-items:center;flex-wrap:wrap}.diagnosis-summary strong{color:var(--danger);font-size:.78rem;letter-spacing:.08em}.diagnosis-summary span{color:var(--text)}.diagnosis-finding,.diagnosis-ai{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-muted)}.diagnosis-finding>div,.diagnosis-ai>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.diagnosis-finding strong,.diagnosis-ai strong{color:var(--text-strong)}.diagnosis-finding span,.diagnosis-ai span{color:var(--muted);font-size:.78rem}.diagnosis-finding p{margin:9px 0 0;color:var(--text);font-size:.88rem}.diagnosis-ai{border-color:color-mix(in srgb,var(--primary) 28%,var(--border));background:color-mix(in srgb,var(--primary) 4%,var(--surface))}.diagnosis-ai pre{margin:12px 0 0;white-space:pre-wrap;overflow:auto;max-height:360px;font:500 .82rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}


/* v2.71 — Deployment recovery status */
.deploy-current-build { min-width: 190px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-raised, var(--card)); box-shadow: 0 10px 30px rgba(15,23,42,.06); display:flex; flex-direction:column; gap:4px; text-align:right; }
.deploy-current-build strong { font-size: 1.65rem; letter-spacing: -.035em; color: var(--text-strong, var(--text)); }
.deploy-current-build span:last-child { color: var(--text-muted, var(--muted)); font-size: .8rem; }
html[data-theme="dark"] .deploy-current-build { background:#101023; border-color:rgba(124,58,237,.24); box-shadow:0 18px 50px rgba(0,0,0,.22); }
@media (max-width:760px){.page-head .deploy-current-build{width:100%;text-align:left}.deploy-current-build{min-width:0}}


/* v2.75 — responsive UX intelligence / browser adaptation */
.ai-findings-table-wrap { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ai-findings-table { min-width:1080px; }
.ai-findings-table td, .ai-findings-table th { vertical-align:top; }
.ai-evidence-cell { max-width:340px; }
.ai-evidence-cell code { display:block; max-width:340px; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; font:500 .72rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); }
.ai-recommendation-cell { min-width:220px; max-width:320px; line-height:1.5; overflow-wrap:anywhere; }
.tool-safety-banner > strong { flex:0 0 150px; min-width:0; }
.tool-safety-banner > span { min-width:0; overflow-wrap:anywhere; }
.deploy-current-build { flex:0 0 auto; }
.deploy-steps span, .deployment-stage-list span { min-width:0; overflow-wrap:anywhere; }
@media (max-width:900px){
  .tool-safety-banner { flex-direction:column; gap:7px; }
  .tool-safety-banner > strong { flex:0 0 auto; }
  .deploy-current-build { width:100%; }
}
@media (max-width:700px){
  .page-head { align-items:flex-start; }
  .page-head .page-actions, .page-head .deploy-current-build { width:100%; }
  .deployment-stage-list { grid-template-columns:1fr; }
  .deploy-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ai-findings-table { min-width:980px; }
}
@media (max-width:480px){
  .deploy-steps { grid-template-columns:1fr; }
  .deployment-progress { padding:14px; }
  .ai-findings-table { min-width:900px; }
}

/* v2.76 identity reconciliation */
.identity-compare{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;min-width:360px}
.identity-compare>div{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-muted);min-width:0}
.identity-compare strong{display:block}
.identity-compare small{display:block;margin-top:5px;overflow-wrap:anywhere;color:var(--text-muted)}
.ai-findings-table .tool-actions form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ai-findings-table .tool-actions select{min-height:34px}
@media (max-width:900px){.identity-compare{grid-template-columns:1fr;min-width:0}.identity-compare>span{display:none}.ai-findings-table{min-width:1050px}}

.deploy-schema-warning{display:block!important;margin-top:6px;color:#b45309;font-size:.78rem;font-weight:600;line-height:1.35}

/* v2.81 API poll status */
.dashboard-poll-intro{margin:-4px 0 14px;font-size:12px}.poll-status-card{min-height:145px}.poll-source-kind{display:block;margin-top:4px;color:var(--muted);font-size:10px;font-weight:600}.poll-card-label{margin-top:10px;font-size:12px;font-weight:700;color:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.poll-status-card .sync-stats{margin:11px 0 8px}.poll-status-card>small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v2.89 infrastructure bootstrap / automation */
.install-bootstrap-panel{margin:0 0 26px;padding:22px;border:1px solid var(--border,#dbe4f0);border-radius:18px;background:rgba(248,250,252,.72)}
.install-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.install-check{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;padding:12px;border:1px solid var(--border,#dbe4f0);border-radius:12px;background:#fff}
.install-check strong{grid-row:span 2;font-size:11px;letter-spacing:.08em;color:#168a45}.install-check small{color:#667892;grid-column:2}
@media(max-width:760px){.install-check-grid{grid-template-columns:1fr}}

/* v2.98 — adaptive installer diagnostics and responsive card layout */
.install-check-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:stretch}
.install-check{min-width:0;overflow:hidden;grid-template-columns:auto minmax(0,1fr);}
.install-check strong{grid-column:1;grid-row:1 / span 3;align-self:start;}
.install-check span,.install-check small,.install-check code{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.install-check small{grid-column:2;line-height:1.45}
.install-fix-command{grid-column:2;display:block;margin-top:9px;padding:10px 11px;border-radius:10px;background:var(--surface-muted,#f6f8fb);border:1px solid var(--border,#dbe4f0);white-space:pre-wrap;overflow:auto;max-width:100%;font:500 .76rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text,#0f172a)}
.install-bootstrap-panel{min-width:0;overflow:hidden}
.install-bootstrap-panel .deploy-note{min-width:0;overflow:hidden}
.install-bootstrap-panel .deploy-note code{display:block;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto}
@media(max-width:760px){.install-check-grid{grid-template-columns:1fr}.install-check{grid-template-columns:auto minmax(0,1fr)}.install-fix-command{font-size:.72rem}.install-bootstrap-panel{padding:16px;border-radius:14px}}
html[data-ui-style="compact"] .install-check{padding:10px}
html[data-ui-style="soft"] .install-check{border-radius:18px;box-shadow:0 6px 22px rgba(15,23,42,.05)}
html[data-ui-style="sharp"] .install-check{border-radius:7px}
html[data-density="compact"] .install-check-grid{gap:8px}

.install-setup-plan{margin-top:18px;padding:18px;border:1px solid var(--border,#dbe4f0);border-radius:16px;background:var(--surface,#fff);min-width:0;overflow:hidden}
.install-setup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:10px;margin-top:12px}
.install-setup-card{min-width:0;padding:13px;border:1px solid var(--border,#dbe4f0);border-radius:12px;background:var(--surface-muted,#f6f8fb);display:flex;flex-direction:column;gap:4px}
.install-setup-card strong{font-size:.68rem;letter-spacing:.08em;opacity:.72}.install-setup-card span{font-weight:700;overflow-wrap:anywhere}.install-setup-card small{line-height:1.45;overflow-wrap:anywhere}
.install-setup-details{margin-top:12px;border-top:1px solid var(--border,#dbe4f0);padding-top:12px}.install-setup-details summary{cursor:pointer;list-style:none}.install-setup-details summary::-webkit-details-marker{display:none}
.install-path-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:8px;margin-top:10px}.install-path-grid>div{min-width:0;display:grid;gap:4px;padding:10px;border:1px solid var(--border,#dbe4f0);border-radius:10px}.install-path-grid span{font-size:.74rem;text-transform:capitalize;opacity:.72}.install-path-grid code{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.install-step-list{display:grid;gap:8px;margin-top:10px}.install-step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start}.install-step>strong{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent,#2563eb);color:#fff;font-size:.78rem}.install-step>div{min-width:0;padding:10px;border:1px solid var(--border,#dbe4f0);border-radius:10px}.install-step span,.install-step small,.install-step code{display:block;overflow-wrap:anywhere}.install-step span{font-weight:700}.install-step small{margin-top:2px;opacity:.72}.install-step code{margin-top:7px;white-space:pre-wrap;overflow-x:auto}
@media(max-width:760px){.install-setup-plan{padding:14px;border-radius:14px}.install-path-grid{grid-template-columns:1fr}}
html[data-ui-style="compact"] .install-setup-plan{padding:14px}html[data-ui-style="sharp"] .install-setup-plan{border-radius:7px}
.install-setup-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.install-setup-actions .btn{white-space:nowrap}.install-setup-card-status span{font-weight:800;letter-spacing:.05em}.install-assistant-list{display:grid;gap:9px;margin-top:12px}.install-assistant-step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding:12px;border:1px solid var(--border,#dbe4f0);border-radius:12px;background:var(--surface-muted,#f6f8fb);min-width:0}.install-assistant-marker{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--surface,#fff);border:1px solid var(--border,#dbe4f0)}.install-assistant-body{min-width:0}.install-assistant-heading{display:flex;justify-content:space-between;gap:10px;align-items:center}.install-assistant-heading span{font-weight:750;overflow-wrap:anywhere}.install-assistant-heading strong{font-size:.68rem;letter-spacing:.08em}.install-assistant-step.is-pass .install-assistant-heading strong{color:#15803d}.install-assistant-step.is-action .install-assistant-heading strong{color:#b91c1c}.install-assistant-step.is-info .install-assistant-heading strong{color:#1d4ed8}.install-assistant-body small{display:block;margin-top:4px;line-height:1.45;overflow-wrap:anywhere}.install-command-row{display:flex;gap:8px;align-items:flex-start;margin-top:9px;min-width:0}.install-command-row code{display:block;flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;padding:9px 10px;border:1px solid var(--border,#dbe4f0);border-radius:9px;background:var(--surface,#fff);font:500 .76rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.install-command-row .btn{flex:0 0 auto;padding:8px 10px}.install-approval-note{display:grid;gap:3px;margin-top:12px;padding:11px 12px;border:1px dashed var(--border,#dbe4f0);border-radius:10px;background:var(--surface,#fff)}.install-approval-note strong{font-size:.76rem}.install-approval-note span{font-size:.78rem;line-height:1.45}.install-setup-plan .btn-secondary{cursor:pointer}@media(max-width:760px){.install-setup-actions{width:100%}.install-setup-actions .btn{flex:1}.install-assistant-step{grid-template-columns:28px minmax(0,1fr)}.install-assistant-marker{width:28px;height:28px}.install-command-row{flex-direction:column}.install-command-row .btn{width:100%}}
.install-db-mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px;margin:12px 0 14px}.install-db-mode{display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid var(--border,#dbe4f0);border-radius:12px;background:var(--surface-muted,#f6f8fb);cursor:pointer}.install-db-mode input{margin-top:3px;accent-color:var(--accent,#2563eb)}.install-db-mode span{display:grid;gap:4px;min-width:0}.install-db-mode strong{font-size:.86rem}.install-db-mode small{line-height:1.45;color:var(--muted,#64748b)}.install-db-safety-note{display:grid;gap:4px;margin:10px 0 14px;padding:12px;border:1px dashed var(--border,#dbe4f0);border-radius:11px;background:var(--surface,#fff)}.install-db-safety-note strong{font-size:.78rem;letter-spacing:.03em}.install-db-safety-note span{font-size:.78rem;line-height:1.5}.install-db-result{margin:12px 0;padding:14px;border:1px solid var(--border,#dbe4f0);border-radius:14px;background:var(--surface,#fff);display:grid;gap:10px}.install-db-result-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.install-db-result-head>strong{font-size:.72rem;letter-spacing:.08em}.install-db-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.install-db-result-grid div{padding:10px;border-radius:9px;background:var(--surface-muted,#f6f8fb);display:grid;gap:3px}.install-db-result-grid span{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;opacity:.7}.install-db-result-grid strong{overflow-wrap:anywhere}.install-db-result>small{line-height:1.45}.install-db-backup{display:grid;gap:4px}.install-db-backup code{white-space:pre-wrap;overflow-wrap:anywhere;padding:8px;border-radius:8px;background:var(--surface-muted,#f6f8fb)}
@media(max-width:760px){.install-db-mode-grid{grid-template-columns:1fr}.install-db-result-head{align-items:flex-start;flex-direction:column}}

/* v2.136 production migration preview */
.install-migration-preview{margin:18px 0;padding:18px;border:1px solid var(--border,#dbe4f0);border-radius:16px;background:var(--surface,#fff);box-shadow:0 8px 28px rgba(15,23,42,.05)}
.install-migration-preview .install-db-result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.install-migration-preview details{margin-top:14px;padding-top:12px;border-top:1px solid var(--border,#dbe4f0)}
.install-migration-preview summary{cursor:pointer}
.install-migration-objects{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.install-migration-objects code{padding:6px 8px;border:1px solid var(--border,#dbe4f0);border-radius:8px;background:var(--surface-muted,#f6f8fb);font:600 .76rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.install-migration-sequence{display:grid;gap:8px;margin-top:10px}
.install-migration-sequence>div{display:grid;grid-template-columns:minmax(90px,120px) minmax(180px,260px) minmax(0,1fr);gap:10px;align-items:start;padding:10px;border:1px solid var(--border,#dbe4f0);border-radius:10px;background:var(--surface-muted,#f6f8fb)}
.install-migration-sequence code,.install-migration-sequence small{min-width:0;overflow-wrap:anywhere;word-break:break-word}
@media(max-width:760px){.install-migration-sequence>div{grid-template-columns:1fr}.install-migration-preview{padding:14px;border-radius:14px}}
html[data-ui-style="compact"] .install-migration-preview{padding:14px;border-radius:12px}
html[data-ui-style="sharp"] .install-migration-preview{border-radius:7px}

.install-db-setup-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 6px}.install-db-stage{min-width:0;padding:10px;border:1px solid var(--border,#dbe4f0);border-radius:11px;background:var(--surface-muted,#f7f9fc);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center}.install-db-stage>strong{grid-row:1 / span 2;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--border,#dbe4f0);font-size:.72rem}.install-db-stage span{font-size:.76rem;font-weight:700}.install-db-stage small{grid-column:2;font-size:.66rem;line-height:1.3;color:var(--muted,#64748b)}.install-db-stage.is-complete>strong{background:var(--accent,#2563eb);color:#fff}.install-db-stage.is-current{border-color:var(--accent,#2563eb);box-shadow:0 0 0 1px var(--accent,#2563eb) inset}.install-preflight-details{margin:8px 0 4px;border:1px solid var(--border,#dbe4f0);border-radius:12px;background:var(--surface-muted,#f7f9fc);padding:10px 12px}.install-preflight-details summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center}.install-preflight-details summary strong{font-size:.78rem}.install-preflight-details summary span{font-size:.72rem;color:var(--muted,#64748b)}.install-preflight-details>.install-check-grid{margin-top:10px}@media(max-width:760px){.install-db-setup-progress{grid-template-columns:1fr 1fr}.install-preflight-details summary{align-items:flex-start;flex-direction:column}}.install-db-status-card{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:16px 18px;margin:18px 0;border:1px solid var(--border,#dbe4f0);border-radius:14px;background:var(--surface-muted,#f7f9fc);min-width:0}.install-db-status-card h3{margin:4px 0 4px}.install-db-status-card p{margin:0}.install-db-status-card .status-pill{flex:0 0 auto}@media(max-width:760px){.install-db-status-card{align-items:flex-start;flex-direction:column}}

.release-impact{display:grid;gap:4px}.release-impact strong{margin-bottom:2px}.release-impact span{line-height:1.45}

/* v1.1.0 environment selector + safe setup simulator */
.environment-card{max-width:760px}.environment-options{display:grid;gap:12px}.environment-option{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;padding:16px;border:1px solid var(--border,#dbe4f0);border-radius:16px;background:var(--surface,#fff);color:var(--text,#0f172a);cursor:pointer;transition:.15s ease}.environment-option:hover{transform:translateY(-1px);border-color:var(--accent,#2563eb);box-shadow:0 8px 24px rgba(15,23,42,.07)}.environment-option small{display:block;margin-top:4px;color:var(--muted,#64748b);line-height:1.45}.environment-option b{font-size:1.1rem}.environment-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:900;background:var(--surface-muted,#f6f8fb)}.environment-production .environment-icon{color:#166534;background:#dcfce7}.environment-demo .environment-icon{color:#1d4ed8;background:#dbeafe}.environment-safety{display:grid;gap:4px;margin-top:16px;padding:12px 14px;border:1px dashed var(--border,#dbe4f0);border-radius:12px;background:var(--surface-muted,#f7f9fc)}.environment-safety strong{font-size:.76rem}.environment-safety span{font-size:.78rem;line-height:1.45;color:var(--muted,#64748b)}
.deployment-sim-layout{display:grid;grid-template-columns:minmax(270px,.72fr) minmax(0,1.55fr);gap:16px}.deployment-impact-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.deployment-impact-mini span{padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-muted);color:var(--muted);font-size:.72rem}.deployment-impact-mini b{display:block;color:var(--text);margin-top:2px}.deployment-impact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}.deployment-impact-grid>div{padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--surface-muted)}.deployment-impact-grid span{display:block;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800}.deployment-impact-grid strong{display:block;margin-top:5px;font-size:.82rem}.deployment-rules{padding:20px}.deployment-rule-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.deployment-rule-grid article{padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-muted)}.deployment-rule-grid strong{display:block}.deployment-rule-grid span{display:block;margin-top:4px;color:var(--muted);font-size:.76rem;line-height:1.4}@media(max-width:1000px){.deployment-sim-layout{grid-template-columns:1fr}.deployment-impact-grid{grid-template-columns:1fr 1fr}.deployment-rule-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.deployment-impact-grid,.deployment-rule-grid,.deployment-impact-mini{grid-template-columns:1fr}}
.demo-page{display:grid;gap:16px}.demo-hero{padding:24px}.demo-hero h1{margin:7px 0}.demo-hero p{max-width:900px;color:var(--muted);line-height:1.55}.demo-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.demo-kpi{padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.demo-kpi span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800}.demo-kpi strong{display:block;font-size:1.7rem;margin:7px 0 2px}.demo-kpi small{color:var(--muted)}.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.demo-module{padding:20px}.demo-module h2{margin:6px 0}.demo-module p{color:var(--muted);line-height:1.5;min-height:72px}.demo-safety{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-muted);color:var(--muted);font-size:.8rem;line-height:1.45}.demo-safety strong{color:var(--text);font-size:.7rem;letter-spacing:.08em;white-space:nowrap}.simulator-layout{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.6fr);gap:16px}.simulator-controls,.simulator-results{padding:20px}.simulator-controls form{display:grid;gap:9px}.simulator-controls select{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}.simulator-result-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.simulator-result-head h2{margin:5px 0}.simulator-steps{display:grid;gap:8px;margin-top:14px}.sim-step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--surface-muted)}.sim-step>strong{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);font-size:.75rem}.sim-step>div>div{display:flex;justify-content:space-between;gap:10px}.sim-step b{font-size:.82rem}.sim-step span{font-size:.66rem;font-weight:900;letter-spacing:.07em}.sim-pass span{color:#15803d}.sim-action span{color:#b45309}.sim-blocked span{color:#b91c1c}.sim-step small{display:block;margin-top:3px;color:var(--muted);line-height:1.45}.sim-advisory{margin-top:14px;padding:13px;border:1px dashed var(--border);border-radius:11px;background:var(--surface)}.sim-advisory strong{display:block;font-size:.76rem;letter-spacing:.05em}.sim-advisory span{display:block;margin-top:4px;color:var(--muted);line-height:1.45}.sim-advisory ul{margin:8px 0 0;padding-left:20px;color:var(--muted);font-size:.8rem}.sim-safety{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.sim-safety span{padding:9px;border-radius:9px;background:var(--surface-muted);font-size:.72rem;color:var(--muted)}.sim-safety b{display:block;color:#15803d;margin-top:2px}@media(max-width:900px){.demo-kpi-grid{grid-template-columns:1fr 1fr}.demo-grid{grid-template-columns:1fr}.simulator-layout{grid-template-columns:1fr}}@media(max-width:600px){.demo-kpi-grid{grid-template-columns:1fr}.environment-option{grid-template-columns:38px minmax(0,1fr) auto}.environment-icon{width:38px;height:38px}.sim-safety{grid-template-columns:1fr 1fr}}
.environment-bar{display:flex;align-items:center;gap:9px;padding:8px 22px;border-bottom:1px solid var(--border);background:var(--surface);font-size:.74rem;color:var(--muted);min-height:42px}.environment-bar-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:.64rem;font-weight:900;letter-spacing:.06em}.environment-bar-badge.is-production{background:#dcfce7;color:#166534}.environment-bar-badge.is-demo{background:#dbeafe;color:#1d4ed8}.environment-bar a{margin-left:auto;font-weight:700;color:var(--accent,#2563eb);text-decoration:none}.environment-bar a:hover{text-decoration:underline}@media(max-width:600px){.environment-bar{padding:7px 12px;gap:6px}.environment-bar>span:nth-child(2){display:none}}
.deploy-current-build small{display:block;margin-top:4px;color:var(--muted);font-size:.68rem}

/* v1.1.1 — deterministic setup regression lab + fixed product attribution */
.app-footer-credit{display:inline-block;margin-left:4px;font-weight:700;color:#64748b}
.auth-credit{display:block;margin-top:7px;color:#64748b;font-size:.72rem;letter-spacing:.01em;font-weight:600}
.regression-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.regression-meta span{padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-muted);color:var(--muted);font-size:.72rem}
.regression-meta b{color:var(--text)}
.regression-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px}
.regression-controls h2{margin:5px 0}.regression-controls p{margin:0;color:var(--muted);line-height:1.5}
.regression-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.regression-summary-card{padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
.regression-summary-card span{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800}.regression-summary-card strong{display:block;margin-top:5px;font-size:1.35rem}.regression-summary-card.is-success{border-color:#bbf7d0}.regression-summary-card.is-success strong{color:#15803d}.regression-summary-card.is-danger{border-color:#fecaca}.regression-summary-card.is-danger strong{color:#b91c1c}
.regression-results,.regression-detail{padding:20px}.regression-table-wrap{overflow:auto;margin-top:14px}.regression-table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}.regression-table th,.regression-table td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}.regression-table th{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--surface-muted)}.regression-table td{font-size:.8rem}.regression-table td small{color:var(--muted)}
.regression-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.64rem;font-weight:900;letter-spacing:.06em}.status-pass{color:#166534;background:#dcfce7}.status-action{color:#92400e;background:#fef3c7}.status-blocked{color:#991b1b;background:#fee2e2}.regression-match{font-size:.65rem;font-weight:900;letter-spacing:.06em}.regression-match.yes{color:#15803d}.regression-match.no{color:#b91c1c}
.regression-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.regression-case{padding:16px;border:1px solid var(--border);border-radius:15px;background:var(--surface-muted)}.regression-case-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.regression-case-head strong{font-size:.84rem;line-height:1.35}.regression-case .simulator-steps{margin-top:12px}.regression-case .sim-safety{grid-template-columns:repeat(4,minmax(0,1fr))}.regression-case .sim-advisory{background:var(--surface)}.regression-empty{padding:30px;text-align:center}
@media(max-width:1000px){.regression-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.regression-detail-grid{grid-template-columns:1fr}}
@media(max-width:700px){.regression-controls{align-items:stretch;flex-direction:column}.regression-summary{grid-template-columns:1fr 1fr}.regression-case .sim-safety{grid-template-columns:1fr 1fr}.app-footer-credit{display:block;margin:5px 0 0}}

/* v1.5.0 — Demo self-service cloud lab */
.demo-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px}.demo-toolbar strong,.demo-toolbar span{display:block}.demo-toolbar span{color:var(--muted);font-size:.8rem;margin-top:3px}.provision-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.provision-plan-grid>div{padding:12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-muted)}.provision-plan-grid span{display:block;font-size:.67rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}.provision-plan-grid strong{display:block;margin-top:5px;font-size:.9rem;overflow-wrap:anywhere}.demo-provision-layout .simulator-controls label{display:grid;gap:5px;font-size:.76rem;font-weight:800;color:var(--muted)}.demo-provision-layout .simulator-controls input,.demo-provision-layout .simulator-controls select{font:inherit;font-weight:500;color:var(--text)}.demo-provision-layout .create-vm-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}.demo-provision-layout .create-vm-actions .btn{flex:1 1 150px;text-align:center}@media(max-width:900px){.provision-plan-grid{grid-template-columns:1fr 1fr}.demo-toolbar{align-items:flex-start;flex-direction:column}}@media(max-width:600px){.provision-plan-grid{grid-template-columns:1fr}.demo-provision-layout .create-vm-actions .btn{flex:1 1 100%}}
.demo-row-actions form.inline-form,.inline-form{display:inline-flex;align-items:center;gap:6px;margin:4px 0}.demo-row-actions select{max-width:150px}.empty-state{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px}.empty-state span{color:var(--muted,#64748b)}

/* v1.7.0 — Demo customer/tenant + service catalog */
.catalog-management-layout{grid-template-columns:minmax(280px,.72fr) minmax(0,1.6fr)}
.catalog-help{margin:0 0 14px;color:var(--muted);font-size:.8rem;line-height:1.5}
.catalog-management-layout .simulator-controls label{display:grid;gap:5px;font-size:.76rem;font-weight:800;color:var(--muted)}
.catalog-management-layout .simulator-controls input{font:inherit;font-weight:500;color:var(--text)}
.catalog-quota-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.catalog-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.catalog-plan{padding:14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-muted)}
.catalog-plan-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.catalog-plan-head strong,.catalog-plan-head span{display:block}.catalog-plan-head strong{font-size:.88rem}.catalog-plan-head>div>span{margin-top:3px;color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.05em}
.catalog-plan p{margin:9px 0;color:var(--muted);font-size:.76rem;line-height:1.45}
.catalog-plan-specs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.catalog-plan-specs span{padding:8px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:.7rem;color:var(--muted)}.catalog-plan-specs b{color:var(--text)}
@media(max-width:1000px){.catalog-management-layout{grid-template-columns:1fr}.catalog-plan-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.catalog-quota-grid,.catalog-plan-grid{grid-template-columns:1fr}}


/* =====================================================================
   v5.7.0 — Theme AI Agent / Provider Economics UI normalization
   Presentation-only. No business or provider state changes.
   ===================================================================== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-width:0}
.kpi-card{min-width:0;padding:18px 20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.kpi-card>span,.kpi-card>small{display:block;color:var(--muted);line-height:1.35}
.kpi-card>span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.kpi-card>strong{display:block;margin:7px 0 2px;font-size:1.72rem;line-height:1.15;letter-spacing:-.025em;color:var(--text-strong);overflow-wrap:anywhere}
.kpi-card>small{font-size:.76rem}
.provider-kpi-grid .kpi-card,.provider-usage-kpi-grid .kpi-card{min-height:118px}
.provider-table-wrap{min-width:0}
.provider-table-wrap table{min-width:760px}
.provider-usage-form label{display:flex;flex-direction:column;gap:6px;min-width:0}
.provider-usage-form select,.provider-usage-form input{width:100%;box-sizing:border-box}
.theme-ai-card{grid-column:1/-1}
.theme-ai-agent-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto auto;gap:14px;align-items:center;margin-top:14px}
.theme-ai-score{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-muted)}
.theme-ai-score strong{font-size:1.55rem;line-height:1;color:var(--primary)}
.theme-ai-score span{font-size:.72rem;color:var(--muted);font-weight:700}
.theme-ai-findings{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.theme-ai-findings span{padding:7px 9px;border-radius:9px;background:var(--surface-muted);border:1px solid var(--border);font-size:.73rem;color:var(--muted)}
html[data-theme="dark"] .kpi-card{background:var(--surface);border-color:var(--border)}
html[data-theme="dark"] .theme-ai-score strong{color:#93c5fd}
@media(max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-ai-agent-row{grid-template-columns:110px minmax(0,1fr)}}
@media(max-width:760px){.kpi-grid{grid-template-columns:1fr}.provider-usage-form{grid-template-columns:1fr!important}.theme-ai-agent-row{grid-template-columns:1fr}.theme-ai-agent-row .btn{width:100%}}

/* v5.21.2 final navigation boundary: keep identity stable, scroll only the menu. */
@media (min-width:861px) {
  .sidebar#appSidebar { height:100vh; min-height:100vh; display:flex; flex-direction:column; overflow:hidden; }
  .sidebar#appSidebar > .sidebar-brand { flex:0 0 auto; position:relative; z-index:3; }
  .sidebar#appSidebar > .sidebar-nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
  .sidebar#appSidebar > .sidebar-footer { flex:0 0 auto; }
}
.sidebar-brand-home { min-width:0; }


/* =====================================================================
   v5.21.3 — Theme AI presentation normalization / navigation controls.
   This final layer intentionally overrides historical theme experiments
   above it. Presentation-only; no business state mutation.
   ===================================================================== */
@media (min-width: 861px) {
  #appSidebar {
    width: 256px;
    flex-basis: 256px;
    overflow: hidden;
  }
  #appSidebar > .sidebar-brand {
    min-height: 76px;
    height: 76px;
    box-sizing: border-box;
    padding: 12px 12px 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
  }
  #appSidebar .sidebar-brand-home {
    min-width: 0;
    width: calc(100% - 28px);
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
  }
  #appSidebar .sidebar-brand-mark {
    width: 142px;
    height: 46px;
    min-width: 142px;
    flex: 0 0 142px;
    padding: 0 8px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
  }
  #appSidebar .sidebar-brand-mark .sidebar-logo {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  #appSidebar .sidebar-brand-copy {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  #appSidebar .sidebar-brand-copy strong,
  #appSidebar .sidebar-brand-copy span {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #appSidebar .sidebar-brand-copy strong { font-size: .82rem; line-height: 1.2; }
  #appSidebar .sidebar-brand-copy span { font-size: .61rem; line-height: 1.25; margin-top: 4px; }
  #appSidebar .sidebar-collapse-toggle {
    position: absolute;
    top: 8px;
    right: 7px;
    z-index: 10;
    width: 24px;
    height: 24px;
    padding: 0;
    pointer-events: auto;
  }
  #appSidebar > .sidebar-nav { min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }

  html[data-sidebar-collapsed="1"] #appSidebar,
  #appSidebar.collapsed { width: 82px; flex-basis: 82px; }
  html[data-sidebar-collapsed="1"] #appSidebar > .sidebar-brand,
  #appSidebar.collapsed > .sidebar-brand {
    height: 84px;
    min-height: 84px;
    padding: 18px 7px 10px;
    justify-content: center;
  }
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-brand-home,
  #appSidebar.collapsed .sidebar-brand-home {
    width: 62px;
    flex: 0 0 62px;
    justify-content: center;
  }
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-brand-mark,
  #appSidebar.collapsed .sidebar-brand-mark {
    width: 62px;
    height: 42px;
    min-width: 62px;
    flex: 0 0 62px;
    padding: 3px;
    border-radius: 9px;
  }
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-brand-copy,
  #appSidebar.collapsed .sidebar-brand-copy { display: none !important; }
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-collapse-toggle,
  #appSidebar.collapsed .sidebar-collapse-toggle {
    top: 5px;
    right: 4px;
    width: 22px;
    height: 22px;
    z-index: 20;
  }
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-collapse-toggle svg,
  #appSidebar.collapsed .sidebar-collapse-toggle svg { width: 13px; height: 13px; transform: rotate(180deg); }
}

/* Distinct operations icons should retain the same visual weight. */
.sidebar-link svg, .sidebar-group-toggle svg:first-child { stroke-linecap: round; stroke-linejoin: round; }

/* 5.21.3 read-path status surface. */
.runtime-read-status { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px dashed var(--border); border-radius:10px; background:var(--surface-muted); color:var(--muted); }

/* =====================================================================
   v5.21.4 — Final navigation / branding correction
   Presentation-only. This layer intentionally wins over historical UI
   experiments above it so production cannot regress because of cascade
   order. Expanded branding follows the approved vertical presentation;
   collapsed branding remains a compact wordmark.
   ===================================================================== */
@media (min-width:861px) {
  #appSidebar { width:256px; flex-basis:256px; }

  #appSidebar > .sidebar-brand {
    height:214px;
    min-height:214px;
    padding:22px 14px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    overflow:hidden;
    position:relative;
  }
  #appSidebar .sidebar-brand-home {
    width:100%;
    min-width:0;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    overflow:hidden;
    text-align:center;
  }
  #appSidebar .sidebar-brand-mark {
    width:222px;
    height:60px;
    min-width:222px;
    flex:0 0 60px;
    padding:0 8px;
    border-radius:17px;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.16);
    overflow:hidden;
  }
  #appSidebar .sidebar-brand-mark .sidebar-logo {
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:0;
  }
  #appSidebar .sidebar-brand-copy {
    width:100%;
    min-width:0;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-align:center;
  }
  #appSidebar .sidebar-brand-copy strong {
    width:100%;
    color:#f8fafc;
    font-size:1.05rem;
    line-height:1.22;
    font-weight:750;
    white-space:normal;
    overflow:hidden;
    text-overflow:clip;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  #appSidebar .sidebar-brand-copy span {
    width:100%;
    margin-top:7px;
    color:#94a3b8;
    font-size:.76rem;
    line-height:1.25;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #appSidebar .sidebar-collapse-toggle {
    top:10px;
    right:8px;
    z-index:100;
    width:28px;
    height:28px;
    border-radius:8px;
    pointer-events:auto;
  }

  #appSidebar > .sidebar-nav { min-height:0; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; }

  /* Collapsed: compact wordmark + visible expand affordance. */
  #appSidebar.collapsed,
  html[data-sidebar-collapsed="1"] #appSidebar { width:82px; flex-basis:82px; }
  #appSidebar.collapsed > .sidebar-brand,
  html[data-sidebar-collapsed="1"] #appSidebar > .sidebar-brand {
    height:92px;
    min-height:92px;
    padding:18px 7px 12px;
    justify-content:center;
    gap:0;
  }
  #appSidebar.collapsed .sidebar-brand-home,
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-brand-home {
    width:64px;
    flex:0 0 64px;
    justify-content:center;
  }
  #appSidebar.collapsed .sidebar-brand-mark,
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-brand-mark {
    width:64px;
    height:44px;
    min-width:64px;
    flex-basis:44px;
    padding:3px;
    border-radius:9px;
  }
  #appSidebar.collapsed .sidebar-brand-copy,
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-brand-copy { display:none !important; }
  #appSidebar.collapsed .sidebar-collapse-toggle,
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-collapse-toggle {
    top:6px;
    right:4px;
    z-index:120;
  }
  #appSidebar.collapsed .sidebar-collapse-toggle svg,
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-collapse-toggle svg { transform:rotate(180deg); }

  /* Do not let an open submenu or the active Operations group trap the user
     away from Admin. Every group remains a normal interactive control. */
  #appSidebar .sidebar-group-toggle { position:relative; z-index:2; cursor:pointer; pointer-events:auto; }
  #appSidebar .sidebar-submenu { position:relative; z-index:1; }
}

/* Semantic icon sizing: every top-level icon occupies the same optical box. */
#appSidebar .sidebar-link > svg,
#appSidebar .sidebar-group-toggle > svg:first-child,
#appSidebar .sidebar-group-toggle > svg.sidebar-chevron { flex:0 0 auto; }
#appSidebar .sidebar-link > svg,
#appSidebar .sidebar-group-toggle > svg:first-child { width:19px; height:19px; }
#appSidebar .sidebar-group-toggle > .sidebar-chevron { width:14px; height:14px; margin-left:auto; opacity:.75; }

/* v5.22.0 — Navigation hierarchy + AI presentation intelligence */
#appSidebar .sidebar-group-toggle[aria-expanded="true"] .sidebar-chevron { transform:rotate(180deg); }
#appSidebar .sidebar-group-toggle[aria-expanded="false"] .sidebar-chevron { transform:rotate(0deg); }
#appSidebar .sidebar-group-toggle { min-width:0; }
#appSidebar .sidebar-group-toggle > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (hover:hover) and (pointer:fine) {
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-link[title],
  html[data-sidebar-collapsed="1"] #appSidebar .sidebar-group-toggle[title] { position:relative; }
}


/* =====================================================================
   v5.23.0 — Final branding boundary + Operations Intelligence phase
   Presentation-only. Keep the branding/header frozen while the navigation
   below it scrolls independently. The approved tagline is Cloud & Billing.
   ===================================================================== */
@media (min-width:861px) {
  #appSidebar > .sidebar-brand {
    height:154px;
    min-height:154px;
    padding:22px 14px 16px;
    gap:10px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  #appSidebar .sidebar-brand-copy strong { font-size:1.04rem; line-height:1.22; }
  #appSidebar .sidebar-brand-copy span { margin-top:6px; font-size:.76rem; line-height:1.2; }
  #appSidebar > .sidebar-nav { min-height:0; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; }
}

/* =====================================================================
   v5.24.0 — Persistent footer + settings-driven branding.
   The application footer is a viewport-level status bar, while the
   sidebar remains an independent navigation surface. Branding never
   invents a tagline; an empty General & Branding value stays hidden.
   ===================================================================== */
@media (min-width: 861px) {
  .app-main { padding-bottom: 48px; box-sizing: border-box; }
  .app-footer {
    position: fixed;
    left: 256px;
    right: 0;
    bottom: 0;
    z-index: 1200;
    min-height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 18px;
    transition: left .18s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-sidebar-collapsed="1"] .app-footer,
  #appSidebar.collapsed ~ .app-main + .app-footer { left: 82px; }
}
@media (max-width: 860px) {
  .app-main { padding-bottom: 52px; box-sizing: border-box; }
  .app-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    min-height: 44px;
    box-sizing: border-box;
    padding: 9px 14px;
    line-height: 1.35;
  }
}
.app-footer-credit { white-space: nowrap; }


/* v5.67.0 — REDTURBAN Roots & Cloud visual identity 1.0. */
html[data-ui-style="roots-cloud"] .rt-brand-rail {
  position:relative; display:flex; align-items:center; gap:14px; min-height:48px; padding:0 28px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--rt-cream) 62%,var(--surface)), var(--surface) 42%, color-mix(in srgb,var(--rt-blue) 4%,var(--surface)));
  border-bottom:1px solid color-mix(in srgb,var(--rt-gold) 26%,var(--border)); overflow:hidden;
}
html[data-ui-style="roots-cloud"] .rt-brand-rail::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--rt-gold),var(--rt-red) 48%,var(--rt-blue));
}
html[data-ui-style="roots-cloud"] .rt-brand-rail::after {
  content:""; position:absolute; right:-90px; top:-50px; width:250px; height:140px; border-radius:50%;
  background:radial-gradient(circle,var(--rt-blue) 0,transparent 67%); opacity:.08; pointer-events:none;
}
.rt-brand-rail-home { display:inline-flex; align-items:center; gap:11px; color:var(--rt-navy)!important; text-decoration:none!important; min-width:max-content; position:relative; z-index:1; }
.rt-brand-rail-word { font-size:.9rem; font-weight:900; letter-spacing:.075em; color:var(--rt-red); }
.rt-brand-rail-word span { color:var(--rt-navy); }
.rt-brand-rail-divider { width:1px; height:20px; background:var(--border-strong); }
.rt-brand-rail-product { font-size:.84rem; font-weight:800; letter-spacing:.01em; color:var(--rt-navy); }
.rt-brand-rail-story { display:inline-flex; align-items:center; gap:7px; color:var(--text-muted); font-size:.69rem; letter-spacing:.06em; text-transform:uppercase; position:relative; z-index:1; }
.rt-brand-rail-story i { display:block; width:5px; height:5px; border-radius:50%; background:var(--rt-gold); box-shadow:8px 0 0 -1px var(--rt-red); }
.rt-story-root { color:color-mix(in srgb,var(--rt-green) 82%,#000); font-weight:800; }
.rt-story-future { color:var(--rt-blue); font-weight:800; }
.rt-brand-rail-tagline { margin-left:auto; color:var(--text-muted); font-size:.72rem; font-style:italic; position:relative; z-index:1; }

html[data-ui-style="roots-cloud"] .page-header {
  position:relative; padding:8px 0 20px 15px; margin-bottom:18px; border-left:4px solid var(--rt-gold);
  background:linear-gradient(90deg,color-mix(in srgb,var(--rt-cream) 34%,transparent),transparent 58%);
}
html[data-ui-style="roots-cloud"] .page-header h1 { margin-bottom:8px; font-size:clamp(1.7rem,2.5vw,2.2rem); }
html[data-ui-style="roots-cloud"] .page-header p { max-width:850px; }
html[data-ui-style="roots-cloud"] .page-header::after { width:128px; height:3px; margin-top:15px; }

html[data-ui-style="roots-cloud"] .dashboard-hero {
  position:relative; padding:25px 28px; margin:0 0 22px; border:1px solid color-mix(in srgb,var(--rt-gold) 25%,var(--border));
  border-radius:18px; overflow:hidden; background:linear-gradient(115deg,color-mix(in srgb,var(--rt-cream) 54%,var(--surface)),var(--surface) 48%,color-mix(in srgb,var(--rt-blue) 5%,var(--surface)));
  box-shadow:0 12px 34px color-mix(in srgb,var(--rt-navy) 7%,transparent);
}
html[data-ui-style="roots-cloud"] .dashboard-hero::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--rt-gold),var(--rt-red) 46%,var(--rt-blue)); }
html[data-ui-style="roots-cloud"] .dashboard-hero::after { content:""; position:absolute; right:-65px; bottom:-75px; width:230px; height:230px; border:1px solid color-mix(in srgb,var(--rt-blue) 24%,transparent); border-radius:50%; box-shadow:-26px -18px 0 -25px color-mix(in srgb,var(--rt-gold) 70%,transparent); opacity:.7; pointer-events:none; }
html[data-ui-style="roots-cloud"] .dashboard-title { font-size:clamp(2rem,3vw,2.7rem)!important; }
html[data-ui-style="roots-cloud"] .dashboard-subtitle { max-width:760px; }
html[data-ui-style="roots-cloud"] .dashboard-kpi { border-radius:15px; border-top:3px solid color-mix(in srgb,var(--rt-blue) 52%,var(--border)); }
html[data-ui-style="roots-cloud"] .dashboard-kpi.kpi-green { border-top-color:var(--rt-green); }
html[data-ui-style="roots-cloud"] .dashboard-kpi.kpi-amber { border-top-color:var(--rt-gold); }
html[data-ui-style="roots-cloud"] .dashboard-kpi.kpi-red { border-top-color:var(--rt-red); }
html[data-ui-style="roots-cloud"] .dashboard-kpi.kpi-violet { border-top-color:var(--rt-blue); }
html[data-ui-style="roots-cloud"] .dashboard-panel { border-radius:15px; }

html[data-ui-style="roots-cloud"] .card { border-radius:14px; }
html[data-ui-style="roots-cloud"] .card h2, html[data-ui-style="roots-cloud"] .card h3 { letter-spacing:-.018em; }
html[data-ui-style="roots-cloud"] .stat-card { border-top:3px solid color-mix(in srgb,var(--rt-blue) 55%,var(--border)); }
html[data-ui-style="roots-cloud"] .btn-primary { background:linear-gradient(135deg,var(--rt-red) 0%,color-mix(in srgb,var(--rt-red) 76%,var(--rt-navy)) 100%); }
html[data-ui-style="roots-cloud"] .sidebar-brand-copy strong { letter-spacing:-.01em; }
html[data-ui-style="roots-cloud"] .sidebar-brand-copy span { color:color-mix(in srgb,var(--rt-gold) 74%,#fff); }
html[data-ui-style="roots-cloud"] .sidebar-group.active>.sidebar-group-toggle { background:linear-gradient(90deg,color-mix(in srgb,var(--rt-gold) 12%,transparent),transparent); }
html[data-ui-style="roots-cloud"] .sidebar-link.active, html[data-ui-style="roots-cloud"] .sidebar-submenu a.active { background:linear-gradient(90deg,color-mix(in srgb,var(--rt-red) 18%,transparent),color-mix(in srgb,var(--rt-blue) 7%,transparent)); }
html[data-ui-style="roots-cloud"] .app-footer { padding-top:16px; }

/* Login / unauthenticated entry follows the same brand language. */
html[data-ui-style="roots-cloud"] .auth-brand-panel { background:linear-gradient(145deg,var(--rt-navy),color-mix(in srgb,var(--rt-navy) 82%,var(--rt-blue)) 68%,color-mix(in srgb,var(--rt-navy) 80%,var(--rt-gold))); }
html[data-ui-style="roots-cloud"] .auth-brand-panel::before { content:""; position:absolute; inset:auto 0 0 0; height:5px; background:linear-gradient(90deg,var(--rt-gold),var(--rt-red),var(--rt-blue)); }
html[data-ui-style="roots-cloud"] .auth-brand h1 { letter-spacing:-.035em; }
html[data-ui-style="roots-cloud"] .auth-brand-subtitle { color:color-mix(in srgb,var(--rt-cream) 78%,#fff); }
html[data-ui-style="roots-cloud"] .auth-eyebrow { color:var(--rt-gold); }

@media (max-width: 900px) {
  .rt-brand-rail { padding:0 18px; }
  .rt-brand-rail-tagline { display:none; }
}
@media (max-width: 620px) {
  .rt-brand-rail-story { display:none; }
  .rt-brand-rail { min-height:42px; }
}


/* v5.68.0 — REDTURBAN Brand Rail 2.0 and visual hierarchy refinement. */
html[data-ui-style="roots-cloud"] .rt-brand-rail {
  position:relative; display:flex; align-items:center; gap:18px; min-height:58px; height:58px;
  padding:0 30px 0 26px; box-sizing:border-box; overflow:hidden;
  background:linear-gradient(90deg,#fff 0%,#fff 72%,color-mix(in srgb,var(--rt-blue) 3%,#fff) 100%);
  border-bottom:1px solid color-mix(in srgb,var(--rt-navy) 10%,var(--border));
  box-shadow:0 1px 0 rgba(11,23,40,.03);
}
html[data-ui-style="roots-cloud"] .rt-brand-rail::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--rt-red) 0%,var(--rt-gold) 52%,var(--rt-blue) 100%);
}
html[data-ui-style="roots-cloud"] .rt-brand-rail::after {
  content:""; position:absolute; right:-80px; top:-80px; width:240px; height:180px;
  border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--rt-blue) 15%,transparent),transparent 67%);
  pointer-events:none;
}
.rt-brand-rail-home { display:inline-flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto; color:var(--rt-navy)!important; text-decoration:none!important; position:relative; z-index:1; }
.rt-brand-rail-mark { width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center; border-radius:9px; overflow:hidden; background:#fff; box-shadow:0 2px 7px rgba(11,23,40,.10); }
.rt-brand-rail-mark img { width:34px; height:34px; display:block; }
.rt-brand-rail-word { font-size:.98rem; font-weight:950; letter-spacing:.055em; color:var(--rt-red); white-space:nowrap; }
.rt-brand-rail-word span { color:var(--rt-navy); }
.rt-brand-rail-divider { width:1px; height:30px; background:color-mix(in srgb,var(--rt-navy) 18%,var(--border)); margin:0 2px 0 3px; }
.rt-brand-rail-product { display:flex; flex-direction:column; line-height:1.05; white-space:nowrap; }
.rt-brand-rail-product strong { color:var(--rt-navy); font-size:1rem; font-weight:850; letter-spacing:-.018em; }
.rt-brand-rail-product small { margin-top:4px; color:var(--text-muted); font-size:.57rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.rt-brand-rail-story { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid color-mix(in srgb,var(--rt-gold) 34%,var(--border)); border-radius:999px; background:color-mix(in srgb,var(--rt-cream) 48%,#fff); color:var(--text-muted); font-size:.62rem; font-weight:850; letter-spacing:.075em; white-space:nowrap; position:relative; z-index:1; }
.rt-brand-rail-story i { color:var(--rt-gold); font-style:normal; font-size:.75rem; }
.rt-story-root { color:color-mix(in srgb,var(--rt-green) 88%,#000); }
.rt-story-future { color:var(--rt-blue); }
.rt-brand-rail-tagline { margin-left:auto; color:color-mix(in srgb,var(--rt-navy) 58%,var(--text-muted)); font-size:.72rem; font-style:italic; white-space:nowrap; position:relative; z-index:1; }
html[data-ui-style="roots-cloud"] .dashboard-hero .rt-hero-story { display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:7px 11px; border-radius:999px; background:color-mix(in srgb,var(--rt-cream) 52%,#fff); border:1px solid color-mix(in srgb,var(--rt-gold) 30%,var(--border)); color:var(--text-muted); font-size:.64rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
html[data-ui-style="roots-cloud"] .dashboard-hero .rt-hero-story strong { color:var(--rt-red); }
html[data-ui-style="roots-cloud"] .dashboard-hero .rt-hero-story span:last-child { color:var(--rt-blue); }
@media (max-width:1100px){ .rt-brand-rail-tagline{display:none;} }
@media (max-width:760px){ .rt-brand-rail{gap:10px;padding:0 16px 0 18px;} .rt-brand-rail-story{display:none;} .rt-brand-rail-product small{display:none;} }
@media (max-width:560px){ .rt-brand-rail{min-height:52px;height:52px;} .rt-brand-rail-mark,.rt-brand-rail-mark img{width:30px;height:30px;} .rt-brand-rail-mark{flex-basis:30px;} .rt-brand-rail-word{font-size:.88rem;} .rt-brand-rail-divider{height:24px;} .rt-brand-rail-product strong{font-size:.9rem;} }

/* v5.69.0 — REDTURBAN official logo system + product dashboard refinement. */
html[data-ui-style="roots-cloud"] .rt-brand-rail {
  min-height:82px;
  padding:4px 24px;
  gap:0;
  background:var(--surface);
  border-bottom:1px solid color-mix(in srgb,var(--rt-navy) 10%,var(--border));
  box-shadow:0 2px 12px color-mix(in srgb,var(--rt-navy) 5%,transparent);
}
html[data-ui-style="roots-cloud"] .rt-brand-rail::before,
html[data-ui-style="roots-cloud"] .rt-brand-rail::after { display:none; }
.rt-brand-rail-home { gap:16px; width:100%; min-height:74px; }
.rt-brand-rail-logo { display:flex; align-items:center; justify-content:flex-start; flex:0 0 auto; line-height:0; }
.rt-brand-rail-logo img { display:block; object-fit:contain; object-position:left center; }
.rt-brand-logo-light { width:176px; max-height:72px; }
.rt-brand-logo-dark { display:none !important; width:158px; max-height:76px; }
html[data-theme="dark"] .rt-brand-logo-light { display:none !important; }
html[data-theme="dark"] .rt-brand-logo-dark { display:block !important; }
.rt-brand-rail-divider { width:1px; height:48px; background:color-mix(in srgb,var(--rt-navy) 20%,var(--border)); }
.rt-brand-rail-product { display:flex; flex-direction:column; gap:2px; color:var(--rt-navy); line-height:1.05; }
.rt-brand-rail-product strong { font-size:1.22rem; font-weight:850; letter-spacing:-.025em; }
.rt-brand-rail-product small { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
html[data-theme="dark"] .rt-brand-rail-product { color:#fff; }
html[data-theme="dark"] .rt-brand-rail-divider { background:rgba(255,255,255,.18); }
html[data-theme="dark"] .rt-brand-rail { background:#0b1728; border-bottom-color:rgba(255,255,255,.12); }
html[data-ui-style="roots-cloud"] .dashboard-hero { padding:30px 32px; }
html[data-ui-style="roots-cloud"] .dashboard-hero .eyebrow { color:var(--rt-red); }
html[data-ui-style="roots-cloud"] .dashboard-hero .eyebrow-dot { background:var(--rt-gold); box-shadow:0 0 0 4px color-mix(in srgb,var(--rt-gold) 16%,transparent); }
html[data-ui-style="roots-cloud"] .dashboard-title { letter-spacing:-.035em; }
html[data-ui-style="roots-cloud"] .dashboard-subtitle { font-size:1rem; line-height:1.65; color:var(--text-muted); }
html[data-ui-style="roots-cloud"] .dashboard-action-primary { box-shadow:0 8px 20px color-mix(in srgb,var(--rt-red) 20%,transparent); }
@media (max-width:760px) {
  .rt-brand-rail { min-height:68px; }
  .rt-brand-rail-home { min-height:62px; gap:10px; }
  .rt-brand-logo-light { width:142px; max-height:58px; }
  .rt-brand-logo-dark { width:128px; max-height:60px; }
  .rt-brand-rail-divider { height:38px; }
  .rt-brand-rail-product strong { font-size:1rem; }
  .rt-brand-rail-product small { font-size:.56rem; letter-spacing:.08em; }
}

/* v5.69.0 — official REDTURBAN login artwork. */
.auth-logo-light { display:block; max-width:min(440px,100%); width:100%; height:auto; object-fit:contain; }
.auth-logo-dark { display:none; max-width:min(420px,100%); width:100%; height:auto; object-fit:contain; }
html[data-theme="dark"] .auth-logo-light { display:none; }
html[data-theme="dark"] .auth-logo-dark { display:block; }

/* v5.70 Operations Center 2.0 — command-center presentation layer */
.ops-command-head{margin-bottom:14px}.ops-command-strip{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(120px,1fr));gap:0;margin:0 0 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}.ops-command-strip>div{min-height:74px;padding:14px 16px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}.ops-command-strip>div:last-child{border-right:0}.ops-posture{flex-direction:row!important;align-items:center;gap:11px}.ops-posture-dot{width:10px;height:10px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.10);flex:0 0 auto}.ops-posture-warning .ops-posture-dot{background:#d97706;box-shadow:0 0 0 5px rgba(217,119,6,.10)}.ops-posture-critical .ops-posture-dot{background:#dc2626;box-shadow:0 0 0 5px rgba(220,38,38,.10)}.ops-command-label,.ops-command-state span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted)}.ops-posture strong{font-size:.94rem;margin-top:2px}.ops-command-state strong{font-size:.86rem;margin-top:5px;color:var(--text-strong)}.ops-priority-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}.ops-priority-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.ops-priority-card:hover{transform:translateY(-1px);text-decoration:none;border-color:color-mix(in srgb,var(--primary) 35%,var(--border));box-shadow:var(--shadow-md)}.ops-priority-index{font-size:.7rem;font-weight:900;letter-spacing:.08em;color:var(--primary)}.ops-priority-card strong{display:block;font-size:.9rem}.ops-priority-card span:not(.ops-priority-index){display:block;margin-top:3px;font-size:.76rem;color:var(--muted)}.ops-priority-card b{font-size:.78rem;white-space:nowrap;color:var(--text-strong)}
@media (max-width:1100px){.ops-command-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-command-strip>div:nth-child(2n){border-right:0}.ops-command-strip>div{border-bottom:1px solid var(--border)}.ops-priority-grid{grid-template-columns:1fr}.ops-command-strip>div:last-child{border-bottom:0}}
@media (max-width:720px){.ops-command-strip{grid-template-columns:1fr}.ops-command-strip>div,.ops-command-strip>div:nth-child(2n){border-right:0;border-bottom:1px solid var(--border)}.ops-command-strip>div:last-child{border-bottom:0}.ops-priority-card{grid-template-columns:auto 1fr}.ops-priority-card b{grid-column:2}}

/* v5.72.0 — SOC Command Center 2.0 */
.soc-command-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 14px;padding:20px 22px;}
.soc-command-strip h2{margin:4px 0 5px;font-size:1.25rem;}
.soc-command-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:130px;}
.soc-command-status small,.soc-command-kpi small{color:var(--muted);}
.soc-command-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 16px;}
.soc-command-kpi{padding:17px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface,var(--card));box-shadow:var(--shadow-sm);}
.soc-command-kpi span{display:block;color:var(--muted);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;}
.soc-command-kpi strong{display:block;margin:7px 0 3px;font-size:1.55rem;color:var(--text-strong,var(--text));}
.soc-domain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px;}
.soc-domain-card{display:block;padding:17px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface,var(--card));color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm);}
.soc-domain-card:hover{border-color:var(--primary);transform:translateY(-1px);}
.soc-domain-card strong{display:block;margin-bottom:6px;color:var(--text-strong,var(--text));}
.soc-domain-card span{display:block;color:var(--muted);line-height:1.45;font-size:.9rem;}
@media(max-width:1050px){.soc-command-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.soc-domain-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.soc-command-strip{align-items:flex-start;flex-direction:column}.soc-command-status{align-items:flex-start}.soc-command-grid,.soc-domain-grid{grid-template-columns:1fr;}}


/* v5.72.3/5.72.4 — Adaptive company-name wordmark with immutable REDTURBAN parent identity. */
.brand-wordmark {
  display:inline-flex; align-items:baseline; gap:.32em; max-width:100%;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:950; line-height:.96; letter-spacing:.055em; text-transform:uppercase;
  white-space:normal; overflow-wrap:anywhere;
}
.brand-wordmark-primary { color:var(--rt-red,#D71920); }
.brand-wordmark-secondary { color:var(--rt-navy,#0B1728); }
html[data-theme="dark"] .brand-wordmark-secondary { color:#fff; }
.brand-wordmark-short { font-size:1.08rem; }
.brand-wordmark-medium { font-size:.96rem; letter-spacing:.035em; }
.brand-wordmark-long { font-size:.82rem; letter-spacing:.015em; }
.brand-wordmark-single .brand-wordmark-primary {
  background:linear-gradient(90deg,var(--rt-red,#D71920),color-mix(in srgb,var(--rt-red,#D71920) 72%,var(--rt-gold,#D4A017)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-wordmark-sidebar { font-size:.82rem; max-width:100%; text-align:center; justify-content:center; letter-spacing:.045em; }
.brand-wordmark-rail { font-size:1.28rem; max-width:min(360px,42vw); }
.brand-wordmark-auth { font-size:clamp(1.55rem,3.5vw,2.7rem); max-width:100%; }
.brand-name-field { min-width:0; }
.brand-name-preview { margin-top:10px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-muted); }
.brand-name-preview small { display:block; margin-bottom:8px; color:var(--text-muted); font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.brand-name-preview > span { display:block; margin-top:7px; color:var(--text-muted); font-size:.68rem; line-height:1.4; }
.brand-wordmark-preview { font-size:1.05rem; }
.rt-brand-rail-text { width:auto !important; max-width:44vw; height:auto !important; min-width:0 !important; flex-basis:auto !important; overflow:visible !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; }
.rt-brand-rail-text .brand-wordmark { display:inline-flex; }
.rt-brand-custom-logo { display:block; width:auto; max-width:220px; max-height:62px; object-fit:contain; object-position:left center; }
html[data-theme="dark"] .rt-brand-rail-text .brand-wordmark-secondary { color:#fff; }
@media (max-width:760px) {
  .brand-wordmark-rail { font-size:1rem; max-width:44vw; }
  .brand-wordmark-auth { font-size:1.65rem; }
  .rt-brand-custom-logo { max-width:150px; max-height:52px; }
}
@media (max-width:560px) {
  .brand-wordmark-rail { font-size:.88rem; letter-spacing:.025em; max-width:46vw; }
  .brand-wordmark-long.brand-wordmark-rail { font-size:.72rem; }
}

.brand-preview-official { display:block; width:auto; max-width:min(300px,100%); max-height:58px; object-fit:contain; object-position:left center; }
@media (max-width:560px){ .brand-preview-official{max-width:240px;max-height:48px;} }

/* v5.72.5 — Logo-derived client/company wordmark; product rail remains immutable REDTURBAN. */
.brand-client-wordmark {
  display:inline-flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:.3em; max-width:100%;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:950; line-height:.96; letter-spacing:.055em; text-transform:uppercase;
  white-space:normal; overflow-wrap:anywhere; color:var(--client-brand-primary,var(--text-strong,#f8fafc));
}
.brand-client-wordmark span { color:var(--client-brand-primary,var(--text-strong,#f8fafc)); }
.brand-client-wordmark-sidebar { width:100%; font-size:.92rem; text-align:center; }
.brand-client-wordmark-short { font-size:1.02rem; }
.brand-client-wordmark-medium { font-size:.92rem; letter-spacing:.035em; }
.brand-client-wordmark-long { font-size:.78rem; letter-spacing:.012em; }
html[data-sidebar-collapsed="1"] .brand-client-wordmark-sidebar,
.sidebar.collapsed .brand-client-wordmark-sidebar { display:none; }


/* v5.72.6 — Authentication keeps immutable REDTURBAN product identity; client branding remains sidebar-owned. */
/* The client logo is the visual anchor; its adaptive company name belongs below it,
   not beside it. This prevents long names from collapsing into a vertical stack. */
.sidebar-brand {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 10px 12px;
}
.sidebar-brand-home {
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.sidebar-brand-mark {
  width: min(228px, 100%);
  height: 72px;
  flex: 0 0 72px;
  padding: 0 10px;
}
.sidebar-brand-copy {
  width: 100%;
  min-width: 0;
  align-items: center;
  text-align: center;
}
.brand-client-wordmark-sidebar {
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: center;
  font-size: .88rem;
  letter-spacing: .025em;
}
.brand-client-wordmark-sidebar.brand-client-wordmark-short { font-size: .96rem; }
.brand-client-wordmark-sidebar.brand-client-wordmark-medium { font-size: .86rem; }
.brand-client-wordmark-sidebar.brand-client-wordmark-long { font-size: .74rem; letter-spacing: .01em; }

/* Authentication must never substitute client/company branding for the product mark. */
.auth-logo-wrap .brand-wordmark-auth { display: none !important; }
@media (max-width: 860px) {
  .sidebar-brand { flex-direction: row; align-items: center; justify-content: flex-start; }
  .sidebar-brand-home { flex-direction: row; align-items: center; }
  .sidebar-brand-mark { width: 228px; }
  .sidebar-brand-copy { width: auto; align-items: flex-start; text-align: left; }
  .brand-client-wordmark-sidebar { text-align: left; justify-content: flex-start; }
}


/* v5.72.9 — Keep the complete REDTURBAN heritage artwork inside the right auth pane.
   The source artwork is 1678×530 (3.17:1). Width-driven rendering preserves the
   complete composition without crop, stretch or full-page takeover. */
.auth-content > .auth-heritage-banner {
  width:100%;
  max-width:980px;
  margin:0 auto 22px;
  background:#f8f4d9;
  border:1px solid rgba(15,23,42,.12);
  border-radius:18px;
  overflow:hidden;
  line-height:0;
  box-shadow:0 12px 34px rgba(15,23,42,.10);
  flex:0 0 auto;
}
.auth-content > .auth-heritage-banner img {
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center center;
}
html[data-theme="dark"] .auth-content > .auth-heritage-banner {
  border-color:rgba(255,255,255,.12);
  box-shadow:0 16px 42px rgba(0,0,0,.28);
}
.brand-client-wordmark-sidebar {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:0 1 auto !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  text-align:center !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:.018em !important;
}
.brand-client-wordmark-sidebar > span {
  display:inline !important;
  white-space:nowrap !important;
  overflow:visible !important;
}
.brand-client-wordmark-sidebar.brand-client-wordmark-short { font-size:.92rem !important; }
.brand-client-wordmark-sidebar.brand-client-wordmark-medium { font-size:.78rem !important; letter-spacing:.012em !important; }
.brand-client-wordmark-sidebar.brand-client-wordmark-long { font-size:.60rem !important; letter-spacing:.004em !important; }
.brand-client-wordmark-sidebar.brand-client-wordmark-single { font-size:.98rem !important; }
@media (max-width:560px) {
  .auth-content > .auth-heritage-banner { margin-bottom:16px; border-radius:14px; }
  .brand-client-wordmark-sidebar.brand-client-wordmark-long { font-size:.56rem !important; }
}


/* v5.73.0 — Adaptive company identity must render at the actual brand surface,
   not merely as a descriptive preview. Keep the complete name on one line and
   scale only when the available surface is narrower than the wordmark. */
.brand-client-wordmark,
.brand-wordmark-preview {
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  overflow:visible !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  max-width:none !important;
  width:max-content;
  transform-origin:left center;
}
.brand-client-wordmark .brand-wordmark-primary,
.brand-wordmark-preview .brand-wordmark-primary { color:var(--rt-red,#D71920) !important; }
.brand-client-wordmark .brand-wordmark-secondary,
.brand-wordmark-preview .brand-wordmark-secondary { color:var(--rt-navy,#0B1728) !important; }
html[data-theme="dark"] .brand-client-wordmark .brand-wordmark-secondary,
html[data-theme="dark"] .brand-wordmark-preview .brand-wordmark-secondary { color:#fff !important; }

.brand-letterhead-preview {
  width:100%;
  overflow:hidden;
  min-height:58px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--border);
  background:#fffef0;
  padding:0 2px 10px;
}
.brand-letterhead-preview #companyBrandPreview {
  min-width:0;
  width:100%;
  overflow:hidden;
}
.brand-letterhead-preview .brand-wordmark-preview,
.brand-letterhead-preview .brand-preview-official {
  display:block;
  max-width:none;
}
.brand-name-preview > span { margin-top:10px; }

.invoice-company-wordmark { min-width:0; }
.invoice-company-wordmark .brand-wordmark-invoice {
  font-size:clamp(1.15rem,2vw,1.65rem);
  letter-spacing:.02em;
}

@media (max-width:760px) {
  .brand-letterhead-preview { min-height:50px; }
  .invoice-company-wordmark .brand-wordmark-invoice { font-size:1.05rem; }
}


/* v5.74.0 — Actual client/company identity surface.
   The administrator-controlled company name is the visible sidebar identity.
   Uploaded client logos remain data available for document/asset contexts, but
   they must not replace the configured company-name wordmark in the navigation. */
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] {
  width: min(228px, 100%);
  height: 56px;
  flex: 0 0 56px;
  padding: 0 10px;
  background: #fffef0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
}
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .brand-client-wordmark-sidebar {
  display: inline-flex !important;
  align-items: baseline;
  justify-content: center !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
  font-size: .80rem !important;
  transform-origin: center center;
}
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .brand-client-wordmark-sidebar.brand-client-wordmark-short { font-size: 1.02rem !important; }
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .brand-client-wordmark-sidebar.brand-client-wordmark-medium { font-size: .90rem !important; }
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .brand-client-wordmark-sidebar.brand-client-wordmark-long { font-size: .78rem !important; }
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .brand-wordmark-primary { color: var(--rt-red,#D71920) !important; }
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .brand-wordmark-secondary { color: var(--rt-navy,#0B1728) !important; }
html[data-theme="dark"] #appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .brand-wordmark-secondary { color: #0B1728 !important; }
@media (max-width: 560px) {
  #appSidebar .sidebar-brand-mark[data-client-company-identity="1"] { height: 52px; flex-basis: 52px; }
  #appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .brand-client-wordmark-sidebar.brand-client-wordmark-long { font-size: .70rem !important; }
}


/* v5.75.0 — Uploaded company logo above adaptive company name.
   The logo remains the administrator-uploaded visual identity; the configured
   company name is rendered immediately below it, followed by the company tagline.
   The outer brand surface is intentionally lightly bounded and softly rounded. */
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] {
  width: min(228px, 100%);
  height: 72px;
  flex: 0 0 72px;
  padding: 0;
  background: transparent;
  border-radius: 10px;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .sidebar-company-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 212px;
  max-height: 64px;
  object-fit: contain;
  object-position: center;
  border-radius: 13px;
  background: #fffef0;
  padding: 7px 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
#appSidebar .sidebar-brand-copy {
  gap: 4px;
  margin-top: 0;
}
#appSidebar .sidebar-brand-copy .brand-client-wordmark-sidebar {
  display: inline-flex !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .82rem !important;
  letter-spacing: .012em !important;
  line-height: 1.05 !important;
}
#appSidebar .sidebar-brand-copy > span {
  display: block;
  width: 100%;
  color: #aeb7c5;
  font-size: .74rem;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  #appSidebar .sidebar-brand-mark[data-client-company-identity="1"] { height: 64px; flex-basis: 64px; }
  #appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .sidebar-company-logo { max-width: 205px; max-height: 58px; }
  #appSidebar .sidebar-brand-copy .brand-client-wordmark-sidebar { font-size: .76rem !important; }
}

/* v5.76.0 — Client brand hierarchy correction.
   The uploaded logo keeps its own intrinsic artwork/boundary.
   The adaptive company-name treatment is a separate, smaller surface below it.
   The configured tagline remains plain text below the company name. */
#appSidebar .sidebar-brand-home {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
}
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] {
  width: 100% !important;
  height: auto !important;
  min-height: 62px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .sidebar-company-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 212px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#appSidebar .sidebar-brand-copy {
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}
#appSidebar .sidebar-brand-copy .brand-client-wordmark-sidebar {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: calc(100% - 12px) !important;
  min-width: 0 !important;
  padding: 3px 8px !important;
  box-sizing: border-box !important;
  background: #fffef0 !important;
  border: 1px solid rgba(11,23,40,.08) !important;
  border-radius: 7px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-weight: 950 !important;
  letter-spacing: .005em !important;
  line-height: 1 !important;
  font-size: .74rem !important;
}
#appSidebar .sidebar-brand-copy .brand-client-wordmark-sidebar.brand-client-wordmark-short { font-size: .82rem !important; }
#appSidebar .sidebar-brand-copy .brand-client-wordmark-sidebar.brand-client-wordmark-medium { font-size: .77rem !important; }
#appSidebar .sidebar-brand-copy .brand-client-wordmark-sidebar.brand-client-wordmark-long { font-size: .70rem !important; }
#appSidebar .sidebar-brand-copy > span:last-child:not(.brand-client-wordmark-sidebar) {
  color: #aab4c5 !important;
  font-size: .66rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 560px) {
  #appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .sidebar-company-logo { max-width: 202px !important; max-height: 60px !important; }
  #appSidebar .sidebar-brand-copy .brand-client-wordmark-sidebar.brand-client-wordmark-long { font-size: .66rem !important; }
}

/* v5.76.0 — AI Operations advisory surface */
.ai-operations-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ai-operations-advisor { min-width:0; padding:15px; border:1px solid var(--border); border-radius:13px; background:var(--card); }
.ai-operations-advisor-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ai-operations-advisor h3 { margin:0 0 8px!important; font-size:14px!important; }
.ai-operations-advisor p { margin:6px 0; font-size:12px; line-height:1.45; }
@media(max-width:800px){.ai-operations-grid{grid-template-columns:1fr}}


/* v5.78.0 — Preserve the uploaded logo's own visual boundary.
   The logo must remain a distinct bounded visual asset; only the company-name
   treatment below it uses the smaller text-sized rounded surface. */
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .sidebar-company-logo {
  background:#fffef0 !important;
  border:1px solid rgba(11,23,40,.08) !important;
  border-radius:12px !important;
  padding:6px 9px !important;
  box-sizing:content-box !important;
  box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
  max-width:212px !important;
  max-height:64px !important;
}
@media (max-width:560px) {
  #appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .sidebar-company-logo {
    max-width:202px !important;
    max-height:60px !important;
  }
}

/* v5.78.0 — AI Operations Decision Center */
.ai-decision-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ai-decision-card { min-width:0; padding:15px; border:1px solid var(--border); border-radius:13px; background:var(--card); }
.ai-decision-card h3 { margin:0 0 8px!important; font-size:14px!important; }
.ai-decision-card p { margin:6px 0; font-size:12px; line-height:1.45; }
.inline-form { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.inline-form input[name="notes"] { min-width:150px; max-width:220px; }
@media(max-width:800px){.ai-decision-grid{grid-template-columns:1fr}.inline-form input[name="notes"]{min-width:100%;max-width:none}}

/* v5.79.0 — Uploaded logo intrinsic-size contract.
   Expanded mode must render the uploaded company logo at its intrinsic CSS
   dimensions: no artificial shrink/expand, no padding that changes the logo
   boundary, and no max-size clamp. The boundary belongs to the actual logo.
   Collapsed sidebar is the only intentional shrink mode and scales the whole
   logo proportionally so no artwork is cropped. */
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .sidebar-company-logo {
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 auto !important;
  box-sizing:content-box !important;
  object-fit:contain !important;
  object-position:center !important;
  border:1px solid rgba(11,23,40,.08) !important;
  border-radius:12px !important;
  background:#fffef0 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
  display:block !important;
}
#appSidebar .sidebar-brand-mark[data-client-company-identity="1"] {
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  min-width:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
/* v5.79.0 — Collapsed/shrink mode: scale the complete uploaded logo to the
   available compact rail; preserve aspect ratio and never crop the artwork. */
#appSidebar.collapsed .sidebar-brand-mark[data-client-company-identity="1"] .sidebar-company-logo,
html[data-sidebar-collapsed="1"] #appSidebar .sidebar-brand-mark[data-client-company-identity="1"] .sidebar-company-logo {
  width:auto !important;
  height:auto !important;
  max-width:calc(100% - 10px) !important;
  max-height:48px !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:9px !important;
}
#appSidebar.collapsed .sidebar-brand-mark[data-client-company-identity="1"],
html[data-sidebar-collapsed="1"] #appSidebar .sidebar-brand-mark[data-client-company-identity="1"] {
  width:64px !important;
  height:52px !important;
  min-width:64px !important;
  min-height:52px !important;
  flex:0 0 52px !important;
}