:root, [data-theme="atlassian-light"], html[data-theme="atlassian-light"] {
  color-scheme: light;
  --bg: #FAFBFC;
  --bg-2: #F4F5F7;
  --shell: #FFFFFF;
  --sidebar-bg: #F4F5F7;
  --sidebar-text: #172B4D;
  --panel: #FFFFFF;
  --panel-solid: #FFFFFF;
  --panel-soft: #FAFBFC;
  --panel-deep: #F4F5F7;
  --line: #DFE1E6;
  --line-strong: #0052CC;
  --text: #172B4D;
  --muted: #5E6C84;
  --faint: #7A869A;
  --blue: #0052CC;
  --blue-strong: #0747A6;
  --cyan: #00B8D9;
  --green: #36B37E;
  --amber: #FFAB00;
  --red: #FF5630;
  --violet: #6554C0;
  --shadow: 0 1px 1px rgba(9, 30, 66, 0.25);
  --glow-blue: 0 0 0 2px #4C9AFF;
  --radius: 3px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-code: SFMono-Medium, "SF Mono", "Segoe UI Mono", "Roboto Mono", monospace;
  /* Semantic surface tokens */
  --surface-glass: rgba(255, 255, 255, 0.7);
  --table-head-bg: rgba(244, 245, 247, 0.9);
  --code-bg: #F8FAFC;
  --code-text: #4C1D95;
  --input-bg: #FFFFFF;
  --env-select-bg: rgba(244, 245, 247, 0.9);
  --timeline-item-bg: rgba(244, 245, 247, 0.6);
  --explain-box-bg: rgba(244, 245, 247, 0.5);
  --vault-bg: rgba(244, 245, 247, 0.4);
}

[data-theme="atlassian-dark"], html[data-theme="atlassian-dark"] {
  color-scheme: dark;
  --bg: #070C14;
  --bg-2: #0B1220;
  --shell: #0F172A;
  --sidebar-bg: #0A0F1D;
  --sidebar-text: #F8FAFC;
  --panel: #0F172A;
  --panel-solid: #0F172A;
  --panel-soft: #141E33;
  --panel-deep: #0B1220;
  --line: #1E293B;
  --line-strong: #3B82F6;
  --text: #F8FAFC;
  --muted: #94A3B8;
  --faint: #64748B;
  --blue: #3B82F6;
  --blue-strong: #2563EB;
  --cyan: #00B8D9;
  --green: #10B981;
  --amber: #F59E0B;
  --red: #EF4444;
  --violet: #8B5CF6;
  --shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4);
  --radius: 6px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  /* Semantic surface tokens */
  --surface-glass: rgba(15, 23, 42, 0.7);
  --table-head-bg: rgba(5, 16, 32, 0.42);
  --code-bg: rgba(2, 6, 23, 0.82);
  --code-text: #c4b5fd;
  --input-bg: #141E33;
  --env-select-bg: rgba(8, 23, 43, 0.7);
  --timeline-item-bg: rgba(5, 16, 32, 0.34);
  --explain-box-bg: rgba(5, 16, 32, 0.28);
  --vault-bg: rgba(5, 16, 32, 0.2);
}

[data-theme="enterprise"], html[data-theme="enterprise"] {
  color-scheme: light;
  --bg: #CBD5E1;
  --bg-2: #94A3B8;
  --shell: #FFFFFF;
  --sidebar-bg: #0F172A;
  --sidebar-text: #F8FAFC;
  --panel: #FFFFFF;
  --panel-solid: #FFFFFF;
  --panel-soft: #F1F5F9;
  --panel-deep: #E2E8F0;
  --line: #64748B;
  --line-strong: #1E3A8A;
  --text: #0F172A;
  --muted: #334155;
  --faint: #475569;
  --blue: #1D4ED8;
  --blue-strong: #1E3A8A;
  --cyan: #0284C7;
  --green: #15803D;
  --amber: #B45309;
  --red: #B91C1C;
  --violet: #6D28D9;
  --shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  --radius: 2px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  /* Semantic surface tokens */
  --surface-glass: rgba(255, 255, 255, 0.75);
  --table-head-bg: rgba(226, 232, 240, 0.9);
  --code-bg: #F1F5F9;
  --code-text: #1E3A8A;
  --input-bg: #FFFFFF;
  --env-select-bg: rgba(241, 245, 249, 0.9);
  --timeline-item-bg: rgba(226, 232, 240, 0.6);
  --explain-box-bg: rgba(226, 232, 240, 0.5);
  --vault-bg: rgba(226, 232, 240, 0.4);
}

[data-theme="clean"], html[data-theme="clean"] {
  color-scheme: light;
  --bg: #F3F4F6;
  --bg-2: #E5E7EB;
  --shell: #FFFFFF;
  --sidebar-bg: #FFFFFF;
  --sidebar-text: #111827;
  --panel: #FFFFFF;
  --panel-solid: #FFFFFF;
  --panel-soft: #F9FAFB;
  --panel-deep: #F3F4F6;
  --line: #D1D5DB;
  --line-strong: #059669;
  --text: #111827;
  --muted: #4B5563;
  --faint: #6B7280;
  --blue: #059669;
  --blue-strong: #047857;
  --cyan: #0891B2;
  --green: #059669;
  --amber: #D97706;
  --red: #DC2626;
  --violet: #7C3AED;
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  /* Semantic surface tokens */
  --surface-glass: rgba(255, 255, 255, 0.8);
  --table-head-bg: rgba(243, 244, 246, 0.95);
  --code-bg: #F9FAFB;
  --code-text: #065F46;
  --input-bg: #FFFFFF;
  --env-select-bg: rgba(249, 250, 251, 0.95);
  --timeline-item-bg: rgba(243, 244, 246, 0.7);
  --explain-box-bg: rgba(243, 244, 246, 0.6);
  --vault-bg: rgba(243, 244, 246, 0.5);
}

[data-theme="elegant"], html[data-theme="elegant"] {
  color-scheme: dark;
  --bg: #090D16;
  --bg-2: #130D24;
  --shell: #17102B;
  --sidebar-bg: #0E0720;
  --sidebar-text: #F3E8FF;
  --panel: #17102B;
  --panel-solid: #17102B;
  --panel-soft: #231842;
  --panel-deep: #0E0720;
  --line: #6B21A8;
  --line-strong: #A855F7;
  --text: #F3E8FF;
  --muted: #D8B4FE;
  --faint: #A855F7;
  --blue: #A855F7;
  --blue-strong: #9333EA;
  --cyan: #06B6D4;
  --green: #10B981;
  --amber: #F59E0B;
  --red: #EC4899;
  --violet: #C084FC;
  --shadow: 0 8px 32px 0 rgba(168, 85, 247, 0.25);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  /* Semantic surface tokens */
  --surface-glass: rgba(23, 16, 43, 0.7);
  --table-head-bg: rgba(14, 7, 32, 0.6);
  --code-bg: rgba(9, 3, 22, 0.85);
  --code-text: #E9D5FF;
  --input-bg: #231842;
  --env-select-bg: rgba(14, 7, 32, 0.7);
  --timeline-item-bg: rgba(14, 7, 32, 0.4);
  --explain-box-bg: rgba(14, 7, 32, 0.35);
  --vault-bg: rgba(14, 7, 32, 0.3);
}

/*
 * Shared semantic roles. Every value below resolves through the active theme
 * palette, so components never need to know a specific brand RGB value.
 */
:root, [data-theme] {
  /* 8px layout grid with 4px half-step for compact component internals. */
  --space-0: 0;
  --space-0-5: 4px;
  --space-1: 8px;
  --space-1-5: 12px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --control-height-sm: 32px;
  --control-height: 40px;
  --control-height-lg: 48px;
  --panel-padding: 16px;
  --section-gap: 16px;
  --on-accent: #FFFFFF;
  --border: var(--line);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: var(--muted);
  --accent-cyan: var(--cyan);
  --blue-2: var(--blue);
  --surface-highlight: color-mix(in srgb, var(--text) 6%, transparent);
  --surface-highlight-strong: color-mix(in srgb, var(--text) 12%, transparent);
  --surface-overlay: color-mix(in srgb, var(--panel-deep) 82%, transparent);
  --surface-overlay-strong: color-mix(in srgb, var(--panel-deep) 94%, transparent);
  --surface-selected: color-mix(in srgb, var(--blue) 14%, var(--panel));
  --surface-selected-strong: color-mix(in srgb, var(--blue) 24%, var(--panel));
  --accent-soft: color-mix(in srgb, var(--blue) 12%, transparent);
  --accent-soft-strong: color-mix(in srgb, var(--blue) 24%, transparent);
  --accent-border: color-mix(in srgb, var(--blue) 42%, transparent);
  --accent-border-strong: color-mix(in srgb, var(--blue) 72%, transparent);
  --cyan-soft: color-mix(in srgb, var(--cyan) 12%, transparent);
  --cyan-border: color-mix(in srgb, var(--cyan) 34%, transparent);
  --success-soft: color-mix(in srgb, var(--green) 12%, transparent);
  --success-soft-strong: color-mix(in srgb, var(--green) 20%, transparent);
  --success-border: color-mix(in srgb, var(--green) 34%, transparent);
  --success-border-strong: color-mix(in srgb, var(--green) 62%, transparent);
  --warning-soft: color-mix(in srgb, var(--amber) 12%, transparent);
  --warning-soft-strong: color-mix(in srgb, var(--amber) 20%, transparent);
  --warning-border: color-mix(in srgb, var(--amber) 36%, transparent);
  --warning-border-strong: color-mix(in srgb, var(--amber) 68%, transparent);
  --danger-soft: color-mix(in srgb, var(--red) 12%, transparent);
  --danger-soft-strong: color-mix(in srgb, var(--red) 20%, transparent);
  --danger-border: color-mix(in srgb, var(--red) 36%, transparent);
  --danger-border-strong: color-mix(in srgb, var(--red) 68%, transparent);
  --violet-soft: color-mix(in srgb, var(--violet) 14%, transparent);
  --violet-border: color-mix(in srgb, var(--violet) 42%, transparent);
  --muted-soft: color-mix(in srgb, var(--muted) 12%, transparent);
  --muted-border: color-mix(in srgb, var(--muted) 22%, transparent);
  --muted-border-strong: color-mix(in srgb, var(--muted) 58%, transparent);
  --canvas-grid: color-mix(in srgb, var(--blue) 18%, transparent);
  --canvas-edge: color-mix(in srgb, var(--muted) 62%, transparent);
  --shadow-color: color-mix(in srgb, var(--text) 24%, transparent);
  --shadow-color-strong: color-mix(in srgb, var(--text) 42%, transparent);
  --focus-ring: 0 0 0 3px var(--accent-soft-strong);
  --brand-gradient: linear-gradient(135deg, var(--blue), var(--violet));
  --hero-gradient: linear-gradient(135deg, var(--panel-soft), var(--panel-deep));
  --status-gradient: linear-gradient(90deg, var(--green), var(--blue), var(--amber), var(--violet));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.side-rail, .panel, .metric-card, .console-topbar, .connection-strip, .role-strip > div {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
button, input, select { font: inherit; }
button { color: inherit; }
button, input, select, textarea { border-radius: var(--radius-md); }
.panel, .metric-card, .connection-strip, .role-strip > div, .side-card, .environment-card {
  border-radius: var(--radius-lg);
}

/* Atlassian Design System Components */
.ak-lozenge {
  display: inline-flex; align-items: center; padding: 2px 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  border-radius: var(--radius-sm); letter-spacing: 0.5px; line-height: 1.2;
}
.ak-lozenge-success { background: var(--success-soft); color: var(--green); }
.ak-lozenge-error { background: var(--danger-soft); color: var(--red); }
.ak-lozenge-inprogress { background: var(--accent-soft); color: var(--blue); }
.ak-lozenge-moved { background: var(--warning-soft); color: var(--amber); }
.ak-lozenge-default { background: var(--panel-soft); color: var(--muted); }

.ak-key-tag {
  font-family: var(--font-code); font-size: 12px; font-weight: 600;
  color: var(--blue); background: var(--accent-soft); padding: 2px 6px;
  border-radius: var(--radius-sm); border: 1px solid var(--accent-border); display: inline-block;
}

.ak-breadcrumbs {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); margin-bottom: 8px; font-weight: 500;
}
.ak-breadcrumbs span.active { color: var(--text); font-weight: 600; }
.enterprise-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.side-rail {
  position: sticky; top: 0; height: 100vh; padding: 18px 16px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
}
.brand-block { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); }
.brand-orb {
  width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--brand-gradient);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 30%, transparent);
  position: relative; flex: 0 0 auto;
}
.brand-orb span {
  width: 14px; height: 14px; border: 2px solid var(--on-accent); border-radius: var(--radius-sm);
}
.brand-orb:before, .brand-orb:after { display: none; }
.brand-block strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.brand-block span { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; font-weight: 500; }
.workspace-switcher {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--panel-soft); cursor: pointer; transition: background .16s ease;
}
.workspace-switcher:hover { background: var(--panel); border-color: var(--line-strong); }
.workspace-switcher > span {
  width: 26px; height: 26px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--blue) 15%, transparent); color: var(--blue);
  font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto;
}
.workspace-switcher div { flex: 1; min-width: 0; }
.workspace-switcher strong { display: block; font-size: 12px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.workspace-switcher small { display: block; color: var(--faint); font-size: 10px; }
.workspace-switcher em { font-style: normal; color: var(--muted); font-size: 12px; }

.nav-section-label, .mini-label, .eyebrow { color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 700; margin-top: 6px; }
.nav-list { display: grid; gap: 3px; }
.nav-link {
  width: 100%; border: 1px solid transparent; color: var(--muted); background: transparent; border-radius: var(--radius-md);
  padding: 8px 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; transition: all .16s ease;
  font-size: 13px; font-weight: 500;
}
.nav-link svg, .nav-link span { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); flex: 0 0 auto; stroke-width: 2; }
.nav-link:hover { background: var(--panel-soft); color: var(--text); }
.nav-link:hover svg, .nav-link:hover span { color: var(--blue); }
.nav-link.active { color: var(--on-accent); background: var(--blue-strong); border-color: transparent; box-shadow: 0 2px 6px color-mix(in srgb, var(--blue) 25%, transparent); font-weight: 600; }
.nav-link.active svg, .nav-link.active span { color: var(--on-accent); }

.environment-card, .side-card { border: 1px solid var(--line); background: var(--panel-soft); border-radius: var(--radius-md); padding: 12px; }
.environment-card { margin-top: auto; }
.env-row, .health-state { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.env-row span:last-child { margin-left: auto; color: var(--faint); font-size: 11px; }
.live-dot { width: 8px; height: 8px; background: var(--green); border-radius: 999px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); flex: 0 0 auto; }
.live-dot.small { width: 7px; height: 7px; box-shadow: none; }
.check-dot { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); font-size: 11px; font-weight: 700; }
.environment-btn { width: 100%; margin-top: 10px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-sm); padding: 7px 9px; display: flex; justify-content: space-between; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 500; transition: background .16s ease; }
.environment-btn:hover { background: var(--panel-soft); color: var(--text); }
.side-card p { color: var(--muted); margin: 6px 0 0; font-size: 11px; line-height: 1.4; }
.side-footer { display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: 11px; font-weight: 500; }

.console { min-width: 0; padding: 24px 32px 40px; }
.console-topbar { display: grid; grid-template-columns: 320px minmax(320px, 1fr) auto; gap: 20px; align-items: center; margin-bottom: 20px; }
.title-group h1 { margin: 0 0 2px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.title-group p { margin: 0; color: var(--muted); font-size: 13px; }
.global-search {
  height: 42px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  background: var(--panel-soft); border-radius: var(--radius-md); padding: 0 12px; transition: border-color .16s ease;
}
.global-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.global-search span { color: var(--muted); font-size: 15px; }
.global-search input { flex: 1; border: 0; background: transparent; outline: 0; color: var(--text); font-size: 13px; padding: 0; }
.global-search input::placeholder { color: var(--faint); }
kbd {
  border: 1px solid var(--line); color: var(--muted); padding: 3px 6px; border-radius: var(--radius-sm); font-size: 11px;
  background: color-mix(in srgb, var(--panel) 5%, transparent); font-family: inherit; font-weight: 600;
}
.top-actions { display: flex; align-items: center; gap: 10px; }
.env-select { height: 38px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 12px; display: flex; align-items: center; gap: 8px; background: var(--panel-soft); font-size: 12px; font-weight: 500; }
.icon-btn { position: relative; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--panel-soft); cursor: pointer; color: var(--muted); display: grid; place-items: center; transition: all .16s ease; }
.icon-btn:hover { background: var(--panel); border-color: var(--line-strong); color: var(--text); }
.notification-dot { position: absolute; top: -3px; right: -3px; width: 16px; height: 16px; border-radius: 999px; background: var(--red); color: var(--on-accent); display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.user-chip { display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--line); padding-left: 14px; }
.user-chip > span { width: 34px; height: 34px; border-radius: 999px; background: var(--brand-gradient); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: 13px; font-weight: 600; color: var(--text); }
.user-chip small { color: var(--muted); font-size: 11px; }

.connection-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 16px;
}
label { color: var(--muted); font-size: 11px; font-weight: 600; display: grid; gap: 4px; text-transform: uppercase; letter-spacing: .04em; }
input { min-height: 36px; border: 1px solid var(--line); background: var(--input-bg); color: var(--text); border-radius: var(--radius-md); padding: 0 10px; outline: none; font-size: 13px; transition: border-color .16s ease; }
:root.light input { background: var(--on-accent); }
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.primary-btn, .secondary-btn, .ghost-btn, .link-btn { min-height: 36px; border-radius: var(--radius-md); padding: 0 14px; cursor: pointer; transition: all .16s ease; white-space: nowrap; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.primary-btn { border: 1px solid transparent; background: var(--blue-strong); color: var(--on-accent); font-weight: 600; box-shadow: 0 1px 3px color-mix(in srgb, var(--blue) 30%, transparent); }
.secondary-btn, .ghost-btn, .link-btn { border: 1px solid var(--line); background: var(--panel-soft); color: var(--text); }
.link-btn { color: var(--blue); background: transparent; border-color: transparent; padding: 0; min-height: auto; }
.primary-btn:hover { background: var(--blue); }
.secondary-btn:hover, .ghost-btn:hover { background: var(--panel); border-color: var(--line-strong); }
.link-btn:hover { text-decoration: underline; }
.primary-btn:disabled { opacity: .65; cursor: not-allowed; }

.role-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.role-strip > div { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-md); padding: 10px 14px; }
.role-strip span { display: block; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.role-strip strong { display: block; margin-top: 3px; color: var(--text); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.view { display: none; }
.view.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric-card, .panel { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
:root.light .metric-card, :root.light .panel { background: var(--panel); }
.metric-card {
  position: relative; overflow: hidden; min-height: 115px; padding: 16px 16px 12px 64px;
  transition: border-color .16s ease;
}
.metric-card:hover { border-color: var(--line-strong); }
.metric-card:after { display: none; }
.metric-card.blue { color: var(--blue); } .metric-card.cyan { color: var(--cyan); } .metric-card.green { color: var(--green); } .metric-card.violet { color: var(--violet); } .metric-card.amber { color: var(--amber); }
.metric-icon {
  position: absolute; left: 14px; top: 16px; width: 38px; height: 38px; border-radius: var(--radius-md);
  display: grid; place-items: center; background: var(--panel-soft); color: currentColor;
  border: 1px solid var(--line); font-size: 16px; font-weight: 700; box-shadow: none;
}
.metric-card span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.metric-card strong { display: block; margin: 4px 0 2px; color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metric-card small { color: var(--green); font-size: 11px; font-weight: 500; }

.command-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); gap: 16px; margin-bottom: 16px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.span-12 { grid-column: span 12; } .span-7 { grid-column: span 7; } .span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; } .span-3 { grid-column: span 3; }
.panel { padding: 18px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.panel-head h3 { margin: 2px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.helper { color: var(--muted); line-height: 1.5; font-size: 13px; }
.workflow-canvas-panel { min-height: 380px; position: relative; }
.orchestration-canvas { min-height: 292px; border: 1px solid var(--line); border-radius: var(--radius-md); background-image: radial-gradient(color-mix(in srgb, var(--panel) 6%, transparent) 1px, transparent 1px); background-size: 16px 16px; padding: 30px 24px; display: grid; grid-template-columns: 140px 34px 140px 34px 140px 34px 140px; align-items: center; justify-content: center; gap: 0; position: relative; overflow: hidden; background-color: var(--panel-soft); }
.workflow-node { min-height: 68px; border-radius: var(--radius-md); border: 1px solid var(--line); padding: 10px 10px 10px 44px; position: relative; background: var(--panel); box-shadow: var(--shadow); }
.workflow-node span { position: absolute; left: 10px; top: 14px; width: 24px; height: 24px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.workflow-node strong, .workflow-node small { display: block; }
.workflow-node strong { font-size: 13px; font-weight: 600; }
.workflow-node small { color: var(--muted); margin-top: 2px; font-size: 11px; }
.workflow-node b { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 999px; background: var(--green); color: var(--on-accent); display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.workflow-node.trigger { border-color: color-mix(in srgb, var(--green) 30%, transparent); } .workflow-node.trigger span { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.workflow-node.identity { border-color: color-mix(in srgb, var(--blue) 30%, transparent); } .workflow-node.identity span { background: color-mix(in srgb, var(--blue) 15%, transparent); color: var(--blue); }
.workflow-node.context { border-color: color-mix(in srgb, var(--violet) 30%, transparent); } .workflow-node.context span { background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--violet); }
.workflow-node.action { border-color: color-mix(in srgb, var(--amber) 30%, transparent); } .workflow-node.action span { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.workflow-node.review { grid-column: 2 / span 2; grid-row: 2; margin-top: 48px; border-color: color-mix(in srgb, var(--violet) 30%, transparent); } .workflow-node.review span { background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--violet); }
.workflow-node.evidence { grid-column: 4 / span 2; grid-row: 2; margin-top: 48px; border-color: color-mix(in srgb, var(--cyan) 30%, transparent); } .workflow-node.evidence span { background: color-mix(in srgb, var(--cyan) 15%, transparent); color: var(--cyan); }
.workflow-node.output { grid-column: 6 / span 2; grid-row: 2; margin-top: 48px; border-color: color-mix(in srgb, var(--green) 30%, transparent); } .workflow-node.output span { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.connector { height: 2px; background: var(--line); position: relative; }
.connector:after { content: ""; position: absolute; right: 0; top: -4px; border-left: 6px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.workflow-branch { display: none; }
.canvas-tools { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.canvas-tools button { width: 30px; height: 28px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; } .canvas-tools button:last-child { border-right: 0; }
.compact .enterprise-table { min-width: 0; }
.dot-status { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 12px; font-weight: 500; } .dot-status:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .dot-status.warning { color: var(--amber); }
.sla-bar { display: block; height: 6px; width: 100px; border-radius: 999px; background: var(--line); overflow: hidden; } .sla-bar i { display: block; height: 100%; background: var(--green); }
.analytics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.analytics-grid span { color: var(--muted); font-size: 12px; font-weight: 500; } .analytics-grid strong { display: block; font-size: 22px; font-weight: 700; margin: 4px 0; color: var(--text); } .analytics-grid small { color: var(--green); font-size: 11px; font-weight: 500; }
.mini-chart { height: 72px; margin-top: 10px; border-radius: var(--radius-md); background: var(--panel-soft); border: 1px solid var(--line); opacity: .85; }
.mini-chart.blue { color: var(--blue); } .mini-chart.violet { color: var(--violet); } .mini-chart.red { color: var(--red); }
.period-chip { border: 1px solid var(--line); padding: 6px 10px; border-radius: var(--radius-sm); color: var(--muted); font-size: 12px; font-weight: 500; }
.governance-list { display: grid; gap: 0; }
.governance-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.governance-list > div:last-child { border-bottom: 0; }
.governance-list strong { color: var(--green); font-size: 12px; font-weight: 600; }
.governance-list em { font-style: normal; color: var(--muted); background: var(--panel-soft); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; }
.status-pill, .risk-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-sm); padding: 4px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; border: 1px solid transparent; white-space: nowrap; }
.status-pill.allowed, .status-pill.released, .status-pill.passed, .status-pill.good, .risk-chip.low { color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.status-pill.blocked, .status-pill.failed, .risk-chip.critical { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.status-pill.pending_review, .status-pill.warn, .risk-chip.high, .risk-chip.medium { color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.status-pill.neutral { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); border-color: color-mix(in srgb, var(--cyan) 25%, transparent); }
.chain-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.chain-node { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 6px; text-align: center; color: var(--muted); font-size: 11px; font-weight: 500; background: var(--panel-soft); }
.chain-node.done { color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); background: color-mix(in srgb, var(--green) 8%, transparent); }
.chain-node.warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.decision-grid { display: grid; gap: 10px; }
.decision-card, .review-card, .audit-record, .key-value, .verification-card, .endpoint-list > div, .role-card, .attention-item { border: 1px solid var(--line); background: var(--panel-soft); border-radius: var(--radius-md); padding: 12px 14px; }
:root.light .decision-card, :root.light .review-card, :root.light .audit-record, :root.light .key-value, :root.light .verification-card, :root.light .endpoint-list > div, :root.light .role-card, :root.light .attention-item { background: var(--panel-soft); }
.decision-card header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.decision-card h4 { margin: 0; font-size: 14px; font-weight: 600; }
.decision-card p { color: var(--muted); line-height: 1.45; margin-bottom: 10px; font-size: 13px; }
.kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.key-value span { display:block; color: var(--faint); font-size: 11px; text-transform:uppercase; letter-spacing:.06em; font-weight:900; }
.key-value strong { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; }
.vault-card { display:grid; place-items:center; min-height: 300px; text-align:center; border:1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 24px; background: var(--vault-bg); }
.vault-icon { width: 62px; height:62px; display:grid; place-items:center; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--cyan); font-size: 26px; margin-bottom: 14px; box-shadow: 0 0 40px color-mix(in srgb, var(--cyan) 14%, transparent); }
.vault-card p { color: var(--muted); max-width: 360px; line-height:1.55; }
.timeline, .audit-list, .review-grid, .role-grid, .attention-list { display:grid; gap: 10px; }
.timeline-item { display:grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items:start; padding: 12px; border-radius: var(--radius-lg); border:1px solid var(--line); background: var(--timeline-item-bg); }
.timeline-dot { width: 10px; height: 10px; margin-top: 4px; border-radius:999px; background: var(--cyan); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cyan) 10%, transparent); }
.timeline-item small, .audit-record p, .review-card p, .attention-item p { color: var(--muted); line-height:1.45; }
.attention-item strong { display:block; margin-bottom: 4px; }
.attention-item p { margin:0; font-size: 13px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius: var(--radius-lg); }
.enterprise-table { width:100%; border-collapse: collapse; min-width: 760px; }
.enterprise-table th { color: var(--faint); font-size:11px; text-align:left; text-transform:uppercase; letter-spacing:.08em; padding: 13px 14px; background: var(--table-head-bg); }
.enterprise-table td { padding: 13px 14px; border-top:1px solid var(--line); vertical-align:middle; color: var(--muted); }
.enterprise-table td strong { color: var(--text); }
.empty-cell, .empty-state { color: var(--faint); text-align:center; padding: 26px; border:1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.form-grid .wide { grid-column: span 2; }
.explain-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.explain-box { border:1px solid var(--line); border-radius: var(--radius-lg); padding:14px; background: var(--explain-box-bg); }
.explain-box p { color: var(--muted); margin-bottom:0; line-height:1.5; }
.audit-record { display:grid; grid-template-columns: 165px minmax(0,1fr) auto; gap: 12px; align-items:start; }
.audit-record time { color: var(--faint); font-size: 12px; }
.audit-record code, .endpoint-list code { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); padding: 4px 7px; border-radius: var(--radius-md); font-size: 12px; }
.endpoint-list { display:grid; gap: 10px; }
.endpoint-list > div { display:flex; justify-content:space-between; gap: 10px; align-items:center; }
.code-box { min-height: 620px; overflow:auto; background: var(--code-bg); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; color: var(--code-text); font-size: 12px; line-height:1.55; }
/* :root.light .code-box override no longer needed — handled via --code-bg / --code-text variables */
.review-card header, .role-card header { display:flex; justify-content:space-between; gap:12px; align-items:start; margin-bottom: 8px; }
.review-actions { display:flex; gap: 8px; margin-top: 12px; }
.danger-btn, .success-btn { min-height: 36px; padding: 0 12px; border-radius: var(--radius-md); cursor:pointer; }
.danger-btn { border:1px solid color-mix(in srgb, var(--red) 34%, transparent); color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }
.success-btn { border:1px solid color-mix(in srgb, var(--green) 34%, transparent); color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); }
@media (max-width: 1360px) { .console-topbar { grid-template-columns: 1fr; } .top-actions { justify-content:space-between; } .metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .command-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .enterprise-shell { grid-template-columns: 1fr; } .side-rail { position:relative; height:auto; } .nav-list { grid-template-columns: repeat(4, minmax(0,1fr)); display:grid; } .metric-grid, .role-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } .span-7, .span-6, .span-5, .span-4, .span-3 { grid-column: span 12; } .orchestration-canvas { grid-template-columns: 1fr; gap:12px; } .connector { display:none; } .workflow-node, .workflow-node.review, .workflow-node.evidence, .workflow-node.output { grid-column:auto; grid-row:auto; margin-top:0; } }
@media (max-width: 760px) { .console { padding: 14px; } .connection-strip, .top-actions { display:grid; grid-template-columns: 1fr; } .nav-list, .metric-grid, .role-strip, .chain-rail, .form-grid, .explain-grid, .analytics-grid { grid-template-columns: 1fr; } .form-grid .wide { grid-column: auto; } .audit-record { grid-template-columns: 1fr; } .metric-card { padding-left: 18px; padding-top: 92px; } }

/* v1.5.0 live console interaction states */
.env-select { border:1px solid var(--line-strong); background: var(--env-select-bg); color: var(--text); cursor:pointer; }
.selectable-row { cursor:pointer; transition: background .18s ease, box-shadow .18s ease; }
.selectable-row:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.selectable-row.selected { background: color-mix(in srgb, var(--blue) 13%, transparent); box-shadow: inset 3px 0 0 var(--blue); }
.warn-text { color: var(--amber) !important; }
.workflow-node.live { box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 20%, transparent), 0 18px 40px color-mix(in srgb, var(--panel-deep) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); }
.workflow-node.live::after { content:""; position:absolute; right:10px; top:10px; width:8px; height:8px; border-radius:999px; background:var(--green); box-shadow:0 0 16px color-mix(in srgb, var(--green) 90%, transparent); }
.workflow-node.needs-attention { border-style:dashed; opacity:.88; }
.orchestration-canvas.compact-canvas { transform: scale(.92); transform-origin: top left; }
.orchestration-canvas.focus-canvas { outline: 2px solid color-mix(in srgb, var(--blue) 42%, transparent); outline-offset: 8px; }
.canvas-tools button { cursor:pointer; }
.notification-dot:empty, .notification-dot.zero { display:none; }
.endpoint-list code { user-select: all; }

/* v1.6.0 realtime canvas */
.orchestration-canvas.streaming::before { content:"LIVE"; position:absolute; top:12px; right:14px; padding:5px 9px; border-radius:999px; border:1px solid color-mix(in srgb, var(--green) 34%, transparent); background:color-mix(in srgb, var(--green) 12%, transparent); color:var(--green); font-size:10px; letter-spacing:.12em; font-weight:800; }
.orchestration-canvas[data-realtime="connecting"]::before,
.orchestration-canvas[data-realtime="reconnecting"]::before { content:"SYNCING"; position:absolute; top:12px; right:14px; padding:5px 9px; border-radius:999px; border:1px solid color-mix(in srgb, var(--amber) 34%, transparent); background:color-mix(in srgb, var(--amber) 12%, transparent); color:var(--amber); font-size:10px; letter-spacing:.12em; font-weight:800; }
.workflow-node.realtime-flash { animation: realtimePulse 1.2s ease-out 1; }
@keyframes realtimePulse { 0% { transform: translateY(-2px); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent), 0 0 34px color-mix(in srgb, var(--blue) 18%, transparent); } 100% { transform: translateY(0); box-shadow: inherit; } }
.status-pill.reconnecting { color:var(--amber); border-color:color-mix(in srgb, var(--amber) 35%, transparent); background:color-mix(in srgb, var(--amber) 10%, transparent); }
.realtime-copy { margin-top:4px; color: var(--muted); font-size: 12px; }

/* v1.7 drill-down navigation */
.drill-card,
.clickable-row,
.clickable-node,
.governance-row {
  cursor: pointer;
}
.drill-card:hover,
.clickable-row:hover,
.governance-row:hover {
  border-color: color-mix(in srgb, var(--blue) 55%, transparent) !important;
  background: color-mix(in srgb, var(--panel-deep) 90%, transparent) !important;
  transform: translateY(-1px);
}
.clickable-node:hover {
  outline: 1px solid color-mix(in srgb, var(--blue) 72%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent), 0 18px 40px color-mix(in srgb, var(--panel-deep) 35%, transparent);
}
.open-details,
.attention-item small {
  display: inline-flex;
  margin-top: 0.75rem;
  color: var(--accent-cyan, var(--cyan));
  font-weight: 700;
  letter-spacing: 0.01em;
}
.drill-focus {
  animation: drillFocusPulse 1.8s ease-out;
  outline: 2px solid color-mix(in srgb, var(--cyan) 78%, transparent);
  outline-offset: 4px;
}
@keyframes drillFocusPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 42%, transparent); }
  60% { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.enterprise-table tr.clickable-row td:first-child::after {
  content: 'Open details →';
  display: block;
  margin-top: 0.25rem;
  color: var(--accent-cyan, var(--cyan));
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity .16s ease;
}
.enterprise-table tr.clickable-row:hover td:first-child::after {
  opacity: 1;
}

/* v1.8.0 Workflow Evidence management page */
.workflow-evidence-hero {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background:linear-gradient(135deg, color-mix(in srgb, var(--panel-deep) 92%, transparent), color-mix(in srgb, var(--panel-deep) 78%, transparent));
  box-shadow:0 22px 70px color-mix(in srgb, var(--panel-deep) 18%, transparent);
  margin-bottom:14px;
}
.workflow-title-block h2 { margin:4px 0 8px; font-size:26px; letter-spacing:-.04em; }
.workflow-meta-row { display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px; }
.version-chip { border:1px solid var(--line-strong); color:var(--cyan); background:color-mix(in srgb, var(--cyan) 8%, transparent); padding:3px 8px; border-radius:999px; font-weight:800; }
.workflow-action-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; }
.purple-btn { min-height:42px; border:1px solid color-mix(in srgb, var(--violet) 42%, transparent); border-radius: var(--radius-lg); padding:0 16px; color:var(--on-accent); background:linear-gradient(135deg, color-mix(in srgb, var(--violet) 90%, transparent), color-mix(in srgb, var(--violet) 82%, transparent)); cursor:pointer; font-weight:800; }
.workflow-management-grid { display:grid; grid-template-columns: minmax(0, 2fr) minmax(360px, 0.95fr); gap:14px; margin-bottom:14px; }
.workflow-bottom-grid { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.workflow-builder-panel, .step-details-panel { min-height:460px; }
.canvas-scale { display:flex; align-items:center; gap:8px; }
.workflow-evidence-canvas {
  position:relative;
  min-height:355px;
  display:grid;
  grid-template-columns: repeat(4, minmax(150px,1fr));
  grid-auto-rows:minmax(112px, auto);
  gap:16px 20px;
  padding:28px;
  border:1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 16px 16px, color-mix(in srgb, var(--blue) 16%, transparent) 1px, transparent 1.5px) 0 0/24px 24px,
    linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 55%, transparent), color-mix(in srgb, var(--panel-deep) 42%, transparent));
  overflow:hidden;
}
.evidence-step {
  position:relative;
  display:grid;
  align-content:start;
  gap:5px;
  min-height:112px;
  text-align:left;
  border:1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:color-mix(in srgb, var(--panel-deep) 90%, transparent);
  color:var(--text);
  padding:14px 14px 14px 46px;
  cursor:pointer;
  box-shadow:0 14px 34px color-mix(in srgb, var(--panel-deep) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.evidence-step:hover, .evidence-step.selected { transform:translateY(-2px); border-color:color-mix(in srgb, var(--blue) 75%, transparent); box-shadow:0 18px 46px color-mix(in srgb, var(--panel-deep) 36%, transparent), 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent); }
.evidence-step .step-number { position:absolute; top:12px; left:12px; width:24px; height:24px; display:grid; place-items:center; border-radius: var(--radius-md); background:color-mix(in srgb, var(--panel) 8%, transparent); font-size:12px; font-weight:900; }
.evidence-step .step-icon { font-size:22px; }
.evidence-step strong { font-size:14px; }
.evidence-step small { color:var(--muted); }
.evidence-step em { justify-self:start; margin-top:4px; border-radius:999px; padding:3px 7px; font-size:10px; font-style:normal; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.evidence-step.success { border-color:color-mix(in srgb, var(--green) 35%, transparent); }
.evidence-step.success em, .activity-dot.success { color:var(--green); background:color-mix(in srgb, var(--green) 12%, transparent); }
.evidence-step.warning { border-color:color-mix(in srgb, var(--amber) 36%, transparent); }
.evidence-step.warning em, .activity-dot.warning { color:var(--amber); background:color-mix(in srgb, var(--amber) 12%, transparent); }
.evidence-step.danger { border-color:color-mix(in srgb, var(--red) 40%, transparent); }
.evidence-step.danger em, .activity-dot.danger { color:var(--red); background:color-mix(in srgb, var(--red) 12%, transparent); }
.evidence-connector { align-self:center; height:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--blue) 72%, transparent), color-mix(in srgb, var(--cyan) 12%, transparent)); border-radius:99px; }
.canvas-mini-map { margin-top:12px; display:flex; gap:5px; justify-content:center; }
.canvas-mini-map span { width:28px; height:6px; border-radius:999px; background:color-mix(in srgb, var(--muted) 25%, transparent); }
.canvas-mini-map span.success { background:var(--green); }
.canvas-mini-map span.warning { background:var(--amber); }
.canvas-mini-map span.danger { background:var(--red); }
.step-hero { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius: var(--radius-lg); background:color-mix(in srgb, var(--panel-deep) 38%, transparent); margin-bottom:14px; }
.step-hero > span { width:44px; height:44px; display:grid; place-items:center; border-radius: var(--radius-lg); background:color-mix(in srgb, var(--blue) 12%, transparent); font-size:24px; }
.step-hero div { flex:1; }
.step-hero strong, .step-hero small { display:block; }
.step-hero small, .step-summary { color:var(--muted); line-height:1.55; }
.step-next { margin-top:12px; padding:14px; border:1px solid var(--line); border-radius: var(--radius-lg); background:color-mix(in srgb, var(--blue) 8%, transparent); }
.step-next span { display:block; color:var(--faint); text-transform:uppercase; font-size:11px; letter-spacing:.08em; font-weight:900; }
.step-next strong { display:block; margin-top:5px; line-height:1.45; }
.step-links { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.workflow-metrics-grid { display:grid; gap:10px; }
.workflow-metric-card { border:1px solid var(--line); border-radius: var(--radius-lg); padding:14px; background:color-mix(in srgb, var(--panel-deep) 34%, transparent); }
.workflow-metric-card span { color:var(--muted); font-size:12px; }
.workflow-metric-card strong { display:block; font-size:28px; margin-top:4px; }
.workflow-metric-card small { color:var(--faint); }
.workflow-activity-list { display:grid; gap:10px; }
.workflow-activity-item { display:grid; grid-template-columns:20px 1fr; align-items:start; gap:10px; padding:12px; }
.activity-dot { width:11px; height:11px; margin-top:5px; border-radius:99px; background:var(--cyan); box-shadow:0 0 0 6px color-mix(in srgb, var(--cyan) 10%, transparent); }
.workflow-activity-item small { display:block; color:var(--muted); margin-top:3px; }
.workflow-inventory-panel { margin-bottom:14px; }
.workflow-support-panels { margin-top:0; }
@media (max-width: 1360px) { .workflow-management-grid { grid-template-columns:1fr; } .workflow-evidence-canvas { grid-template-columns: repeat(2, minmax(150px,1fr)); } }
@media (max-width: 760px) { .workflow-evidence-hero, .workflow-action-bar { display:grid; grid-template-columns:1fr; } .workflow-evidence-canvas { grid-template-columns:1fr; padding:16px; } .evidence-connector { display:none; } }


/* v1.9.0 Professional workflow management refinement
   Reference goal: match the density, hierarchy and operational feel of enterprise workflow consoles. */
.console {
  max-width: 1840px;
  margin: 0 auto;
}
#view-workflows {
  --workflow-rail: 318px;
}
.workflow-management-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--workflow-rail);
  gap: 16px;
  align-items: start;
}
.workflow-management-main {
  min-width: 0;
  display: grid;
  gap: 14px;
}
.workflow-right-rail {
  position: sticky;
  top: 82px;
  min-height: calc(100vh - 106px);
  display: flex;
  flex-direction: column;
  padding: 18px;
}
.workflow-right-rail .workflow-activity-list {
  flex: 1;
  margin-bottom: 16px;
}
.full-width { width: 100%; justify-content: center; }
.workflow-evidence-hero {
  align-items: center;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-deep) 96%, transparent), color-mix(in srgb, var(--panel-deep) 86%, transparent));
}
.workflow-heading-row { display:flex; align-items:center; gap: 12px; flex-wrap: wrap; }
.workflow-title-block h2 { font-size: 28px; line-height:1.12; }
.workflow-status-badge { transform: translateY(1px); }
.workflow-action-bar .primary-btn,
.workflow-action-bar .purple-btn,
.workflow-action-bar .secondary-btn,
.workflow-action-bar .ghost-btn {
  min-height: 42px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--panel-deep) 18%, transparent);
}
.workflow-designer-grid {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 360px;
  gap: 14px;
  align-items: stretch;
}
.workflow-builder-panel { min-height: 510px; padding: 18px; }
.step-details-panel { min-height: 510px; padding: 18px; }
.canvas-shell {
  position: relative;
  min-height: 420px;
}
.canvas-toolbar.vertical {
  position:absolute;
  left: 12px;
  top: 14px;
  z-index: 3;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-deep) 78%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--panel-deep) 24%, transparent);
}
.canvas-toolbar.vertical button {
  width: 34px;
  height: 34px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.canvas-toolbar.vertical button:last-child { border-bottom:0; }
.canvas-zoom-chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 7px 9px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 4%, transparent);
  font-weight: 900;
  font-size: 12px;
}
.workflow-evidence-canvas {
  min-height: 412px;
  grid-template-columns: repeat(8, minmax(68px, 1fr));
  grid-template-rows: repeat(3, 112px);
  grid-template-areas:
    "intent intent identity identity context context action action"
    ". . . review review evidence evidence ."
    ". . . output output audit audit .";
  gap: 16px;
  padding: 74px 24px 24px 68px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 18%, transparent) 0 0) 16.5% 34%/9% 2px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 18%, transparent) 0 0) 39.5% 34%/9% 2px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 18%, transparent) 0 0) 62.5% 34%/9% 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--muted) 18%, transparent) 0 0) 74.8% 50%/2px 18% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 18%, transparent) 0 0) 63% 58%/13% 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--muted) 18%, transparent) 0 0) 48% 66%/2px 16% no-repeat,
    radial-gradient(circle at 16px 16px, color-mix(in srgb, var(--blue) 18%, transparent) 1px, transparent 1.5px) 0 0/22px 22px,
    linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 62%, transparent), color-mix(in srgb, var(--panel-deep) 45%, transparent));
}
.evidence-step[data-step-id="intent"] { grid-area: intent; }
.evidence-step[data-step-id="identity"] { grid-area: identity; }
.evidence-step[data-step-id="context"] { grid-area: context; }
.evidence-step[data-step-id="action"] { grid-area: action; }
.evidence-step[data-step-id="review"] { grid-area: review; }
.evidence-step[data-step-id="evidence"] { grid-area: evidence; }
.evidence-step[data-step-id="output"] { grid-area: output; }
.evidence-step[data-step-id="audit"] { grid-area: audit; }
.evidence-step {
  min-height: 96px;
  padding: 14px 13px 12px 50px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 96%, transparent), color-mix(in srgb, var(--panel-deep) 92%, transparent));
}
.evidence-step .step-icon {
  position: absolute;
  left: 14px;
  top: 44px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel) 7%, transparent);
  font-size: 16px;
}
.evidence-step .step-number {
  top: 11px;
  left: 14px;
  width: 24px;
  height: 24px;
  color: var(--text);
  background: color-mix(in srgb, var(--blue) 18%, transparent);
}
.evidence-step strong { font-size: 13px; line-height: 1.18; margin-top: 2px; }
.evidence-step small { font-size: 11px; }
.evidence-step em { font-size: 9px; padding: 3px 6px; }
.step-details-panel .kv-grid { grid-template-columns: 1fr; }
.step-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, transparent), color-mix(in srgb, var(--panel) 3%, transparent)); }
.workflow-bottom-grid.refined {
  display:grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
  gap: 14px;
  margin-bottom: 14px;
}
.run-history-panel .table-wrap { max-height: 325px; overflow: auto; }
.execution-metrics-panel .workflow-metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.execution-metrics-panel .workflow-metric-card {
  min-height: 138px;
  overflow: hidden;
  position: relative;
}
.execution-metrics-panel .workflow-metric-card .mini-chart { height: 44px; }
.vertical-timeline { position: relative; padding-left: 4px; }
.vertical-timeline:before {
  content:"";
  position:absolute;
  left: 13px;
  top: 12px;
  bottom: 58px;
  width: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 70%, transparent), color-mix(in srgb, var(--blue) 35%, transparent), color-mix(in srgb, var(--green) 55%, transparent));
}
.workflow-activity-item {
  position: relative;
  grid-template-columns: 34px 1fr;
  min-height: 74px;
  border: 0;
  background: transparent;
  padding: 8px 4px 12px 0;
}
.workflow-activity-item .activity-dot {
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1px solid currentColor;
  background: color-mix(in srgb, var(--panel-deep) 96%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 8%, transparent);
  z-index: 1;
}
.workflow-activity-item strong { font-size: 13px; line-height:1.35; }
.workflow-activity-item small { font-size: 11px; }
.workflow-inventory-panel,
.workflow-support-panels { margin-bottom: 14px; }
.enterprise-table th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.enterprise-table td { vertical-align: middle; }
@media (max-width: 1680px) {
  .workflow-management-shell { grid-template-columns: 1fr; }
  .workflow-right-rail { position: static; min-height: auto; }
  .vertical-timeline:before { display:none; }
}
@media (max-width: 1240px) {
  .workflow-designer-grid, .workflow-bottom-grid.refined { grid-template-columns: 1fr; }
  .workflow-evidence-canvas { grid-template-columns: repeat(2, minmax(150px,1fr)); grid-template-areas:none; grid-template-rows:auto; padding: 20px; }
  .evidence-step { grid-area:auto !important; }
}

/* v2.0.0 Compact Enterprise Workflow Console refinement
   Goal: reduce dashboard bulk, increase console density, and better match enterprise workflow tooling. */
body { font-size: 14px; }
.enterprise-shell { grid-template-columns: 248px minmax(0, 1fr); }
.side-rail { padding: 18px 14px; gap: 16px; }
.brand-block { padding: 6px 6px 16px; gap: 11px; }
.brand-orb { width: 42px; height: 42px; }
.brand-block strong { font-size: 20px; }
.brand-block span { font-size: 11px; line-height: 1.25; }
.nav-section-label, .mini-label, .eyebrow { font-size: 10px; letter-spacing: .14em; }
.nav-list { gap: 5px; }
.nav-link { border-radius: var(--radius-md); padding: 10px 11px; gap: 10px; font-size: 14px; }
.nav-link span { width: 22px; }
.environment-card, .side-card { border-radius: var(--radius-lg); padding: 12px; }
.side-card p { font-size: 11px; }
.environment-btn { min-height: 34px; padding: 8px 10px; }
.console { max-width: 1680px; padding: 16px 20px 24px; }
.console-topbar { grid-template-columns: 290px minmax(420px, 1fr) auto; gap: 18px; margin-bottom: 12px; }
.title-group h1 { font-size: 24px; }
.title-group p { font-size: 13px; }
.global-search { height: 42px; border-radius: var(--radius-md); padding: 0 12px; }
.global-search span { font-size: 17px; }
.env-select { height: 38px; border-radius: var(--radius-md); padding: 0 12px; }
.icon-btn { width: 36px; height: 36px; border-radius: var(--radius-md); }
.user-chip { gap: 9px; padding-left: 11px; }
.user-chip > span { width: 36px; height: 36px; }
.user-chip strong { font-size: 13px; }
.user-chip small { font-size: 11px; }
.connection-strip { align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px; border-radius: var(--radius-lg); }
.connection-strip label { display:flex; align-items:center; gap:8px; font-size: 10px; text-transform: uppercase; letter-spacing:.08em; }
.connection-strip input { min-height: 32px; height:32px; width: 170px; border-radius: var(--radius-md); }
.connection-strip label:first-child input { width: 124px; }
.primary-btn, .secondary-btn, .ghost-btn, .link-btn, .purple-btn { min-height: 34px; border-radius: var(--radius-md); padding: 0 11px; font-size: 13px; }
.role-strip { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.role-strip > div { flex: 1 1 180px; border-radius: var(--radius-md); padding: 9px 12px; }
.role-strip span { font-size: 9px; }
.role-strip strong { font-size: 13px; margin-top: 2px; }
.panel, .metric-card { border-radius: var(--radius-lg); box-shadow: 0 18px 46px color-mix(in srgb, var(--panel-deep) 24%, transparent); }
.panel { padding: 14px; }
.panel-head { margin-bottom: 10px; }
.panel-head h3 { font-size: 16px; margin: 2px 0 0; }
.status-pill { font-size: 10px; padding: 4px 8px; border-radius: 999px; }
.version-chip, .period-chip { font-size: 11px; padding: 4px 8px; }
.enterprise-table th { font-size: 10px; padding: 10px 12px; }
.enterprise-table td { padding: 10px 12px; font-size: 13px; }
.enterprise-table small { font-size: 11px; }
#view-workflows { --workflow-rail: 286px; }
.workflow-management-shell { gap: 12px; }
.workflow-management-main { gap: 10px; }
.workflow-right-rail { top: 68px; min-height: calc(100vh - 88px); padding: 14px; }
.workflow-right-rail .panel-head { align-items:start; }
.workflow-right-rail .workflow-activity-list { margin-bottom: 10px; }
.workflow-evidence-hero { padding: 14px 16px; border-radius: var(--radius-lg); }
.workflow-title-block h2 { font-size: 22px; line-height:1.12; margin: 2px 0 6px; max-width: 760px; }
.workflow-meta-row { gap: 8px; font-size: 12px; }
.workflow-action-bar { gap: 8px; }
.workflow-action-bar .primary-btn,
.workflow-action-bar .purple-btn,
.workflow-action-bar .secondary-btn,
.workflow-action-bar .ghost-btn { min-height: 36px; box-shadow: 0 8px 20px color-mix(in srgb, var(--panel-deep) 16%, transparent); }
.workflow-designer-grid { grid-template-columns: minmax(620px, 1fr) 312px; gap: 10px; }
.workflow-builder-panel, .step-details-panel { min-height: 392px; padding: 14px; }
.canvas-shell { min-height: 320px; }
.canvas-toolbar.vertical { left: 10px; top: 10px; border-radius: var(--radius-md); }
.canvas-toolbar.vertical button { width: 30px; height: 30px; }
.canvas-zoom-chip { font-size: 11px; padding: 5px 8px; }
.workflow-evidence-canvas {
  min-height: 318px;
  grid-template-columns: repeat(8, minmax(54px, 1fr));
  grid-template-rows: repeat(3, 86px);
  gap: 10px;
  padding: 54px 16px 18px 52px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 16%, transparent) 0 0) 16.5% 33%/9% 1px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 16%, transparent) 0 0) 39.5% 33%/9% 1px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 16%, transparent) 0 0) 62.5% 33%/9% 1px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--muted) 16%, transparent) 0 0) 74.8% 50%/1px 15% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 16%, transparent) 0 0) 63% 58%/13% 1px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--muted) 16%, transparent) 0 0) 48% 66%/1px 14% no-repeat,
    radial-gradient(circle at 14px 14px, color-mix(in srgb, var(--blue) 18%, transparent) 1px, transparent 1.4px) 0 0/20px 20px,
    linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 64%, transparent), color-mix(in srgb, var(--panel-deep) 45%, transparent));
}
.evidence-step { min-height: 74px; padding: 11px 10px 9px 40px; border-radius: var(--radius-md); }
.evidence-step .step-number { top: 9px; left: 10px; width: 20px; height: 20px; font-size: 11px; }
.evidence-step .step-icon { left: 10px; top: 37px; width: 22px; height: 22px; border-radius: var(--radius-md); font-size: 12px; }
.evidence-step strong { font-size: 12px; line-height: 1.12; }
.evidence-step small { font-size: 10px; margin-top: 2px; }
.evidence-step em { font-size: 8px; padding: 2px 5px; margin-top: 6px; letter-spacing:.08em; }
.canvas-mini-map { bottom: 10px; transform: scale(.78); transform-origin:center; }
.step-details-panel .panel-head h3 { max-width: 200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.step-hero { padding: 10px; border-radius: var(--radius-lg); gap: 10px; }
.step-hero > span { width: 40px; height: 40px; border-radius: var(--radius-lg); }
.step-summary { font-size: 13px; line-height: 1.45; margin: 10px 0; }
.step-next { padding: 10px; border-radius: var(--radius-md); }
.step-links { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kv-grid { gap: 8px; }
.kv-grid > div { padding: 9px; border-radius: var(--radius-md); }
.kv-grid span { font-size: 9px; }
.kv-grid strong { font-size: 12px; }
.workflow-bottom-grid.refined { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 10px; margin-bottom: 10px; }
.run-history-panel .table-wrap { max-height: 246px; }
.execution-metrics-panel .workflow-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.execution-metrics-panel .workflow-metric-card { min-height: 104px; padding: 10px; border-radius: var(--radius-md); }
.execution-metrics-panel .workflow-metric-card strong { font-size: 22px; }
.execution-metrics-panel .workflow-metric-card .mini-chart { height: 30px; margin-top: 8px; }
.workflow-inventory-panel, .workflow-support-panels { margin-bottom: 10px; }
.workflow-support-panels { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.workflow-support-panels .panel { min-height: auto; }
.decision-card { padding: 11px; border-radius: var(--radius-md); }
.decision-card p { font-size: 13px; margin: 8px 0; }
.vertical-timeline:before { left: 12px; bottom: 42px; }
.workflow-activity-item { grid-template-columns: 28px 1fr; min-height: 58px; padding: 6px 2px 9px 0; }
.workflow-activity-item .activity-dot { width: 24px; height: 24px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 7%, transparent); }
.workflow-activity-item strong { font-size: 12px; }
.workflow-activity-item small { font-size: 10px; }
@media (min-width: 1681px) {
  .workflow-management-shell { grid-template-columns: minmax(0, 1fr) var(--workflow-rail); }
}
@media (max-width: 1500px) {
  .enterprise-shell { grid-template-columns: 230px minmax(0, 1fr); }
  .workflow-management-shell { grid-template-columns: 1fr; }
  .workflow-right-rail { position: static; min-height: auto; }
  .workflow-right-rail .workflow-activity-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .vertical-timeline:before { display:none; }
}
@media (max-width: 1180px) {
  .console-topbar { grid-template-columns: 1fr; gap: 10px; }
  .workflow-designer-grid, .workflow-bottom-grid.refined { grid-template-columns: 1fr; }
  .workflow-evidence-canvas { grid-template-columns: repeat(2, minmax(150px,1fr)); grid-template-areas:none; grid-template-rows:auto; padding: 18px; }
  .evidence-step[data-step-id] { grid-area:auto; }
}

/* v2.1.0 Evidence Console polish
   Fixes: dense workflow-page chrome, correct page title, compact rail, stable demo-state semantics. */
body[data-view="workflows"].connected .connection-strip,
body[data-view="workflows"].connected .role-strip {
  display: none;
}
body[data-view="workflows"] .console-topbar {
  margin-bottom: 10px;
}
body[data-view="workflows"] .title-group h1 {
  font-size: 23px;
}
body[data-view="workflows"] .title-group p {
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workflow-management-shell {
  align-items: start;
}
.workflow-right-rail {
  min-height: 0 !important;
  height: fit-content;
  max-height: calc(100vh - 86px);
  overflow: hidden;
}
.workflow-right-rail .workflow-activity-list {
  flex: 0 1 auto !important;
  max-height: 500px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.workflow-right-rail .panel-head h3 {
  font-size: 15px;
}
.workflow-right-rail .full-width {
  margin-top: 8px;
}
.vertical-timeline:before {
  bottom: 52px;
}
.workflow-activity-item {
  min-height: 52px !important;
  padding-bottom: 8px !important;
}
.workflow-activity-item .activity-dot {
  width: 22px !important;
  height: 22px !important;
}
.workflow-evidence-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.workflow-action-bar {
  flex-wrap: nowrap;
}
.workflow-action-bar .primary-btn,
.workflow-action-bar .purple-btn,
.workflow-action-bar .secondary-btn,
.workflow-action-bar .ghost-btn {
  white-space: nowrap;
}
.workflow-title-block h2 {
  letter-spacing: -0.035em;
}
.workflow-designer-grid {
  align-items: start;
}
.workflow-builder-panel,
.step-details-panel {
  min-height: 374px !important;
}
.step-details-panel {
  overflow: hidden;
}
.step-details-panel .step-hero {
  align-items: center;
}
.step-hero .status-pill {
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: center;
}
.step-summary {
  min-height: auto;
}
.step-next strong {
  font-size: 12px;
}
.workflow-bottom-grid.refined {
  align-items: stretch;
}
.workflow-inventory-panel .table-wrap {
  max-height: 170px;
  overflow: auto;
}
.workflow-support-panels .panel {
  max-height: 330px;
  overflow: auto;
}
.workflow-support-panels .kv-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.workflow-support-panels .decision-card {
  padding: 10px;
}
.workflow-support-panels .decision-card p {
  font-size: 12px;
  margin: 6px 0;
}
.workflow-support-panels .decision-card .kv-grid > div {
  padding: 7px;
}
.evidence-step .step-icon,
.evidence-step .step-number,
.workflow-activity-item .activity-dot,
.status-pill {
  flex: 0 0 auto;
}
@media (min-width: 1501px) and (max-width: 1680px) {
  .workflow-management-shell { grid-template-columns: minmax(0, 1fr) 270px; }
}
@media (max-width: 1180px) {
  body[data-view="workflows"].connected .connection-strip { display: flex; }
  .workflow-evidence-hero { grid-template-columns: 1fr; }
  .workflow-action-bar { flex-wrap: wrap; justify-content: flex-start; }
}


/* v2.1.2 audit-ledger inspector polish
   The step hero previously styled every direct span as a large icon, which also
   affected the status pill and made Audit Ledger show as a broken oversized badge. */
.step-hero > span:not(.step-hero-icon):not(.step-hero-status) {
  width: auto;
  height: auto;
  display: inline-flex;
  place-items: initial;
  border-radius: 999px;
  background: transparent;
  font-size: inherit;
}
.step-hero > .step-hero-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue-2);
  font-size: 17px;
  line-height: 1;
}
.step-hero.success > .step-hero-icon {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
}
.step-hero.warning > .step-hero-icon {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--amber);
}
.step-hero.danger > .step-hero-icon {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}
.step-hero-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.step-hero-status .status-pill {
  width: auto;
  max-width: 118px;
  height: auto;
  min-height: 24px;
  display: inline-flex;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .06em;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.step-details-panel .step-hero {
  min-height: 56px;
  padding: 10px 11px;
  gap: 10px;
}
.step-details-panel .step-hero div {
  min-width: 0;
}
.step-details-panel .step-hero strong {
  font-size: 14px;
  line-height: 1.15;
}
.step-details-panel .step-hero small {
  font-size: 11px;
  line-height: 1.25;
}
.step-details-panel .kv-grid > div {
  min-height: 46px;
}
.step-details-panel .kv-grid strong {
  font-size: 13px;
  line-height: 1.25;
  word-break: break-word;
}


/* v2.1.3 step-details inspector hardening
   Make the selected-step inspector compact, readable, and consistent with an enterprise workflow console.
   The previous layout allowed the status pill and long labels to compete with the title area. */
.step-details-panel {
  overflow: hidden;
}
.step-details-panel #stepDetailsBody {
  min-width: 0;
}
.step-details-panel .step-hero {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  padding: 9px 10px !important;
  margin-bottom: 10px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, transparent), color-mix(in srgb, var(--panel-deep) 42%, transparent)) !important;
  border-color: color-mix(in srgb, var(--blue) 22%, transparent) !important;
}
.step-details-panel .step-hero > .step-hero-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}
.step-details-panel .step-hero > div {
  min-width: 0 !important;
  text-align: left !important;
}
.step-details-panel .step-hero strong {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  text-align: left !important;
}
.step-details-panel .step-hero small {
  display: block !important;
  margin-top: 2px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}
.step-details-panel .step-hero-status {
  justify-self: end !important;
  max-width: 86px !important;
}
.step-details-panel .step-hero-status .status-pill {
  max-width: 86px !important;
  min-height: 22px !important;
  padding: 3px 7px !important;
  font-size: 9px !important;
  letter-spacing: .065em !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.step-details-panel .step-summary {
  margin: 8px 0 10px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
  text-align: left !important;
}
.step-details-panel .kv-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
.step-details-panel .key-value {
  min-height: auto !important;
  padding: 8px 10px !important;
  border-radius: 11px !important;
  text-align: left !important;
  background: color-mix(in srgb, var(--panel-deep) 36%, transparent) !important;
}
.step-details-panel .key-value span {
  font-size: 9px !important;
  letter-spacing: .09em !important;
  text-align: left !important;
}
.step-details-panel .key-value strong {
  margin-top: 3px !important;
  color: color-mix(in srgb, var(--text) 88%, transparent) !important;
  font-size: 12px !important;
  line-height: 1.22 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.step-details-panel .step-next {
  margin-top: 8px !important;
  padding: 9px 10px !important;
  border-radius: 11px !important;
  text-align: left !important;
  background: color-mix(in srgb, var(--blue) 7%, transparent) !important;
}
.step-details-panel .step-next span {
  font-size: 9px !important;
  letter-spacing: .09em !important;
}
.step-details-panel .step-next strong {
  margin-top: 3px !important;
  color: color-mix(in srgb, var(--text) 82%, transparent) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
.step-details-panel .step-links {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.step-details-panel .step-links .secondary-btn {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
  padding: 8px 9px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 1280px) {
  .step-details-panel .step-hero { grid-template-columns: 32px minmax(0, 1fr); }
  .step-details-panel .step-hero-status { grid-column: 2; justify-self: start !important; margin-top: 4px; }
  .step-details-panel .step-links { grid-template-columns: 1fr; }
}

/* v2.2 Workflow Builder Studio */
.builder-studio-shell {
  display: grid;
  gap: 14px;
}
.builder-studio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
}
.builder-studio-header h2 { margin: 4px 0 4px; font-size: 24px; letter-spacing: -0.04em; }
.builder-studio-header p { margin: 0; color: var(--text-muted); max-width: 760px; }
.builder-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: stretch;
}
.builder-canvas-panel { min-height: 520px; overflow: hidden; }
.builder-canvas-shell {
  position: relative;
  min-height: 430px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 24px 24px, color-mix(in srgb, var(--blue) 18%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 92%, transparent), color-mix(in srgb, var(--panel-deep) 96%, transparent));
  overflow: auto;
}
.builder-canvas {
  position: relative;
  width: 1380px;
  height: 620px;
}
.builder-canvas.fit-view { transform: scale(0.92); transform-origin: top left; }
.builder-toolbar {
  position: absolute;
  z-index: 10;
  left: 12px;
  top: 12px;
  background: color-mix(in srgb, var(--panel-deep) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.builder-toolbar button {
  display: block;
  width: 34px;
  height: 34px;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 12%, transparent);
}
.builder-node {
  position: absolute;
  width: 178px;
  min-height: 94px;
  padding: 14px 14px 12px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 6px 10px;
  text-align: left;
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--blue) 32%, transparent);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 92%, transparent), color-mix(in srgb, var(--panel-deep) 98%, transparent));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--panel-deep) 22%, transparent);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.builder-node:hover, .builder-node.selected {
  border-color: color-mix(in srgb, var(--blue) 95%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 24%, transparent), 0 18px 50px color-mix(in srgb, var(--panel-deep) 28%, transparent);
  transform: translateY(-1px);
}
.builder-node.good { border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.builder-node.warn { border-color: color-mix(in srgb, var(--amber) 60%, transparent); }
.builder-node.blocked { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.builder-node .node-number {
  grid-column: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--blue) 34%, transparent);
  font-weight: 800;
  font-size: 12px;
}
.builder-node .node-icon {
  grid-column: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  color: var(--blue);
}
.builder-node strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 14px; line-height: 1.06; }
.builder-node small { grid-column: 2; color: var(--text-muted); font-size: 11px; text-transform: capitalize; }
.builder-node em { grid-column: 2; width: max-content; max-width: 126px; padding: 3px 7px; border-radius: var(--radius-md); font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.builder-node.warn em { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.builder-node.blocked em { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.builder-edge {
  position: absolute;
  border-top: 2px solid color-mix(in srgb, var(--muted) 48%, transparent);
  pointer-events: none;
}
.builder-edge::after {
  content: '';
  position: absolute;
  right: -3px;
  top: -5px;
  border-left: 7px solid color-mix(in srgb, var(--muted) 70%, transparent);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.builder-edge.warn { border-top-style: dashed; border-color: color-mix(in srgb, var(--amber) 80%, transparent); }
.builder-edge.warn::after { border-left-color: color-mix(in srgb, var(--amber) 90%, transparent); }
.builder-edge.blocked { border-top-style: dashed; border-color: color-mix(in srgb, var(--red) 62%, transparent); }
.builder-edge.blocked::after { border-left-color: color-mix(in srgb, var(--red) 78%, transparent); }
.builder-edge span {
  position: absolute;
  top: -24px;
  left: 42%;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--panel-deep) 86%, transparent);
  padding: 2px 6px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  font-size: 10px;
}
.builder-minimap {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 160px;
  height: 82px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  background: color-mix(in srgb, var(--panel-deep) 82%, transparent);
}
.builder-minimap span {
  position: absolute;
  width: 16px;
  height: 8px;
  background: color-mix(in srgb, var(--blue) 68%, transparent);
  border-radius: var(--radius-sm);
}
.builder-governance-strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.builder-governance-strip div {
  padding: 12px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel-deep) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
}
.builder-governance-strip span { display:block; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.builder-governance-strip strong { font-size: 20px; }
.builder-inspector-panel { align-self: start; position: sticky; top: 14px; }
.builder-inspector { display: grid; gap: 10px; }
.builder-step-hero {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  background: color-mix(in srgb, var(--panel-deep) 64%, transparent);
}
.builder-step-hero > span:first-child { width: 42px; height: 42px; display:grid; place-items:center; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--blue) 28%, transparent); }
.builder-step-hero strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.builder-step-hero small { color: var(--text-muted); text-transform: capitalize; }
.builder-field { display: grid; gap: 5px; }
.builder-field span, .builder-switch span { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.builder-field input, .builder-field select {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  background: color-mix(in srgb, var(--panel-deep) 52%, transparent);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 9px 10px;
}
.builder-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel-deep) 38%, transparent);
}
.builder-inspector-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top: 4px; }
.builder-bottom-grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 14px; }
.builder-validation, .builder-simulation { display: grid; gap: 10px; }
.builder-score { padding: 12px; border-radius: var(--radius-lg); border:1px solid color-mix(in srgb, var(--muted) 16%, transparent); background: color-mix(in srgb, var(--panel-deep) 70%, transparent); }
.builder-score strong { display:block; font-size: 18px; }
.builder-score.good strong { color:var(--green); }
.builder-score.bad strong { color:var(--red); }
.builder-issue { margin:0; padding: 8px 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--panel-deep) 50%, transparent); color: var(--text-secondary); }
.builder-issue.bad { border-left: 3px solid var(--red); }
.builder-issue.warn { border-left: 3px solid var(--amber); }
.builder-issue.good { border-left: 3px solid var(--green); }
.simulation-donut {
  width: 132px;
  height: 132px;
  border-radius: 999px;
  margin: 0 auto;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at center, var(--panel-deep) 52%, transparent 54%), conic-gradient(var(--green) 0 78%, var(--amber) 78% 92%, var(--red) 92% 100%);
}
.simulation-donut strong { font-size: 25px; }
.simulation-donut span { margin-top: -42px; color: var(--text-muted); font-size: 11px; }
.simulation-steps { display:grid; gap:8px; }
.simulation-steps div { padding:8px 10px; border-radius: var(--radius-md); border:1px solid color-mix(in srgb, var(--muted) 14%, transparent); background:color-mix(in srgb, var(--panel-deep) 42%, transparent); }
.simulation-steps strong { display:block; }
.simulation-steps small { display:block; color:var(--text-muted); margin-top:4px; }
.selected-row { box-shadow: inset 3px 0 0 var(--blue); background: color-mix(in srgb, var(--blue) 18%, transparent) !important; }
@media (max-width: 1200px) {
  .builder-grid, .builder-bottom-grid { grid-template-columns: 1fr; }
  .builder-inspector-panel { position: static; }
  .builder-studio-header { align-items: flex-start; flex-direction: column; }
}

/* v2.3 Production Workflow Builder Studio
   Builder is now a live, functional design-time console aligned to the enterprise reference image. */
body[data-view="builder"].connected .connection-strip,
body[data-view="builder"].connected .role-strip {
  display: none;
}
body[data-view="builder"] .console-topbar {
  margin-bottom: 10px;
}
body[data-view="builder"] .title-group h1 {
  font-size: 24px;
  letter-spacing: -0.04em;
}
body[data-view="builder"] .title-group p {
  max-width: 560px;
}
.builder-studio-shell {
  gap: 12px;
}
.builder-studio-header {
  padding: 15px 18px;
  min-height: 88px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-deep) 86%, transparent), color-mix(in srgb, var(--panel-deep) 92%, transparent)),
    radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--blue) 28%, transparent), transparent 28%);
}
.builder-studio-header h2 {
  font-size: 22px;
  max-width: 760px;
}
.builder-actions {
  min-width: 540px;
}
.builder-actions .version-chip b {
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.builder-grid {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 12px;
}
.builder-canvas-panel {
  min-height: 0;
  padding-bottom: 12px;
}
.builder-canvas-panel .panel-head {
  padding-bottom: 8px;
}
.builder-canvas-tools {
  display: flex;
  gap: 7px;
  align-items: center;
}
.builder-canvas-tools button {
  min-height: 30px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  background: color-mix(in srgb, var(--panel-deep) 80%, transparent);
  color: var(--text-secondary);
  font-weight: 800;
  font-size: 12px;
}
.builder-canvas-shell {
  min-height: 505px;
  max-height: 560px;
  background:
    radial-gradient(circle at 20px 20px, color-mix(in srgb, var(--blue) 24%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 35%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 96%, transparent), color-mix(in srgb, var(--panel-deep) 98%, transparent));
}
.builder-canvas {
  width: 1320px;
  height: 620px;
  transform-origin: top left;
}
.builder-canvas.fit-view {
  transform: scale(.82);
}
.builder-edge-layer {
  position: absolute;
  inset: 0;
  width: 1320px;
  height: 620px;
  pointer-events: none;
  overflow: visible;
}
.builder-edge-group path {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 62%, transparent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.builder-edge-group text {
  fill: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--panel-deep) 90%, transparent);
  stroke-width: 4px;
  text-anchor: middle;
  text-transform: uppercase;
}
.builder-edge-layer marker path { fill: color-mix(in srgb, var(--muted) 75%, transparent); }
.builder-edge-group.approved path { stroke: color-mix(in srgb, var(--green) 72%, transparent); }
.builder-edge-group.approved + marker path,
#builder-arrow-approved path { fill: color-mix(in srgb, var(--green) 86%, transparent); }
.builder-edge-group.warn path { stroke: color-mix(in srgb, var(--amber) 86%, transparent); stroke-dasharray: 7 5; }
#builder-arrow-warn path { fill: color-mix(in srgb, var(--amber) 92%, transparent); }
.builder-edge-group.blocked path { stroke: color-mix(in srgb, var(--red) 72%, transparent); stroke-dasharray: 6 6; }
#builder-arrow-blocked path { fill: color-mix(in srgb, var(--red) 88%, transparent); }
.builder-edge { display: none; }
.builder-node {
  width: 168px;
  min-height: 86px;
  padding: 11px 12px 10px;
  grid-template-columns: 30px minmax(0, 1fr);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 92%, transparent), color-mix(in srgb, var(--panel-deep) 98%, transparent));
}
.builder-node.dragging {
  cursor: grabbing;
  z-index: 20;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 28%, transparent), 0 22px 60px color-mix(in srgb, var(--panel-deep) 45%, transparent);
}
.builder-node .node-number { width: 22px; height: 22px; border-radius: var(--radius-md); }
.builder-node .node-icon { width: 30px; height: 30px; border-radius: var(--radius-md); }
.builder-node strong { font-size: 13px; }
.builder-node small { font-size: 10px; }
.builder-node em { font-size: 9px; padding: 2px 6px; max-width: 112px; }
.builder-node.capability_grant::after,
.builder-node.output_vault::after {
  content: '🔒';
  position: absolute;
  right: 8px;
  bottom: 7px;
  opacity: .7;
  font-size: 11px;
}
.builder-toolbar {
  left: 10px;
  top: 10px;
  z-index: 30;
}
.builder-toolbar button:hover { background: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--on-accent); }
.builder-minimap {
  width: 140px;
  height: 74px;
  left: 14px;
  bottom: 14px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent), 0 10px 32px color-mix(in srgb, var(--panel-deep) 28%, transparent);
}
.builder-governance-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.builder-governance-strip div {
  padding: 10px 12px;
  min-height: 58px;
}
.builder-governance-strip strong { font-size: 20px; }
.builder-inspector-panel {
  top: 10px;
  max-height: calc(100vh - 92px);
  overflow: auto;
}
.builder-inspector-panel .panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--panel-deep) 94%, transparent);
  backdrop-filter: blur(10px);
}
.builder-inspector {
  gap: 8px;
}
.builder-step-hero {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding: 10px;
  gap: 10px;
}
.builder-step-hero .status-pill { max-width: 120px; white-space: nowrap; }
.builder-step-icon {
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, transparent), color-mix(in srgb, var(--cyan) 18%, transparent)) !important;
}
.builder-field {
  gap: 4px;
}
.builder-field textarea {
  min-height: 62px;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  background: color-mix(in srgb, var(--panel-deep) 52%, transparent);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 9px 10px;
  font: inherit;
}
.builder-field input, .builder-field select {
  min-height: 34px;
  padding: 7px 9px;
}
.builder-switch { min-height: 36px; padding: 7px 9px; }
.builder-inspector-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.builder-inspector-actions button { min-height: 34px; }
.ghost-btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 24%, transparent); }
.production-builder-grid {
  grid-template-columns: 1.15fr 1.35fr 1fr;
  align-items: start;
}
.production-builder-grid .panel { min-height: 0; }
.builder-runtime-card { grid-column: span 2; }
.builder-activity-card { max-height: 315px; overflow: hidden; }
.builder-activity-list {
  display: grid;
  gap: 7px;
  max-height: 240px;
  overflow: auto;
  padding-right: 4px;
}
.builder-activity-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 8%, transparent);
}
.builder-activity-item .activity-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  margin-top: 2px;
  border: 2px solid var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 8%, transparent);
}
.builder-activity-item .activity-dot.good { border-color: var(--green); }
.builder-activity-item .activity-dot.warn { border-color: var(--amber); }
.builder-activity-item strong { display: block; font-size: 12px; }
.builder-activity-item small { color: var(--text-muted); font-size: 10px; }
.builder-simulation-card .simulation-donut { width: 112px; height: 112px; }
.builder-simulation-card .simulation-donut strong { font-size: 22px; }
.builder-validation-card .builder-issue,
.builder-simulation-card .simulation-steps div { font-size: 12px; }
@media (max-width: 1500px) {
  .builder-grid { grid-template-columns: 1fr; }
  .builder-inspector-panel { position: static; max-height: none; }
  .production-builder-grid { grid-template-columns: 1fr; }
  .builder-runtime-card { grid-column: auto; }
}

/* v2.4.0 Interactive Tutorial & Help Center */
.tutorial-shell { display: grid; gap: 14px; }
.tutorial-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel-deep) 94%, transparent), color-mix(in srgb, var(--panel-deep) 88%, transparent));
}
.tutorial-hero h2 { margin: 3px 0 6px; font-size: 26px; letter-spacing: -0.04em; }
.tutorial-hero p { margin: 0; max-width: 760px; color: var(--text-secondary); line-height: 1.45; }
.tutorial-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.tutorial-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.tutorial-case-panel { position: sticky; top: 12px; max-height: calc(100vh - 96px); overflow: auto; }
.tutorial-case-list { display: grid; gap: 8px; }
.tutorial-case {
  width: 100%; text-align: left; border: 1px solid color-mix(in srgb, var(--blue) 16%, transparent); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel-deep) 78%, transparent); color: var(--text-primary); padding: 13px; cursor: pointer;
  display: grid; gap: 7px; transition: .16s ease;
}
.tutorial-case:hover, .tutorial-case.selected { border-color: color-mix(in srgb, var(--blue) 78%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 28%, transparent), color-mix(in srgb, var(--panel-deep) 84%, transparent)); transform: translateY(-1px); }
.tutorial-case span { color: var(--text-muted); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 800; }
.tutorial-case strong { font-size: 15px; }
.tutorial-case small { color: var(--text-secondary); line-height: 1.35; }
.tutorial-case em { justify-self: start; font-style: normal; }
.tutorial-main { display: grid; gap: 14px; }
.tutorial-usecase-summary { padding: 16px; }
.tutorial-summary-head { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 16px; align-items: start; }
.tutorial-usecase-summary h3 { margin: 3px 0 7px; font-size: 22px; }
.tutorial-usecase-summary p { margin: 0; color: var(--text-secondary); line-height: 1.45; }
.tutorial-summary-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tutorial-summary-meta div, .tutorial-outcome {
  border: 1px solid color-mix(in srgb, var(--muted) 14%, transparent); border-radius: var(--radius-lg); padding: 10px 12px; background: color-mix(in srgb, var(--panel-deep) 48%, transparent);
}
.tutorial-summary-meta span, .tutorial-outcome span { display: block; color: var(--text-muted); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 800; margin-bottom: 4px; }
.tutorial-summary-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tutorial-outcome { margin-top: 10px; }
.tutorial-outcome strong { color: var(--text-primary); }
.tutorial-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) 420px; gap: 14px; align-items: stretch; }
.tutorial-canvas-card, .tutorial-step-panel { min-height: 460px; }
.tutorial-canvas {
  position: relative; min-height: 380px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--blue) 24%, transparent) 1px, transparent 1.4px), linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 82%, transparent), color-mix(in srgb, var(--panel-deep) 72%, transparent));
  background-size: 24px 24px, auto; margin-top: 8px;
}
.tutorial-edge-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tutorial-edge-layer path { fill: none; stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 2.5; stroke-dasharray: 0; }
.tutorial-edge-layer path.warn { stroke: color-mix(in srgb, var(--amber) 80%, transparent); stroke-dasharray: 8 7; }
.tutorial-node {
  position: absolute; width: 174px; min-height: 86px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 88%, transparent), color-mix(in srgb, var(--panel-deep) 88%, transparent)); color: var(--text-primary);
  text-align: left; padding: 13px 14px 11px 46px; cursor: pointer; box-shadow: 0 12px 32px color-mix(in srgb, var(--panel-deep) 22%, transparent);
}
.tutorial-node span { position: absolute; left: 14px; top: 14px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: var(--radius-md); background: color-mix(in srgb, var(--blue) 35%, transparent); font-weight: 900; }
.tutorial-node strong { display:block; font-size: 14px; margin-bottom: 4px; }
.tutorial-node small { display:block; color: var(--text-secondary); font-size: 11px; }
.tutorial-node em { display:inline-block; margin-top: 8px; font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; color: var(--text); }
.tutorial-node.good { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.tutorial-node.warn { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.tutorial-node.blocked { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.tutorial-node.selected { outline: 2px solid color-mix(in srgb, var(--blue) 92%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 13%, transparent), 0 20px 50px color-mix(in srgb, var(--panel-deep) 30%, transparent); }
.tutorial-step-explanation { display: block; }
.tutorial-step-card { display: grid; gap: 12px; }
.tutorial-step-card header { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel-deep) 50%, transparent); }
.tutorial-step-card header h3 { text-transform: capitalize; margin: 2px 0 0; font-size: 17px; }
.tutorial-step-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, transparent), color-mix(in srgb, var(--cyan) 16%, transparent)); font-weight: 900; }
.tutorial-step-card p { margin: 0; color: var(--text-secondary); line-height: 1.45; }
.tutorial-step-card .kv { margin-top: 2px; }
.tutorial-bottom-grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 14px; }
.tutorial-context-list { display:grid; gap:8px; }
.tutorial-context-item { display:grid; grid-template-columns: minmax(0,1fr) 120px auto; gap: 8px; align-items:center; padding: 9px 10px; border:1px solid color-mix(in srgb, var(--muted) 14%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel-deep) 46%, transparent); }
.tutorial-context-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tutorial-context-item small { color: var(--text-muted); }
.tutorial-score { display:flex; align-items:center; gap:12px; padding: 12px; border-radius: var(--radius-lg); border:1px solid color-mix(in srgb, var(--blue) 18%, transparent); background: color-mix(in srgb, var(--panel-deep) 48%, transparent); margin-bottom: 10px; }
.tutorial-score strong { font-size: 34px; letter-spacing: -.06em; }
.tutorial-score span { color: var(--text-secondary); }
.tutorial-sim-list { list-style:none; padding:0; margin:0; display:grid; gap:8px; max-height: 260px; overflow:auto; }
.tutorial-sim-list li { display:grid; grid-template-columns: 20px 1fr; gap: 9px; align-items:start; padding: 8px 0; border-bottom:1px solid color-mix(in srgb, var(--muted) 8%, transparent); }
.tutorial-sim-list strong { display:block; font-size: 12px; }
.tutorial-sim-list small { color: var(--text-muted); font-size: 11px; line-height:1.35; }
.tutorial-log { display:grid; gap:8px; max-height: 280px; overflow:auto; }
.tutorial-log-row { display:flex; justify-content:space-between; gap:10px; align-items:center; padding: 9px 10px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel-deep) 48%, transparent); border:1px solid color-mix(in srgb, var(--muted) 12%, transparent); }
.tutorial-log-row.good { border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.tutorial-log-row.warn { border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.tutorial-log-row.bad { border-color: color-mix(in srgb, var(--red) 38%, transparent); }
.tutorial-log-row small { color: var(--text-muted); }
.tutorial-lessons-panel { padding: 16px; }
.tutorial-lesson-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; }
.lesson-card { padding: 13px; border:1px solid color-mix(in srgb, var(--muted) 14%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel-deep) 46%, transparent); }
.lesson-card h4 { margin:0 0 6px; font-size: 14px; }
.lesson-card p { margin:0; color: var(--text-secondary); font-size: 12px; line-height:1.42; }
.lesson-card.selected { border-color: color-mix(in srgb, var(--blue) 55%, transparent); background: color-mix(in srgb, var(--blue) 13%, transparent); }
@media (max-width: 1500px) {
  .tutorial-layout, .tutorial-workspace-grid, .tutorial-summary-head { grid-template-columns: 1fr; }
  .tutorial-case-panel { position: static; max-height: none; }
  .tutorial-bottom-grid, .tutorial-lesson-grid { grid-template-columns: 1fr; }
  .tutorial-hero { align-items: stretch; flex-direction: column; }
  .tutorial-hero-actions { justify-content: flex-start; }
}

@media (max-width: 1024px) {
  .tutorial-canvas {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .tutorial-canvas::before {
    content: "";
    display: block;
    width: 980px;
    height: 380px;
  }
  .tutorial-edge-layer,
  .tutorial-node {
    min-width: 0;
  }
  .tutorial-edge-layer {
    width: 980px;
  }
  .tutorial-node strong,
  .tutorial-node small,
  .tutorial-node em {
    overflow-wrap: anywhere;
  }
  .catalog-tabs,
  .access-tabs {
    flex-wrap: wrap;
  }
  .catalog-tabs button,
  .access-tabs button {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .catalog-filters {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .catalog-filters .inline-search {
    width: 100%;
  }
  .catalog-filters select,
  .catalog-filters button,
  .catalog-filters .sort-chip {
    width: 100%;
    min-width: 0;
  }
  .evidence-layout,
  .developer-evidence-console main,
  .evidence-filter-panel,
  .evidence-filter-panel .catalog-filters {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .builder-studio-header > div,
  .builder-studio-header h2,
  .builder-studio-header p,
  .builder-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .catalog-tabs,
  .access-tabs,
  .catalog-filters {
    grid-template-columns: 1fr !important;
  }
  .catalog-tabs,
  .access-tabs {
    display: grid !important;
    width: 100%;
  }
  .catalog-tabs button,
  .access-tabs button {
    width: 100%;
  }
  .builder-actions {
    grid-template-columns: 1fr !important;
  }
  .builder-actions > * {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}

/* Sentinel reference shell and workbench refinements. */
body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 320px),
    linear-gradient(135deg, var(--panel-deep), var(--panel-deep) 52%, var(--panel-deep));
}
.enterprise-shell { grid-template-columns: 260px minmax(0, 1fr); }
.side-rail {
  gap: 14px;
  padding: 16px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 98%, transparent), color-mix(in srgb, var(--panel-deep) 96%, transparent));
}
.brand-block {
  min-height: 58px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--line);
}
.brand-orb {
  width: 34px;
  height: 38px;
  border-radius: 10px 10px 14px 14px;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--muted) 36%, transparent), 0 16px 34px color-mix(in srgb, var(--blue) 28%, transparent);
}
.brand-orb:before {
  inset: 7px 8px 9px;
  border: 2px solid color-mix(in srgb, var(--text) 78%, transparent);
  border-top-color: color-mix(in srgb, var(--text) 28%, transparent);
  border-radius: 7px 7px 10px 10px;
}
.brand-orb:after {
  inset: 12px 14px auto;
  height: 8px;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--text) 80%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--text) 80%, transparent);
  border-radius: 0;
  transform: rotate(-45deg);
}
.brand-block strong {
  font-size: 19px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brand-block span {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.workspace-switcher {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: var(--radius-md);
  padding: 10px;
}
.workspace-switcher > span {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--violet), var(--violet));
  font-weight: 900;
}
.workspace-switcher strong,
.workspace-switcher small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-switcher small,
.workspace-switcher em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}
.nav-link {
  border-radius: var(--radius-md);
  padding: 11px 12px;
}
.nav-link.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 82%, transparent), color-mix(in srgb, var(--blue) 68%, transparent));
  box-shadow: inset 3px 0 0 var(--blue), 0 14px 28px color-mix(in srgb, var(--blue) 22%, transparent);
}
body.connected .role-strip {
  display: none;
}
body.connected .connection-strip {
  border: 0;
  background: transparent;
  padding: 0;
  margin: -6px 0 14px;
}
body.connected .connection-strip label,
body.connected .connection-strip #saveConnection {
  display: none;
}
.console {
  padding: 0 18px 24px;
}
.console-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
  margin: 0 -18px 18px;
  padding: 10px 18px;
  grid-template-columns: 1fr minmax(360px, 640px) 1fr;
  background: var(--panel-solid);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.title-group {
  order: 2;
  grid-column: 1 / -1;
  padding: 8px 8px 0;
}
.title-group h1 { font-size: 24px; }
.global-search {
  order: 1;
  grid-column: 2;
  height: 40px;
  border-radius: var(--radius-md);
}
.top-actions {
  order: 1;
  grid-column: 3;
  justify-self: end;
  gap: 8px;
}
.env-select,
.icon-btn,
.user-chip > span {
  height: 36px;
}
.icon-btn,
.user-chip > span {
  width: 36px;
  border-radius: var(--radius-md);
}
.panel,
.metric-card {
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 82%, transparent), color-mix(in srgb, var(--panel-deep) 78%, transparent));
  box-shadow: none;
}
.panel { padding: 16px; }
.metric-card {
  min-height: 112px;
  padding: 14px 14px 10px 66px;
}
.metric-icon {
  left: 14px;
  top: 16px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.metric-card strong {
  font-size: 28px;
}
.compact-metric {
  min-height: 118px;
}
.workbench-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.workbench-header h2 {
  margin: 0 0 4px;
  font-size: 27px;
  letter-spacing: -.03em;
}
.workbench-header p {
  margin: 0;
  color: var(--muted);
}
.workbench-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.workbench-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.audit-ledger-console,
.observability-console {
  max-width: 1780px;
  margin: 0 auto;
}
.audit-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: 12px;
}
.audit-events-panel,
.audit-detail-panel {
  min-width: 0;
}
.compact-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.audit-table-host .table-wrap {
  max-height: 520px;
}
.audit-events-table td,
.audit-events-table th,
.service-health-table td,
.service-health-table th {
  white-space: nowrap;
}
.audit-detail-head,
.evidence-chain > div,
.actor-row,
.exception-row,
.log-row,
.alert-row {
  display: grid;
  gap: 8px;
  align-items: center;
}
.audit-detail-head {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 12px;
}
.audit-detail-head h3 {
  margin: 0;
}
.audit-detail-card {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-deep) 54%, transparent);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 10px;
}
.audit-detail-card h4 {
  margin: 0 0 10px;
}
.linked-artifacts {
  display: grid;
  gap: 8px;
}
.linked-artifacts > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
  padding-bottom: 8px;
}
.audit-bottom-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr .9fr .95fr;
  gap: 12px;
  margin-top: 12px;
}
.integrity-score strong,
.selected-service-grid strong {
  display: block;
  font-size: 28px;
}
.integrity-score span,
.selected-service-grid span,
.traffic-stats span {
  color: var(--muted);
  font-size: 12px;
}
.evidence-chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.evidence-chain > div {
  justify-items: center;
  text-align: center;
  color: var(--muted);
}
.evidence-chain span {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 36%, transparent);
  color: var(--blue);
  font-weight: 900;
}
.actor-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
}
.actor-row small,
.exception-row small,
.alert-row small {
  display: block;
  color: var(--muted);
}
.exception-row {
  width: 100%;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 9px 0;
}
.exception-row > span,
.incident-row > span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--amber);
}
.exception-row > span.bad,
.incident-row > span {
  background: var(--red);
}
.exception-row em {
  color: var(--amber);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.ops-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: 12px;
}
.ops-main,
.ops-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.ops-chart-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr .9fr;
  gap: 12px;
}
.ops-table-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr .9fr;
  gap: 12px;
}
.ops-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr .9fr;
  gap: 12px;
}
.traffic-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.traffic-stats strong {
  display: block;
  font-size: 24px;
}
.large-chart {
  min-height: 180px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 28%, transparent), transparent 74%),
    linear-gradient(120deg, transparent 0 10%, color-mix(in srgb, var(--blue) 78%, transparent) 11% 12%, transparent 13% 25%, color-mix(in srgb, var(--blue) 86%, transparent) 26% 27%, transparent 28% 45%, color-mix(in srgb, var(--blue) 78%, transparent) 46% 47%, transparent 48% 70%, color-mix(in srgb, var(--blue) 86%, transparent) 71% 72%, transparent 73%),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--muted) 8%, transparent) 32px);
}
.large-chart.violet {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--violet) 28%, transparent), transparent 74%),
    linear-gradient(120deg, transparent 0 12%, color-mix(in srgb, var(--violet) 75%, transparent) 13% 14%, transparent 15% 34%, color-mix(in srgb, var(--violet) 90%, transparent) 35% 36%, transparent 37% 62%, color-mix(in srgb, var(--violet) 75%, transparent) 63% 64%, transparent 65%),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--muted) 8%, transparent) 32px);
}
.large-chart.green {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--green) 22%, transparent), transparent 74%),
    linear-gradient(120deg, transparent 0 9%, color-mix(in srgb, var(--green) 78%, transparent) 10% 11%, transparent 12% 35%, color-mix(in srgb, var(--green) 75%, transparent) 36% 37%, transparent 38% 66%, color-mix(in srgb, var(--green) 90%, transparent) 67% 68%, transparent 69%),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--muted) 8%, transparent) 32px);
}
.error-donut {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.donut.error {
  background: conic-gradient(var(--red) 0 52%, var(--amber) 52% 83%, var(--violet) 83% 94%, var(--green) 94% 100%);
}
.log-list,
.endpoint-bars,
.trace-panel,
.selected-service,
.alert-list {
  display: grid;
  gap: 8px;
}
.log-row {
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
  padding: 8px 0;
}
.log-row time,
.log-row code {
  color: var(--muted);
  font-size: 12px;
}
.endpoint-bars > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
  align-items: center;
}
.endpoint-bars i {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  overflow: hidden;
}
.endpoint-bars b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--red));
}
.trace-bars {
  display: grid;
  gap: 8px;
}
.trace-bars > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
}
.trace-bars span,
.trace-bars em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}
.trace-bars i {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 32%, transparent), var(--blue));
}
.selected-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.selected-service-grid > div {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px;
}
.selected-service-grid .mini-chart {
  height: 44px;
}
.alert-row {
  grid-template-columns: 70px minmax(0, 1fr) auto;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
}
.alert-row > span {
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid var(--line);
}
.alert-row .high { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.alert-row .medium { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.alert-row .low { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.alert-row .info { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}
.heatmap-grid span {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--blue), var(--amber));
}
.bad-text { color: var(--red); }
.ok-text { color: var(--green); }

@media (max-width: 1400px) {
  .workbench-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audit-workbench-grid,
  .ops-workbench-grid {
    grid-template-columns: 1fr;
  }
  .audit-bottom-grid,
  .ops-chart-grid,
  .ops-table-grid,
  .ops-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .console-topbar {
    grid-template-columns: 1fr;
  }
  .global-search,
  .top-actions,
  .title-group {
    grid-column: 1;
    justify-self: stretch;
  }
  .top-actions {
    justify-content: space-between;
    overflow-x: auto;
  }
  .workbench-header {
    display: grid;
  }
  .workbench-actions {
    justify-content: stretch;
  }
  .workbench-actions button {
    flex: 1;
  }
}
@media (max-width: 760px) {
  .workbench-kpis,
  .audit-bottom-grid,
  .ops-chart-grid,
  .ops-table-grid,
  .ops-bottom-grid,
  .error-donut,
  .evidence-chain,
  .selected-service-grid,
  .traffic-stats {
    grid-template-columns: 1fr !important;
  }
  .compact-filters {
    justify-content: stretch;
  }
  .compact-filters > * {
    width: 100%;
  }
  .log-row,
  .trace-bars > div,
  .alert-row {
    grid-template-columns: 1fr;
  }
}

/* v2.5.0 API Management Portfolio */
.api-management-shell { display: grid; gap: 14px; }
.api-portfolio-hero { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:18px 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--panel-deep) 96%, transparent), color-mix(in srgb, var(--panel-deep) 92%, transparent)); }
.api-title-row { display:flex; gap:10px; align-items:center; }
.api-title-row h2 { margin:0; font-size:27px; letter-spacing:-.045em; }
.api-meta-row { display:flex; flex-wrap:wrap; gap:18px; color:var(--text-secondary); font-size:13px; margin-top:8px; }
.api-portfolio-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.api-kpi-grid { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:12px; }
.api-main-grid { display:grid; grid-template-columns: minmax(0, 1.8fr) 340px 300px; gap:12px; align-items:stretch; }
.api-bottom-grid { display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:12px; }
.api-table-panel { min-width: 0; }
.api-table-tools { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.inline-search, .api-table-tools select { min-height:34px; border-radius: var(--radius-md); border:1px solid color-mix(in srgb, var(--muted) 18%, transparent); background:color-mix(in srgb, var(--panel-deep) 48%, transparent); color:var(--text-primary); padding:7px 10px; }
.api-table th, .api-table td { white-space:nowrap; }
.favorite-star { color:var(--text); opacity:.9; }
.selected-row { background: color-mix(in srgb, var(--blue) 22%, transparent) !important; box-shadow: inset 3px 0 0 var(--blue); }
.api-spark { width:86px; height:24px; display:block; margin-top:2px; }
.api-spark polyline { fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.api-detail-card { display:grid; gap:12px; }
.api-detail-card header { display:flex; justify-content:space-between; gap:10px; align-items:start; padding-bottom:10px; border-bottom:1px solid color-mix(in srgb, var(--muted) 12%, transparent); }
.api-detail-card h3 { margin:0 0 4px; font-size:18px; }
.api-toggle-list { display:grid; gap:8px; padding-top:8px; border-top:1px solid color-mix(in srgb, var(--muted) 10%, transparent); }
.api-toggle-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; color:var(--text-secondary); font-size:13px; }
.api-toggle-row input { appearance:none; width:38px; height:22px; border-radius:999px; background:color-mix(in srgb, var(--green) 90%, transparent); border:1px solid color-mix(in srgb, var(--muted) 20%, transparent); position:relative; cursor:pointer; }
.api-toggle-row input::after { content:''; position:absolute; width:16px; height:16px; left:3px; top:2px; border-radius:50%; background:var(--text); transition:.15s ease; }
.api-toggle-row input:checked { background:var(--blue); border-color:var(--blue); }
.api-toggle-row input:checked::after { left:18px; background:var(--on-accent); }
.api-detail-actions { display:flex; justify-content:space-between; gap:8px; padding-top:8px; }
.api-activity-list { position:relative; display:grid; gap:0; max-height:460px; overflow:auto; padding-left:8px; }
.api-activity-list::before { content:''; position:absolute; left:15px; top:22px; bottom:22px; width:1px; background:linear-gradient(var(--green), var(--blue), var(--amber)); opacity:.55; }
.api-activity-item { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:12px 0; position:relative; }
.api-activity-item .activity-dot { width:22px; height:22px; border-radius:50%; border:2px solid var(--green); background:var(--panel-deep); box-shadow:0 0 0 5px color-mix(in srgb, var(--green) 8%, transparent); z-index:1; margin-top:3px; }
.api-activity-item .activity-dot.warn { border-color:var(--amber); }
.api-activity-item strong { display:block; font-size:13px; }
.api-activity-item p { margin:4px 0; color:var(--text-secondary); font-size:12px; line-height:1.35; }
.api-activity-item small { color:var(--text-muted); font-size:11px; }
.api-topology-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.topology-node { position:relative; min-height:76px; padding:12px 34px 12px 12px; border-radius: var(--radius-lg); border:1px solid color-mix(in srgb, var(--blue) 18%, transparent); background:color-mix(in srgb, var(--panel-deep) 50%, transparent); display:grid; gap:5px; }
.topology-node strong { font-size:13px; }
.topology-node span { justify-self:start; padding:3px 9px; border-radius:999px; color:var(--green); background:color-mix(in srgb, var(--green) 16%, transparent); font-size:11px; font-weight:800; }
.topology-node small { color:var(--text-muted); font-size:11px; }
.topology-node b { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--blue); }
.ok-text { color:var(--green); }
.warn-text { color:var(--amber); }
@media (max-width: 1550px) {
  .api-main-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .api-activity-panel { grid-column: 1 / -1; }
  .api-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .api-portfolio-hero { flex-direction:column; align-items:stretch; }
  .api-main-grid, .api-bottom-grid, .api-kpi-grid, .api-topology-grid { grid-template-columns: 1fr; }
}

/* v2.6.0 Policy Studio — GatewaySphere-style visual policy designer */
.policy-studio-shell { display: grid; gap: 12px; }
.policy-studio-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--panel-deep) 96%, transparent), color-mix(in srgb, var(--panel-deep) 94%, transparent)); }
.policy-hero-main { min-width: 0; }
.policy-title-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.policy-title-row h2 { margin: 0; font-size: 24px; letter-spacing: -.045em; }
.policy-meta-row { display:flex; gap:16px; flex-wrap:wrap; color: var(--text-secondary); font-size:12px; margin-top:7px; }
.policy-chip-row { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.policy-chip-row span { padding: 5px 9px; border-radius: var(--radius-md); border:1px solid color-mix(in srgb, var(--blue) 16%, transparent); background: color-mix(in srgb, var(--panel-deep) 42%, transparent); color: var(--text-secondary); font-size: 11px; }
.policy-hero-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.success-outline { border-color: color-mix(in srgb, var(--green) 35%, transparent) !important; color:var(--green) !important; }
.policy-studio-grid { display:grid; grid-template-columns: minmax(0, 1.58fr) 420px 320px; gap:12px; align-items: stretch; }
.policy-flow-panel { min-height: 510px; padding: 0; overflow: hidden; }
.policy-tabs { display:flex; gap:18px; align-items:center; height:45px; padding: 0 16px; border-bottom:1px solid color-mix(in srgb, var(--muted) 12%, transparent); background: color-mix(in srgb, var(--panel-deep) 54%, transparent); }
.policy-tabs button { border:0; background:transparent; color: var(--text-muted); font-weight: 800; font-size: 12px; padding: 14px 0; border-bottom:2px solid transparent; cursor:pointer; }
.policy-tabs button.active { color:var(--blue); border-color:var(--blue); }
.policy-flow-canvas { position:relative; height: 465px; overflow:hidden; border-radius: 0 0 18px 18px; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--blue) 22%, transparent) 1px, transparent 1.4px), linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 82%, transparent), color-mix(in srgb, var(--panel-deep) 76%, transparent)); background-size: 22px 22px, auto; }
.policy-canvas-toolbar { position:absolute; left:12px; top:106px; z-index: 5; display:grid; gap:4px; padding:6px; border:1px solid color-mix(in srgb, var(--muted) 16%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel-deep) 66%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--panel-deep) 25%, transparent); }
.policy-canvas-toolbar button { width:27px; height:27px; border:0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor:pointer; }
.policy-canvas-toolbar button:hover { background: color-mix(in srgb, var(--blue) 16%, transparent); color:var(--on-accent); }
.policy-edge-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index: 1; }
.policy-edge-layer path { fill:none; stroke:color-mix(in srgb, var(--muted) 58%, transparent); stroke-width:2.2; marker-end:url(#policy-arrow); }
.policy-edge-layer marker path { fill: color-mix(in srgb, var(--muted) 75%, transparent); }
.policy-edge.warn path { stroke:color-mix(in srgb, var(--amber) 76%, transparent); stroke-dasharray: 7 5; }
.policy-edge.blocked path { stroke:color-mix(in srgb, var(--red) 78%, transparent); stroke-dasharray: 6 6; }
.policy-edge text { fill:var(--text); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.policy-flow-nodes { position:absolute; inset:0; z-index: 3; }
.policy-flow-node { position:absolute; width:132px; min-height:92px; border-radius: var(--radius-lg); border:1px solid color-mix(in srgb, var(--blue) 24%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 88%, transparent), color-mix(in srgb, var(--panel-deep) 92%, transparent)); color: var(--text-primary); text-align:center; padding: 13px 10px 10px; cursor:pointer; box-shadow: 0 14px 36px color-mix(in srgb, var(--panel-deep) 26%, transparent); transition: .16s ease; }
.policy-flow-node:hover, .policy-flow-node.selected { transform: translateY(-1px); outline:2px solid color-mix(in srgb, var(--blue) 90%, transparent); box-shadow:0 0 0 5px color-mix(in srgb, var(--blue) 12%, transparent), 0 18px 42px color-mix(in srgb, var(--panel-deep) 30%, transparent); }
.policy-flow-node.allowed { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.policy-flow-node.warn { border-color: color-mix(in srgb, var(--amber) 62%, transparent); }
.policy-flow-node.blocked { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.policy-flow-node .node-number { position:absolute; left:9px; top:9px; width:21px; height:21px; border-radius: var(--radius-md); display:grid; place-items:center; background:color-mix(in srgb, var(--muted) 15%, transparent); color:var(--blue); font-size:11px; font-weight:900; }
.policy-flow-node i { display:grid; place-items:center; width:34px; height:34px; margin: 10px auto 8px; border-radius: var(--radius-lg); background:color-mix(in srgb, var(--blue) 28%, transparent); color:var(--blue); font-style:normal; font-weight:900; }
.policy-flow-node strong { display:block; font-size:12px; line-height:1.1; }
.policy-flow-node small { display:block; color: var(--text-muted); font-size:10px; margin-top:4px; text-transform:capitalize; }
.policy-flow-node em { display:inline-block; margin-top:8px; padding:3px 7px; border-radius: var(--radius-md); color:var(--green); background:color-mix(in srgb, var(--green) 14%, transparent); font-style:normal; text-transform:uppercase; letter-spacing:.08em; font-size:9px; font-weight:900; }
.policy-flow-node.warn em { color:var(--amber); background:color-mix(in srgb, var(--amber) 16%, transparent); }
.policy-flow-node.blocked em { color:var(--red); background:color-mix(in srgb, var(--red) 15%, transparent); }
.policy-minimap { position:absolute; right:14px; bottom:14px; width:142px; height:72px; border-radius: var(--radius-md); border:1px solid color-mix(in srgb, var(--blue) 22%, transparent); background:color-mix(in srgb, var(--panel-deep) 68%, transparent); z-index:4; }
.policy-minimap span { position:absolute; width:12px; height:7px; border-radius: var(--radius-sm); background:color-mix(in srgb, var(--blue) 55%, transparent); }
.policy-zoom { position:absolute; left:13px; bottom:13px; z-index:4; display:flex; align-items:center; gap:6px; padding:6px; border:1px solid color-mix(in srgb, var(--muted) 16%, transparent); border-radius: var(--radius-md); background:color-mix(in srgb, var(--panel-deep) 66%, transparent); }
.policy-zoom button { border:0; background:color-mix(in srgb, var(--panel-deep) 80%, transparent); color:var(--on-accent); border-radius: var(--radius-md); height:26px; min-width:28px; }
.policy-zoom span { font-size:12px; color:var(--text-secondary); padding: 0 6px; }
.policy-step-panel { align-self: stretch; overflow:auto; max-height: 560px; }
.policy-step-inspector { display:grid; gap:9px; }
.policy-inspector-hero { display:grid; grid-template-columns: 42px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border-radius: var(--radius-lg); border:1px solid color-mix(in srgb, var(--blue) 18%, transparent); background:color-mix(in srgb, var(--panel-deep) 48%, transparent); }
.policy-inspector-hero > span:first-child { display:grid; place-items:center; width:40px; height:40px; border-radius: var(--radius-lg); background:linear-gradient(135deg, color-mix(in srgb, var(--blue) 40%, transparent), color-mix(in srgb, var(--cyan) 18%, transparent)); color:var(--blue); font-weight:900; }
.policy-inspector-hero strong { display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.policy-inspector-hero small { color:var(--text-muted); font-size:11px; text-transform:capitalize; }
.policy-field { display:grid; gap:4px; }
.policy-field span, .policy-toggle span { color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:900; }
.policy-field input, .policy-field select { min-height:34px; border:1px solid color-mix(in srgb, var(--muted) 16%, transparent); border-radius: var(--radius-md); background:color-mix(in srgb, var(--panel-deep) 52%, transparent); color:var(--text-primary); padding:8px 10px; font:inherit; }
.policy-toggle { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 10px; border-radius: var(--radius-md); border:1px solid color-mix(in srgb, var(--muted) 13%, transparent); background:color-mix(in srgb, var(--panel-deep) 42%, transparent); }
.policy-toggle input { width:38px; height:22px; accent-color:var(--blue); }
.policy-accordion { border:1px solid color-mix(in srgb, var(--muted) 13%, transparent); border-radius: var(--radius-md); background:color-mix(in srgb, var(--panel-deep) 42%, transparent); padding:9px 10px; }
.policy-accordion summary { cursor:pointer; color:var(--text-secondary); font-size:12px; font-weight:800; }
.policy-accordion p { margin:8px 0 0; color:var(--text-muted); font-size:11px; line-height:1.4; }
.policy-activity-panel { max-height: 560px; overflow:auto; }
.policy-activity-timeline { position:relative; display:grid; gap:0; padding-left: 6px; }
.policy-activity-timeline::before { content:''; position:absolute; left:16px; top:16px; bottom:16px; width:1px; background:linear-gradient(var(--blue),var(--green),var(--amber),var(--violet)); opacity:.6; }
.policy-activity-item { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:10px 0; position:relative; }
.policy-activity-item .activity-dot { z-index:1; width:22px; height:22px; border-radius:50%; border:2px solid var(--blue); background:var(--panel-deep); box-shadow:0 0 0 5px color-mix(in srgb, var(--blue) 10%, transparent); margin-top:3px; }
.policy-activity-item .activity-dot.allowed { border-color:var(--green); }
.policy-activity-item .activity-dot.warn { border-color:var(--amber); }
.policy-activity-item .activity-dot.blocked { border-color:var(--red); }
.policy-activity-item strong { display:block; font-size:12px; }
.policy-activity-item p { margin:4px 0; color:var(--text-secondary); font-size:11px; line-height:1.35; }
.policy-activity-item small { color:var(--text-muted); font-size:10px; }
.policy-version-card { margin-top:12px; padding-top:12px; border-top:1px solid color-mix(in srgb, var(--muted) 12%, transparent); }
.policy-version-list { display:grid; gap:5px; margin: 8px 0; }
.policy-version-row { display:grid; grid-template-columns: 66px 84px minmax(0,1fr); align-items:center; gap:8px; padding:8px 9px; border-radius: var(--radius-md); background:color-mix(in srgb, var(--panel-deep) 38%, transparent); }
.policy-version-row small { color:var(--text-muted); font-size:10px; line-height:1.3; }
.policy-lower-grid { display:grid; grid-template-columns: 1.05fr 1.15fr 1fr; gap:12px; align-items:stretch; }
.policy-validation-list { display:grid; gap:7px; }
.policy-check-row { display:grid; grid-template-columns:24px minmax(0,1fr) 70px; gap:8px; align-items:center; padding:9px 10px; border-radius: var(--radius-md); background:color-mix(in srgb, var(--panel-deep) 43%, transparent); border:1px solid color-mix(in srgb, var(--muted) 12%, transparent); }
.policy-check-row > span { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:var(--green); border:1px solid color-mix(in srgb, var(--green) 42%, transparent); }
.policy-check-row strong { display:block; font-size:12px; }
.policy-check-row small { display:block; color:var(--text-muted); font-size:11px; }
.policy-check-row em { justify-self:end; color:var(--green); font-style:normal; font-size:11px; font-weight:800; }
.policy-test-tabs { display:flex; gap:16px; border-bottom:1px solid color-mix(in srgb, var(--muted) 12%, transparent); margin-bottom:10px; }
.policy-test-tabs button { border:0; background:transparent; color:var(--text-muted); padding:0 0 8px; font-weight:800; cursor:pointer; }
.policy-test-tabs button.active { color:var(--blue); border-bottom:2px solid var(--blue); }
.policy-test-console { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.policy-test-request, .policy-test-eval { border:1px solid color-mix(in srgb, var(--muted) 13%, transparent); border-radius: var(--radius-lg); background:color-mix(in srgb, var(--panel-deep) 43%, transparent); padding:11px; min-height:210px; }
.policy-test-request span { color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:900; }
.policy-test-request pre { white-space:pre-wrap; font-size:11px; color:var(--text-secondary); line-height:1.45; margin:10px 0; max-height:132px; overflow:auto; }
.policy-test-request em { color:var(--green); font-style:normal; font-weight:900; }
.policy-test-eval { display:grid; gap:6px; }
.policy-test-eval div { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:8px; align-items:center; font-size:12px; }
.policy-test-eval span { color:var(--green); }
.policy-test-eval em { color:var(--green); font-style:normal; font-size:11px; }
.policy-test-eval footer { color:var(--blue); font-weight:800; align-self:end; }
.policy-metrics-grid { display:grid; grid-template-columns: 1fr 1fr; gap:9px; }
.policy-metric { padding:11px; border-radius: var(--radius-lg); border:1px solid color-mix(in srgb, var(--muted) 13%, transparent); background:color-mix(in srgb, var(--panel-deep) 43%, transparent); min-height:106px; }
.policy-metric span { display:block; color:var(--text-muted); font-size:11px; }
.policy-metric strong { display:block; font-size:23px; letter-spacing:-.05em; margin-top:6px; }
.policy-metric small { color:var(--green); font-size:11px; }
@media (max-width: 1550px) {
  .policy-studio-grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .policy-activity-panel { grid-column: 1 / -1; max-height: 320px; }
  .policy-lower-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .policy-studio-hero { flex-direction:column; align-items:stretch; }
  .policy-hero-actions { justify-content:flex-start; }
  .policy-studio-grid { grid-template-columns: 1fr; }
  .policy-flow-canvas { overflow:auto; }
  .policy-test-console, .policy-metrics-grid { grid-template-columns: 1fr; }
}

/* v2.7.0 Enterprise suite modules: Command Center, API Catalog, Access & Developer Evidence */
.suite-command-center,.catalog-console,.access-console,.developer-evidence-console{display:flex;flex-direction:column;gap:16px;max-width:1680px;margin:0 auto}.command-kpis,.access-kpi-grid{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:10px}.access-kpi-grid{grid-template-columns:repeat(5,minmax(160px,1fr))}.command-kpi{min-height:112px}.command-board{display:grid;grid-template-columns:2fr 2fr 1.25fr 1.25fr;gap:12px;align-items:stretch}.command-board.lower{grid-template-columns:2.1fr 1.55fr 1.1fr}.command-board.bottom{grid-template-columns:1.35fr 1fr 1fr}.workflow-health-card,.api-traffic-card,.policy-compliance-card,.command-activity-card,.command-topology-card,.command-approval-card,.command-incidents-card,.command-run-card,.command-evidence-card,.command-governance-card{min-height:220px}.command-donut-layout,.donut-layout{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center}.donut{width:138px;height:138px;border-radius:999px;background:conic-gradient(var(--green) 0 72%,var(--amber) 72% 84%,var(--red) 84% 91%,color-mix(in srgb, var(--muted) 25%, transparent) 91%);display:grid;place-items:center;box-shadow:inset 0 0 0 22px color-mix(in srgb, var(--panel-deep) 92%, transparent);position:relative}.donut span{font-size:30px;font-weight:800;color:var(--text)}.donut small{display:block;position:absolute;top:82px;color:var(--muted);font-weight:700}.donut.compliance{background:conic-gradient(var(--green) 0 92%,var(--amber) 92% 96%,var(--red) 96% 98%,color-mix(in srgb, var(--muted) 25%, transparent) 98%)}.donut.lifecycle{background:conic-gradient(var(--green) 0 62%,var(--blue) 62% 80%,var(--violet) 80% 91%,var(--red) 91%)}.legend-list{display:flex;flex-direction:column;gap:9px}.legend-list div{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.legend-list i{width:10px;height:10px;border-radius:999px;background:var(--blue);display:inline-block}.legend-list i.green{background:var(--green)}.legend-list i.amber{background:var(--amber)}.legend-list i.red{background:var(--red)}.legend-list i.slate{background:var(--muted)}.legend-list i.violet{background:var(--violet)}.legend-list strong{margin-left:auto;color:var(--text)}.traffic-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.traffic-stats div,.evidence-stat{background:color-mix(in srgb, var(--panel-deep) 72%, transparent);border:1px solid var(--line);border-radius: var(--radius-lg);padding:10px}.traffic-stats span,.evidence-stat span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.traffic-stats strong,.evidence-stat strong{font-size:22px}.traffic-stats small,.evidence-stat small{color:var(--green)}.large-chart{height:140px;border-radius: var(--radius-lg);background:linear-gradient(180deg,color-mix(in srgb, var(--blue) 24%, transparent),transparent),repeating-linear-gradient(90deg,color-mix(in srgb, var(--muted) 8%, transparent) 0 1px,transparent 1px 54px);position:relative;overflow:hidden}.large-chart:after{content:"";position:absolute;inset:22px 18px;background:linear-gradient(110deg,transparent 0 8%,var(--blue) 8% 10%,transparent 10% 22%,var(--violet) 22% 24%,transparent 24% 42%,var(--green) 42% 44%,transparent 44% 65%,var(--red) 65% 67%,transparent 67%);opacity:.75}.legend-inline{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px;margin-top:8px}.command-activity-list,.incident-list,.evidence-highlight-list,.privilege-list,.catalog-mini-list,.trend-list{display:flex;flex-direction:column;gap:8px}.activity-line,.incident-row,.mini-evidence-row,.privilege-row,.mini-api-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;width:100%;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb, var(--muted) 12%, transparent);padding:8px 2px;color:var(--text);text-align:left}.activity-line p,.activity-line small,.incident-row small,.mini-evidence-row small,.mini-api-row small,.privilege-row small{color:var(--muted);font-size:12px}.activity-dot{width:30px;height:30px;border-radius:999px;background:color-mix(in srgb, var(--green) 14%, transparent);border:1px solid var(--green);display:inline-block}.activity-dot.warn{background:color-mix(in srgb, var(--amber) 14%, transparent);border-color:var(--amber)}.incident-row span{width:8px;height:8px;background:var(--red);border-radius:999px;margin-top:5px}.incident-row em{color:var(--amber);font-style:normal}.topology-flow{display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr;gap:10px;align-items:center}.topology-flow div{border:1px solid var(--line);border-radius: var(--radius-lg);padding:14px;background:color-mix(in srgb, var(--panel-deep) 75%, transparent);text-align:center}.topology-flow strong{color:var(--green)}.topology-flow span{height:1px;background:linear-gradient(90deg,var(--green),color-mix(in srgb, var(--blue) 30%, transparent))}.topology-flow i{display:none}.governance-bars{display:flex;flex-direction:column;gap:10px}.governance-bars div{display:grid;grid-template-columns:1fr auto 120px;gap:10px;align-items:center}.governance-bars span{color:var(--muted)}.governance-bars i{height:7px;border-radius:999px;background:color-mix(in srgb, var(--muted) 20%, transparent);overflow:hidden}.governance-bars b{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--violet))}
.catalog-header,.access-header,.developer-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.catalog-header h2,.access-header h2,.developer-header h2{font-size:28px;line-height:1.05;margin:0 0 6px}.catalog-header p,.access-header p,.developer-header p{color:var(--muted);margin:0}.catalog-actions,.access-actions{display:flex;gap:10px}.catalog-tabs,.access-tabs{display:flex;gap:8px}.catalog-tabs button,.access-tabs button,.detail-tabs button{border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 75%, transparent);color:var(--muted);border-radius: var(--radius-md);padding:9px 14px;font-weight:700}.catalog-tabs button.active,.access-tabs button.active,.detail-tabs button.active{background:color-mix(in srgb, var(--blue) 38%, transparent);color:var(--text);border-color:color-mix(in srgb, var(--blue) 55%, transparent)}.catalog-tabs span{margin-left:8px;background:color-mix(in srgb, var(--muted) 18%, transparent);padding:2px 8px;border-radius:999px}.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:12px}.catalog-list-panel,.access-table-panel,.evidence-table-panel{min-height:520px}.catalog-filters{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.inline-search,.catalog-filters select{height:36px;border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 86%, transparent);color:var(--text);border-radius: var(--radius-md);padding:0 12px}.inline-search{min-width:280px}.sort-chip,.scope-chip{display:inline-flex;border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 78%, transparent);border-radius: var(--radius-md);padding:6px 9px;color:var(--muted);font-size:12px}.api-color-icon{width:26px;height:26px;display:inline-grid;place-items:center;border-radius: var(--radius-md);margin-right:8px;background:linear-gradient(135deg,var(--blue),var(--violet))}.api-color-icon.payments{background:linear-gradient(135deg,var(--violet),var(--red))}.api-color-icon.customer{background:linear-gradient(135deg,var(--blue),var(--cyan))}.api-color-icon.orders{background:linear-gradient(135deg,var(--green),var(--green))}.api-color-icon.identity{background:linear-gradient(135deg,var(--cyan),var(--blue))}.catalog-detail-panel,.access-detail-panel,.evidence-detail-panel{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 92px);overflow:auto}.catalog-detail header,.person-header,.evidence-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}.catalog-detail p{color:var(--muted);line-height:1.55}.api-detail-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.api-detail-metrics div{border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 66%, transparent);border-radius: var(--radius-md);padding:10px}.api-detail-metrics strong{display:block;font-size:18px}.api-detail-metrics span{color:var(--muted);font-size:11px}.detail-tabs{display:flex;gap:6px;margin:10px 0 14px;flex-wrap:wrap}.catalog-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.catalog-detail-grid article{border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 66%, transparent);border-radius: var(--radius-lg);padding:12px}.method{font-size:11px;padding:2px 6px;border-radius: var(--radius-sm);font-weight:800}.method.post{background:color-mix(in srgb, var(--green) 15%, transparent);color:var(--green)}.method.get{background:color-mix(in srgb, var(--blue) 15%, transparent);color:var(--blue)}.quality-score{width:76px;height:76px;border-radius:999px;background:conic-gradient(var(--green) 0 92%,color-mix(in srgb, var(--muted) 25%, transparent) 92%);display:grid;place-items:center;box-shadow:inset 0 0 0 12px color-mix(in srgb, var(--panel-deep) 90%, transparent)}.catalog-bottom-grid,.access-bottom-grid,.evidence-bottom-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr 1.4fr;gap:12px}.domain-bars{display:flex;flex-direction:column;gap:9px}.domain-bars div{display:grid;grid-template-columns:120px 1fr 34px;gap:10px}.domain-bars i{height:4px;background:color-mix(in srgb, var(--muted) 20%, transparent);border-radius:999px;align-self:center}.domain-bars b{display:block;height:100%;background:var(--blue);border-radius:inherit}.lifecycle-donut{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:14px}.catalog-health-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.catalog-health-grid div{border-left:1px solid var(--line);padding-left:12px}.catalog-health-grid span{color:var(--muted);font-size:12px}.catalog-health-grid strong{display:block;font-size:22px}.table-footer{margin-top:12px;color:var(--muted);font-size:12px}.access-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:12px}.avatar{width:52px;height:52px;border-radius:999px;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet));font-weight:900}.avatar.small{width:28px;height:28px;font-size:11px;margin-right:8px}.avatar.tiny{width:22px;height:22px;font-size:10px}.access-detail-section{border-top:1px solid var(--line);padding:12px 0}.access-detail-section span{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px;margin-bottom:7px}.access-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.access-detail-grid div,.campaign-card{border:1px solid var(--line);border-radius: var(--radius-md);padding:10px;background:color-mix(in srgb, var(--panel-deep) 66%, transparent)}.access-detail-grid small{display:block;color:var(--muted)}.permission-matrix table{width:100%}.campaign-card{margin-bottom:10px}.progress{display:block;height:8px;background:color-mix(in srgb, var(--muted) 20%, transparent);border-radius:999px;margin:10px 0;overflow:hidden}.progress b{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green))}.role-distribution{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}.developer-evidence-console .developer-header{margin-bottom:4px}.evidence-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:12px}.evidence-filter-panel{margin-bottom:12px}.filter-chips{display:flex;gap:8px;flex-wrap:wrap}.filter-chips span{border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 75%, transparent);border-radius: var(--radius-md);padding:7px 10px;color:var(--muted)}.risk-word.low{color:var(--green)}.risk-word.medium{color:var(--amber)}.risk-word.high{color:var(--red)}.evidence-preview{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius: var(--radius-lg);padding:12px;background:color-mix(in srgb, var(--panel-deep) 66%, transparent);margin-bottom:12px}.coverage-widget{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}.trend-list>div{display:grid;grid-template-columns:auto 1fr auto 80px;gap:8px;align-items:center}.hidden-json{display:none}.full-width{width:100%}.small{height:32px;padding:0 10px}.notification-dot.inline{position:static;display:inline-grid;place-items:center;margin-left:4px}.status-pill.draft{background:color-mix(in srgb, var(--cyan) 14%, transparent);color:var(--cyan);border-color:color-mix(in srgb, var(--cyan) 38%, transparent)}
@media (max-width:1400px){.command-kpis{grid-template-columns:repeat(4,1fr)}.command-board,.command-board.lower,.command-board.bottom,.catalog-layout,.access-layout,.evidence-layout{grid-template-columns:1fr}.catalog-detail-panel,.access-detail-panel,.evidence-detail-panel{position:relative;top:auto;max-height:none}.catalog-bottom-grid,.access-bottom-grid,.evidence-bottom-grid{grid-template-columns:1fr 1fr}.command-board .panel{min-height:auto}}
@media (max-width:900px){.command-kpis,.access-kpi-grid,.api-detail-metrics,.catalog-bottom-grid,.access-bottom-grid,.evidence-bottom-grid{grid-template-columns:1fr}.catalog-detail-grid{grid-template-columns:1fr}.topology-flow{grid-template-columns:1fr}.topology-flow span{display:none}}

/* v2.7.2 responsive enterprise layout system
   Device responsiveness is handled as a product-wide layout contract:
   - desktop: persistent left navigation + dense dashboards
   - laptop/tablet: adaptive grids and non-sticky inspectors
   - mobile: compact top navigation, horizontal data/table surfaces, stacked panels
*/
:root {
  --sidebar-width: 278px;
  --console-pad-x: clamp(14px, 1.7vw, 28px);
  --console-pad-y: clamp(14px, 1.6vw, 22px);
}
html, body { max-width: 100%; overflow-x: hidden; }
.console, .view, .panel, .metric-card, .api-management-shell, .builder-studio-shell,
.policy-studio-shell, .catalog-console, .access-console, .developer-evidence-console,
.suite-command-center, .workflow-management-main, .workflow-management-shell {
  min-width: 0;
}
.console { padding: var(--console-pad-y) var(--console-pad-x) 32px; }
.enterprise-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.panel, .metric-card { min-width: 0; }
.panel-head, .catalog-header, .access-header, .developer-header, .builder-studio-header,
.policy-studio-hero, .api-portfolio-hero, .workflow-evidence-hero {
  min-width: 0;
}
.panel-head h3, .catalog-header h2, .access-header h2, .developer-header h2,
.builder-studio-header h2, .policy-studio-hero h2, .api-portfolio-title h2,
.workflow-title-block h2, .title-group h1 {
  overflow-wrap: anywhere;
}
.top-actions, .catalog-actions, .access-actions, .builder-actions,
.policy-studio-actions, .api-portfolio-actions, .workflow-action-bar {
  flex-wrap: wrap;
}
.connection-strip label, .connection-strip input, .global-search, .global-search input,
.builder-field input, .builder-field select, .builder-field textarea,
.inline-search, .catalog-filters select, input, select, textarea { min-width: 0; max-width: 100%; }
.table-wrap { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.enterprise-table { min-width: 760px; }
.table-wrap.compact .enterprise-table { min-width: 640px; }

/* Large laptop: keep enterprise density but stop side inspectors from dominating. */
@media (max-width: 1680px) {
  :root { --sidebar-width: 248px; }
  .console-topbar { grid-template-columns: minmax(240px, 360px) minmax(360px, 1fr) auto; gap: 14px; }
  .command-kpis, .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .policy-studio-grid { grid-template-columns: minmax(0, 1.45fr) minmax(340px, .75fr); }
  .policy-studio-grid > aside:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .api-management-layout, .catalog-layout, .access-layout, .evidence-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 390px); }
  .builder-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
  .workflow-management-shell { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }
}

/* Laptop/tablet landscape: stack inspectors below main workspace and reduce sidebar. */
@media (max-width: 1360px) {
  :root { --sidebar-width: 224px; }
  .side-rail { padding: 16px 12px; }
  .brand-block { gap: 10px; padding-bottom: 14px; }
  .brand-orb { width: 40px; height: 40px; }
  .brand-block strong { font-size: 18px; }
  .nav-link { padding: 10px 11px; gap: 9px; }
  .console-topbar { grid-template-columns: 1fr; }
  .top-actions { justify-content: flex-start; }
  .connection-strip { justify-content: flex-start; flex-wrap: wrap; }
  .connection-strip label { flex: 1 1 240px; }
  .role-strip, .metric-grid, .command-kpis, .access-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-grid, .command-board, .command-board.lower, .command-board.bottom,
  .api-management-main, .api-portfolio-body, .policy-studio-grid,
  .catalog-layout, .access-layout, .evidence-layout, .builder-grid,
  .workflow-management-shell, .workflow-designer-grid,
  .workflow-bottom-grid.refined, .builder-bottom-grid, .production-builder-grid {
    grid-template-columns: 1fr !important;
  }
  .span-7, .span-6, .span-5, .span-4, .span-3 { grid-column: span 12; }
  .catalog-detail-panel, .access-detail-panel, .evidence-detail-panel,
  .builder-inspector-panel, .step-details-panel, .workflow-right-rail,
  .policy-step-panel, .policy-side-panel {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    width: 100%;
  }
  .workflow-right-rail .workflow-activity-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .catalog-bottom-grid, .access-bottom-grid, .evidence-bottom-grid,
  .catalog-detail-grid, .api-detail-metrics, .catalog-health-grid,
  .builder-governance-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .policy-studio-grid > aside:last-child { grid-template-columns: 1fr; }
  .policy-flow-canvas, .builder-canvas-shell, .workflow-canvas-shell,
  .workflow-builder-panel { overflow: auto; -webkit-overflow-scrolling: touch; }
  .policy-flow-canvas-inner, .builder-canvas, .workflow-evidence-canvas {
    min-width: 880px;
  }
}

/* Tablet portrait: turn persistent sidebar into compact top navigation. */
@media (max-width: 1024px) {
  .enterprise-shell { display: block; min-height: 100vh; }
  .side-rail {
    position: sticky;
    top: 0;
    z-index: 80;
    height: auto;
    max-height: none;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  }
  .brand-block { padding: 0; }
  .brand-orb { width: 34px; height: 34px; }
  .brand-block span { display: none; }
  .nav-section-label, .environment-card, .side-card, .side-footer { display: none; }
  .nav-list {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .nav-link {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    white-space: nowrap;
    padding: 9px 12px;
  }
  .nav-link span { width: auto; }
  .console { padding-top: 14px; }
  .console-topbar { margin-bottom: 12px; }
  .title-group h1 { font-size: 23px; }
  .title-group p { font-size: 13px; }
  .global-search { height: 44px; }
  .user-chip { border-left: 0; padding-left: 0; }
  .user-chip > div { display: none; }
  .env-select { height: 40px; }
  .icon-btn, .user-chip > span { width: 38px; height: 38px; }
  .workflow-right-rail .workflow-activity-list { grid-template-columns: 1fr; }
  .topology-flow, .lifecycle-donut, .role-distribution, .coverage-widget {
    grid-template-columns: 1fr !important;
  }
  .topology-flow span { display: none; }
}

/* Mobile: stacked command surfaces with horizontal canvas/table affordances. */
@media (max-width: 760px) {
  :root { --radius: 13px; }
  body { font-size: 14px; }
  .side-rail { grid-template-columns: 1fr; align-items: start; }
  .brand-block strong { font-size: 17px; }
  .console { padding: 12px; }
  .console-topbar { gap: 10px; }
  .top-actions { gap: 8px; }
  .env-select { flex: 1 1 150px; }
  .global-search kbd { display: none; }
  .connection-strip, .role-strip, .metric-grid, .command-kpis,
  .access-kpi-grid, .form-grid, .explain-grid, .analytics-grid,
  .catalog-bottom-grid, .access-bottom-grid, .evidence-bottom-grid,
  .catalog-detail-grid, .api-detail-metrics, .catalog-health-grid,
  .builder-governance-strip, .workflow-support-panels .kv-grid,
  .access-detail-grid, .traffic-stats, .developer-filter-grid {
    grid-template-columns: 1fr !important;
  }
  .connection-strip { align-items: stretch; }
  .connection-strip label, .connection-strip button { width: 100%; }
  .role-strip > div, .metric-card, .panel { border-radius: var(--radius-lg); }
  .metric-card { min-height: 118px; padding: 14px 14px 12px 74px; }
  .metric-icon { width: 44px; height: 44px; left: 15px; top: 18px; }
  .catalog-header, .access-header, .developer-header,
  .api-portfolio-hero, .policy-studio-hero, .builder-studio-header,
  .workflow-evidence-hero { display: grid !important; grid-template-columns: 1fr !important; align-items: start; }
  .catalog-actions, .access-actions, .api-portfolio-actions,
  .policy-studio-actions, .builder-actions, .workflow-action-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .catalog-actions button, .access-actions button, .api-portfolio-actions button,
  .policy-studio-actions button, .builder-actions button, .workflow-action-bar button { width: 100%; }
  .catalog-filters, .builder-canvas-tools, .policy-flow-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .catalog-filters .inline-search, .catalog-filters select { width: 100%; min-width: 0; }
  .builder-canvas-shell, .policy-flow-canvas, .workflow-builder-panel, .workflow-canvas-shell {
    max-width: 100%;
    overflow: auto;
    border-radius: var(--radius-lg);
  }
  .builder-canvas, .policy-flow-canvas-inner, .workflow-evidence-canvas {
    min-width: 760px;
    transform: none !important;
  }
  .builder-canvas-panel, .workflow-builder-panel, .policy-flow-panel { min-height: auto !important; }
  .builder-node { width: 142px; min-height: 76px; }
  .builder-inspector-actions, .step-details-panel .step-links { grid-template-columns: 1fr !important; }
  .step-details-panel .step-hero { grid-template-columns: 34px minmax(0,1fr) !important; }
  .step-details-panel .step-hero-status { grid-column: 1 / -1; justify-self: start !important; max-width: none !important; }
  .activity-line, .incident-row, .mini-evidence-row, .privilege-row, .mini-api-row {
    grid-template-columns: auto 1fr;
  }
  .activity-line > :last-child, .incident-row > :last-child,
  .mini-evidence-row > :last-child, .privilege-row > :last-child, .mini-api-row > :last-child {
    grid-column: 2;
    justify-self: start;
  }
  .domain-bars div, .governance-bars div, .trend-list>div { grid-template-columns: 1fr; }
  .quality-score, .simulation-donut, .donut { margin: 0 auto; }
  .enterprise-table { min-width: 680px; }
}

/* Very small phones: one-column chrome and safe touch targets. */
@media (max-width: 480px) {
  .console { padding: 10px; }
  .title-group h1 { font-size: 20px; }
  .title-group p { display: none; }
  .nav-link { padding: 8px 10px; font-size: 13px; }
  .global-search { height: 40px; }
  .top-actions { display: grid; grid-template-columns: 1fr auto auto auto; }
  .user-chip { justify-self: end; }
  .catalog-actions, .access-actions, .api-portfolio-actions,
  .policy-studio-actions, .builder-actions, .workflow-action-bar,
  .catalog-filters, .builder-canvas-tools, .policy-flow-tools {
    grid-template-columns: 1fr !important;
  }
  .primary-btn, .secondary-btn, .ghost-btn, .link-btn, .purple-btn { min-height: 38px; }
  .builder-canvas, .policy-flow-canvas-inner, .workflow-evidence-canvas { min-width: 680px; }
  .enterprise-table { min-width: 620px; }
}

/* v2.7.3 Targeted responsive hardening for Command Center and Access & Roles.
   These overrides are intentionally placed at the end to beat older console grid rules. */
.suite-command-center,
.access-console {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.suite-command-center > *,
.access-console > *,
.command-board > *,
.access-layout > *,
.access-bottom-grid > * {
  min-width: 0;
}
.command-board,
.command-board.lower,
.command-board.bottom,
.access-layout,
.access-bottom-grid,
.command-kpis,
.access-kpi-grid {
  max-width: 100%;
}
.command-board .panel,
.access-console .panel {
  min-width: 0;
  overflow: hidden;
}
.command-queue-table,
.permission-matrix {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.command-queue-table .enterprise-table,
.permission-matrix .enterprise-table {
  min-width: 560px;
}

@media (max-width: 1660px) {
  /* Command Center: move from a 4-column wide-monitor layout to a laptop-safe 2-column system. */
  .suite-command-center .command-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .suite-command-center .command-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .suite-command-center .command-board.lower,
  .suite-command-center .command-board.bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .suite-command-center .command-activity-card,
  .suite-command-center .command-incidents-card,
  .suite-command-center .command-governance-card {
    min-height: 220px;
  }
  .suite-command-center .api-traffic-card,
  .suite-command-center .command-topology-card,
  .suite-command-center .command-run-card {
    grid-column: span 2;
  }

  /* Access & Roles: stack the inspector below the identity table before it becomes cramped. */
  .access-console .access-layout {
    grid-template-columns: 1fr !important;
  }
  .access-console .access-detail-panel {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    width: 100% !important;
  }
  .access-console .access-detail-panel .person-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .access-console .access-detail-panel .detail-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .access-console .access-detail-panel .detail-tabs button {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

@media (max-width: 1280px) {
  .suite-command-center .command-kpis,
  .access-console .access-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .suite-command-center .command-board,
  .suite-command-center .command-board.lower,
  .suite-command-center .command-board.bottom,
  .access-console .access-bottom-grid {
    grid-template-columns: 1fr !important;
  }
  .suite-command-center .api-traffic-card,
  .suite-command-center .command-topology-card,
  .suite-command-center .command-run-card {
    grid-column: auto !important;
  }
  .suite-command-center .command-donut-layout,
  .suite-command-center .donut-layout {
    grid-template-columns: minmax(120px, 150px) minmax(0, 1fr) !important;
    gap: 14px;
  }
  .suite-command-center .donut {
    width: 118px;
    height: 118px;
    box-shadow: inset 0 0 0 18px color-mix(in srgb, var(--panel-deep) 92%, transparent);
  }
  .suite-command-center .donut span { font-size: 24px; }
  .suite-command-center .donut small { top: 72px; }
  .access-console .access-header {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: start;
  }
  .access-console .access-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .access-console .catalog-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .access-console .catalog-filters .inline-search {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 980px) {
  .suite-command-center .command-kpis,
  .access-console .access-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .suite-command-center .traffic-stats,
  .suite-command-center .catalog-health-grid,
  .access-console .access-detail-grid,
  .access-console .access-bottom-grid {
    grid-template-columns: 1fr !important;
  }
  .suite-command-center .command-donut-layout,
  .suite-command-center .donut-layout,
  .access-console .role-distribution {
    grid-template-columns: 1fr !important;
    text-align: left;
  }
  .suite-command-center .donut,
  .access-console .donut {
    margin: 0;
  }
  .suite-command-center .topology-flow {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  .suite-command-center .topology-flow span { display: none; }
  .access-console .catalog-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .suite-command-center,
  .access-console {
    gap: 10px;
  }
  .suite-command-center .command-kpis,
  .access-console .access-kpi-grid,
  .access-console .catalog-filters {
    grid-template-columns: 1fr !important;
  }
  .suite-command-center .metric-card,
  .access-console .metric-card {
    min-height: 104px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .suite-command-center .panel,
  .access-console .panel {
    padding: 12px;
  }
  .suite-command-center .panel-head,
  .access-console .panel-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
  }
  .suite-command-center .panel-head .link-btn,
  .access-console .panel-head .link-btn {
    justify-self: start;
  }
  .suite-command-center .topology-flow {
    grid-template-columns: 1fr !important;
  }
  .activity-line,
  .incident-row,
  .mini-evidence-row,
  .privilege-row,
  .mini-api-row {
    padding: 9px 0;
  }
  .access-console .access-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  .access-console .access-actions button {
    width: 100%;
  }
  .access-console .access-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .access-console .access-tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .command-queue-table .enterprise-table,
  .permission-matrix .enterprise-table,
  .access-console .enterprise-table {
    min-width: 680px;
  }
}

/* v2.8.0 Approvals Console: production-grade responsive workbench */
.approval-console{display:flex;flex-direction:column;gap:14px;max-width:1720px;margin:0 auto;transition:padding-right .24s ease;min-width:0}.approval-console.drawer-open{padding-right:clamp(410px,34vw,560px)}.approval-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.approval-page-head h2{font-size:28px;line-height:1.05;margin:0 0 4px}.approval-page-head p{margin:0;color:var(--muted)}.approval-page-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.approval-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px}.approval-kpi{min-height:112px}.approval-table-panel{min-width:0}.approval-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.approval-tabs{display:flex;gap:7px;flex-wrap:wrap}.approval-tabs button{height:34px;border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 75%, transparent);color:var(--muted);border-radius: var(--radius-md);padding:0 13px;font-weight:800}.approval-tabs button.active{background:color-mix(in srgb, var(--blue) 42%, transparent);border-color:color-mix(in srgb, var(--blue) 62%, transparent);color:var(--text)}.approval-tabs span{margin-left:6px;padding:1px 6px;border-radius:999px;background:color-mix(in srgb, var(--muted) 18%, transparent);font-size:11px}.approval-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.approval-filterbar select{height:36px;border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 86%, transparent);color:var(--text);border-radius: var(--radius-md);padding:0 10px}.approval-table-wrap{max-height:520px;overflow:auto}.approval-table tr.selected{background:color-mix(in srgb, var(--blue) 22%, transparent)!important;box-shadow:inset 3px 0 0 var(--blue)}.approval-table td,.approval-table th{white-space:nowrap}.sla-chip{display:inline-flex;border-radius: var(--radius-md);background:color-mix(in srgb, var(--blue) 10%, transparent);border:1px solid color-mix(in srgb, var(--blue) 25%, transparent);padding:4px 8px;color:var(--blue);font-size:12px;font-weight:800}.sla-chip.overdue{color:var(--red);background:color-mix(in srgb, var(--red) 10%, transparent);border-color:color-mix(in srgb, var(--red) 32%, transparent)}.status-pill.pending,.status-pill.escalated{color:var(--blue);background:color-mix(in srgb, var(--blue) 12%, transparent);border-color:color-mix(in srgb, var(--blue) 36%, transparent)}.status-pill.changes_requested{color:var(--amber);background:color-mix(in srgb, var(--amber) 12%, transparent);border-color:color-mix(in srgb, var(--amber) 36%, transparent)}.status-pill.rejected{color:var(--red);background:color-mix(in srgb, var(--red) 12%, transparent);border-color:color-mix(in srgb, var(--red) 36%, transparent)}.approval-bottom-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}.decision-feed,.evidence-snippet-list,.audit-mini-timeline,.reviewer-bars{display:flex;flex-direction:column;gap:8px}.evidence-snippet-list>div{border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 66%, transparent);border-radius: var(--radius-lg);padding:10px}.evidence-snippet-list small,.evidence-snippet-list p{display:block;color:var(--muted);font-size:12px}.audit-mini-timeline>div{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:start;border-bottom:1px solid color-mix(in srgb, var(--muted) 12%, transparent);padding:7px 0}.audit-mini-timeline span{width:10px;height:10px;border-radius:999px;border:1px solid var(--blue);margin-top:4px}.audit-mini-timeline small{color:var(--muted);font-size:12px}.reviewer-bars>div{display:grid;grid-template-columns:120px minmax(80px,1fr) 30px;align-items:center;gap:8px}.reviewer-bars span{color:var(--muted);font-size:12px}.reviewer-bars i{height:6px;background:color-mix(in srgb, var(--muted) 18%, transparent);border-radius:999px;overflow:hidden}.reviewer-bars b{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--amber),var(--blue));border-radius:inherit}.approval-backdrop{display:none}.approval-drawer{position:fixed;z-index:80;top:64px;right:0;width:clamp(410px,34vw,560px);height:calc(100vh - 64px);transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);background:linear-gradient(180deg,color-mix(in srgb, var(--panel-deep) 98%, transparent),color-mix(in srgb, var(--panel-deep) 98%, transparent));border-left:1px solid color-mix(in srgb, var(--blue) 26%, transparent);box-shadow:-24px 0 60px color-mix(in srgb, var(--panel-deep) 36%, transparent);display:flex;flex-direction:column}.approval-drawer.open{transform:translateX(0)}.approval-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 18px 12px;border-bottom:1px solid var(--line)}.approval-drawer-head small{display:inline-block;margin-left:8px;color:var(--muted)}.approval-drawer-tabs{display:flex;gap:18px;padding:0 18px;border-bottom:1px solid var(--line)}.approval-drawer-tabs button{height:42px;background:transparent;border:0;color:var(--muted);font-weight:800}.approval-drawer-tabs button.active{color:var(--text);box-shadow:inset 0 -2px 0 var(--blue)}.approval-drawer-scroll{overflow:auto;padding:14px 18px 20px;display:flex;flex-direction:column;gap:12px}.approval-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.approval-detail-card{border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 58%, transparent);border-radius: var(--radius-lg);padding:12px;min-width:0}.approval-detail-card h4{margin:0 0 10px}.approval-detail-card .key-value{padding:8px;border-radius:10px}.approval-detail-card .key-value dt{font-size:10px}.approval-chain-mini{display:flex;flex-direction:column;gap:8px}.approval-chain-mini button{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;background:color-mix(in srgb, var(--panel-deep) 80%, transparent);border:1px solid var(--line);border-radius: var(--radius-md);padding:8px;color:var(--text);text-align:left}.approval-chain-mini button.active{border-color:color-mix(in srgb, var(--blue) 55%, transparent);background:color-mix(in srgb, var(--blue) 22%, transparent)}.approval-chain-mini span{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb, var(--blue) 18%, transparent);font-size:11px}.approval-chain-mini em{font-style:normal;color:var(--blue);font-size:11px}.approval-evidence-list{display:flex;flex-direction:column;gap:8px}.approval-evidence-list div{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;border-bottom:1px solid color-mix(in srgb, var(--muted) 12%, transparent);padding-bottom:8px}.approval-evidence-list small,.approval-evidence-list em{color:var(--muted);font-size:11px;font-style:normal}.approval-decision-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.approval-decision-actions .secondary-btn{grid-column:span 2}.approval-impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.approval-impact-grid div{border:1px solid var(--line);background:color-mix(in srgb, var(--panel-deep) 58%, transparent);border-radius: var(--radius-md);padding:10px}.approval-impact-grid span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.approval-impact-grid strong{display:block;font-size:18px;margin-top:4px}.approval-impact-grid small{color:var(--muted)}
@media (max-width:1450px){.approval-console.drawer-open{padding-right:0}.approval-kpi-grid{grid-template-columns:repeat(3,minmax(160px,1fr))}.approval-bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.approval-drawer{width:min(520px,45vw)}}
@media (max-width:1050px){.approval-page-head,.approval-toolbar{flex-direction:column;align-items:stretch}.approval-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.approval-drawer{top:0;width:min(92vw,560px);height:100vh}.approval-backdrop.open{display:block;position:fixed;z-index:75;inset:0;background:color-mix(in srgb, var(--panel-deep) 48%, transparent);backdrop-filter:blur(2px)}.approval-detail-grid{grid-template-columns:1fr}.approval-impact-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.approval-kpi-grid,.approval-bottom-grid{grid-template-columns:1fr}.approval-page-actions{justify-content:stretch}.approval-page-actions button{flex:1}.approval-filterbar{display:grid;grid-template-columns:1fr}.approval-filterbar .inline-search{min-width:0;width:100%}.approval-drawer{width:100vw}.approval-impact-grid{grid-template-columns:1fr}.approval-table-wrap{max-height:440px}.approval-decision-actions{grid-template-columns:1fr}.approval-decision-actions .secondary-btn{grid-column:auto}}

/* Final containment pass for E2E-verified responsive behavior. */
.enterprise-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.enterprise-table thead,
.enterprise-table tbody,
.enterprise-table tr {
  min-width: inherit;
}
.catalog-detail-panel,
.access-detail-panel,
.evidence-detail-panel,
.api-detail-panel,
.approval-detail-card,
.decision-card,
.key-value,
.kv-grid {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.catalog-detail-panel *,
.access-detail-panel *,
.evidence-detail-panel *,
.api-detail-panel *,
.approval-drawer * {
  min-width: 0;
}
.approval-drawer {
  display: none;
  max-width: 100vw;
  overflow-x: hidden;
}
.approval-drawer.open {
  display: flex;
}
.approval-drawer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.approval-drawer-head > div,
.approval-detail-card h4,
.approval-detail-card .key-value,
.catalog-detail h3,
.evidence-detail-head h3 {
  overflow-wrap: anywhere;
}
.workflow-builder-panel .canvas-scale {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .enterprise-table {
    width: 100%;
    min-width: 0;
  }
  .enterprise-table th,
  .enterprise-table td {
    white-space: nowrap;
  }
  .access-console .access-tabs,
  .catalog-console .catalog-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    overflow: visible;
  }
  .access-console .access-tabs button,
  .catalog-console .catalog-tabs button,
  .access-console .catalog-filters button,
  .access-console .catalog-filters select,
  .access-console .catalog-filters .inline-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .access-console .access-actions,
  .catalog-console .catalog-actions,
  .developer-evidence-console .developer-header > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  .access-console .access-actions button,
  .catalog-console .catalog-actions button,
  .developer-evidence-console .developer-header button,
  .access-detail-panel .detail-tabs button,
  .primary-btn,
  .secondary-btn,
  .purple-btn,
  .ghost-btn {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .access-detail-panel .detail-tabs,
  .catalog-detail-panel .detail-tabs,
  .evidence-detail-panel .detail-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    overflow: visible;
  }
}

/* v2.8.9 Patent primitive UI panels */
.patent-console-shell {
  display: grid;
  gap: 18px;
}
.patent-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
}
.patent-hero::after {
  content: "";
  position: absolute;
  inset: auto -120px -180px auto;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 22%, transparent), transparent 68%);
  pointer-events: none;
}
.patent-hero h2 { margin: 8px 0 8px; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.05em; }
.patent-hero p { margin: 0; color: var(--muted); max-width: 860px; line-height: 1.6; }
.patent-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; position: relative; z-index: 1; }
.patent-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.patent-kpi-card {
  text-align: left;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 82%, transparent), color-mix(in srgb, var(--panel-deep) 78%, transparent));
  border-radius: var(--radius-lg);
  padding: 16px;
  min-height: 112px;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
:root.light .patent-kpi-card { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 95%, transparent), color-mix(in srgb, var(--panel) 92%, transparent)); }
.patent-kpi-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--glow-blue); }
.patent-kpi-card span { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; }
.patent-kpi-card strong { display: block; margin-top: 10px; font-size: 32px; letter-spacing: -.05em; }
.patent-kpi-card small { display: block; margin-top: 6px; color: var(--muted); }
.patent-stage-grid,
.patent-bottom-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.patent-stage-card.span-12 { grid-column: span 12; }
.patent-stage-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.patent-stage {
  min-height: 170px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: color-mix(in srgb, var(--panel) 3.5%, transparent);
  cursor: pointer;
}
.patent-stage span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 34%, transparent);
  font-weight: 900;
}
.patent-stage strong { font-size: 15px; }
.patent-stage small { color: var(--muted); line-height: 1.45; }
.patent-stage em { margin-top: auto; color: var(--faint); font-style: normal; font-size: 12px; }
.patent-stage.success { border-color: color-mix(in srgb, var(--green) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--green) 9%, transparent), color-mix(in srgb, var(--panel) 3.5%, transparent)); }
.patent-stage.warning { border-color: color-mix(in srgb, var(--amber) 35%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 9%, transparent), color-mix(in srgb, var(--panel) 3.5%, transparent)); }
.patent-stage.danger { border-color: color-mix(in srgb, var(--red) 35%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--red) 9%, transparent), color-mix(in srgb, var(--panel) 3.5%, transparent)); }
.patent-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .8fr);
  gap: 14px;
  align-items: start;
}
.inline-select {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--panel-soft);
  border-radius: 999px;
  padding: 10px 12px;
  min-width: 230px;
}
.patent-collection-list {
  display: grid;
  gap: 10px;
  max-height: 620px;
  overflow: auto;
  padding-right: 3px;
}
.patent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 3.5%, transparent);
  padding: 13px 14px;
  cursor: pointer;
}
.patent-row:hover,
.patent-row.selected { border-color: var(--line-strong); background: color-mix(in srgb, var(--blue) 9%, transparent); }
.patent-row strong { display: block; overflow-wrap: anywhere; }
.patent-row small { display: block; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.primitive-json-block { margin-top: 14px; display: grid; gap: 8px; }
.primitive-json-block span { color: var(--faint); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 900; }
.primitive-json-block pre {
  max-height: 480px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-deep) 22%, transparent);
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.patent-bottom-grid > .panel { grid-column: span 3; min-height: 260px; }
@media (max-width: 1280px) {
  .patent-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .patent-stage-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .patent-bottom-grid > .panel { grid-column: span 6; }
}
@media (max-width: 920px) {
  .patent-hero { flex-direction: column; }
  .patent-kpi-grid,
  .patent-stage-map,
  .patent-workbench-grid { grid-template-columns: 1fr; }
  .patent-bottom-grid > .panel { grid-column: span 12; }
}

/* v2.9.4 OIDC and secure browser-session controls */
.oidc-connection { display:flex; align-items:flex-end; gap:8px; padding-right:10px; border-right:1px solid var(--line); }
.oidc-connection .mini-label { align-self:center; max-width:110px; }
.connection-strip [hidden] { display:none !important; }
@media (max-width: 980px) {
  .connection-strip { flex-wrap:wrap; justify-content:flex-start; }
  .oidc-connection { width:100%; border-right:0; border-bottom:1px solid var(--line); padding:0 0 10px; }
}


/* v2.10.0 Production Change Pilot */
.pilot-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px;margin-bottom:18px;background:linear-gradient(135deg,color-mix(in srgb, var(--blue) 12%, transparent),color-mix(in srgb, var(--cyan) 6%, transparent));border:1px solid color-mix(in srgb, var(--blue) 25%, transparent)}
.pilot-hero h2{margin:5px 0 10px;font-size:28px;max-width:760px}.pilot-hero p{max-width:850px;color:var(--muted);line-height:1.6}.pilot-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.pilot-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.pilot-kpis .metric-card{padding:18px}.pilot-kpis strong{display:block;font-size:30px;margin:8px 0}
.pilot-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:18px;margin-bottom:18px}.pilot-config-panel,.pilot-stage-panel{padding:22px}.pilot-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pilot-form-grid label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:12px}.pilot-form-grid .wide{grid-column:1/-1}.pilot-form-grid input,.pilot-form-grid select,.pilot-form-grid textarea{width:100%;box-sizing:border-box}.pilot-safety-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px;color:var(--muted);font-size:12px}.pilot-safety-list span{padding:9px 11px;border-radius: var(--radius-md);background:color-mix(in srgb, var(--green) 7%, transparent);border:1px solid color-mix(in srgb, var(--green) 16%, transparent)}
.pilot-stage-rail{display:grid;gap:8px;margin:14px 0 18px}.pilot-stage-step{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius: var(--radius-md);background:color-mix(in srgb, var(--panel) 1.5%, transparent)}.pilot-stage-step i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb, var(--muted) 15%, transparent);font-size:11px}.pilot-stage-step.done{border-color:color-mix(in srgb, var(--green) 35%, transparent)}.pilot-stage-step.done i{background:color-mix(in srgb, var(--green) 18%, transparent);color:var(--green)}.pilot-stage-step.current{border-color:color-mix(in srgb, var(--blue) 60%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--blue) 15%, transparent)}.pilot-stage-step small{color:var(--muted)}
.pilot-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.pilot-action-grid button:disabled{opacity:.42;cursor:not-allowed}.pilot-review-note{color:var(--muted);font-size:12px;line-height:1.5;margin-top:13px}.pilot-inventory-panel{margin-bottom:18px}.pilot-detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.pilot-detail-grid>.panel{padding:22px}.pilot-detail-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pilot-detail-kv div{padding:11px;border:1px solid var(--border);border-radius:9px}.pilot-detail-kv span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.pilot-detail-kv strong{word-break:break-word}.pilot-outcome-list{display:grid;gap:10px}.pilot-outcome{padding:12px;border:1px solid var(--border);border-radius:10px}.pilot-outcome strong{display:block;margin-bottom:5px}.pilot-outcome p{color:var(--muted);font-size:12px;line-height:1.5}.pilot-blockers{margin-top:12px;padding:12px;border-radius: var(--radius-md);background:color-mix(in srgb, var(--red) 8%, transparent);border:1px solid color-mix(in srgb, var(--red) 22%, transparent)}
@media (max-width:1100px){.pilot-layout,.pilot-detail-grid{grid-template-columns:1fr}.pilot-kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.pilot-hero{align-items:flex-start;flex-direction:column}.pilot-kpis,.pilot-form-grid,.pilot-safety-list,.pilot-action-grid,.pilot-detail-kv{grid-template-columns:1fr}.pilot-form-grid .wide{grid-column:auto}}

/* Command Palette Modal Overlay */
.command-palette-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: color-mix(in srgb, var(--panel-deep) 65%, transparent); backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10vh; animation: fadeIn .15s ease;
}
.command-palette-overlay[hidden] { display: none; }
.command-palette-dialog {
  width: 100%; max-width: 640px; border-radius: var(--radius-lg);
  background: var(--panel-solid); border: 1px solid var(--line-strong);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--panel-deep) 50%, transparent); overflow: hidden;
  display: flex; flex-direction: column;
}
.command-palette-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: var(--panel-soft);
}
.palette-search-icon { font-size: 18px; color: var(--muted); }
.command-palette-header input {
  flex: 1; border: 0; background: transparent; color: var(--text);
  font-size: 15px; outline: none; padding: 0; min-height: auto;
}
.command-palette-results {
  max-height: 380px; overflow-y: auto; padding: 8px; display: grid; gap: 4px;
}
.command-palette-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--radius-md); border: 1px solid transparent; background: transparent;
  color: var(--text); cursor: pointer; text-align: left; width: 100%; transition: all .12s ease;
}
.command-palette-item:hover, .command-palette-item.active {
  background: var(--blue-strong); color: var(--on-accent); border-color: transparent;
}
.command-palette-item:hover small, .command-palette-item.active small { color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
.command-palette-item span { font-size: 16px; font-weight: 700; width: 22px; text-align: center; }
.command-palette-item div { flex: 1; min-width: 0; }
.command-palette-item strong { display: block; font-size: 13px; font-weight: 600; }
.command-palette-item small { display: block; color: var(--muted); font-size: 11px; }
.command-palette-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px; background: var(--panel-soft); border-top: 1px solid var(--line);
  color: var(--faint); font-size: 11px;
}
.command-palette-footer strong { color: var(--muted); background: var(--line); padding: 2px 5px; border-radius: var(--radius-sm); font-size: 10px; }

/* Responsive Grid & Layout Protections */
.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.table-scroll-wrapper table {
  margin: 0;
  border: none;
  min-width: 600px;
}

/* Flex Container Safety & Break Word Guards */
.grid, .card, .panel, .view, .console-topbar {
  min-width: 0;
}
p, h1, h2, h3, h4, td, th, span, code, pre {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .enterprise-shell {
    grid-template-columns: 1fr;
  }
  .side-rail {
    position: relative;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
  }
  .console-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .global-search {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .top-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .title-group h1 {
    font-size: 20px;
  }
  .connection-strip {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   LIGHT THEME OVERRIDES (flat selectors — no CSS nesting, max browser compat)
   Targets atlassian-light, enterprise, clean themes.
   ========================================================================== */

/* --- Workflow Evidence --- */
[data-theme="atlassian-light"] .workflow-evidence-hero,
[data-theme="enterprise"] .workflow-evidence-hero,
[data-theme="clean"] .workflow-evidence-hero {
  background: linear-gradient(135deg, var(--panel-soft), var(--panel-deep)) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme="atlassian-light"] .workflow-evidence-canvas,
[data-theme="enterprise"] .workflow-evidence-canvas,
[data-theme="clean"] .workflow-evidence-canvas {
  background:
    radial-gradient(circle at 16px 16px, color-mix(in srgb, var(--panel-deep) 6%, transparent) 1px, transparent 1.5px) 0 0/24px 24px,
    var(--panel-soft) !important;
}
[data-theme="atlassian-light"] .evidence-step,
[data-theme="enterprise"] .evidence-step,
[data-theme="clean"] .evidence-step {
  background: var(--panel) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}
[data-theme="atlassian-light"] .evidence-step .step-number,
[data-theme="enterprise"] .evidence-step .step-number,
[data-theme="clean"] .evidence-step .step-number {
  background: color-mix(in srgb, var(--panel-deep) 6%, transparent) !important;
}

/* --- Step Hero / Step Next / Workflow Metric --- */
[data-theme="atlassian-light"] .step-hero,
[data-theme="enterprise"] .step-hero,
[data-theme="clean"] .step-hero {
  background: var(--panel-soft) !important;
}
[data-theme="atlassian-light"] .step-next,
[data-theme="enterprise"] .step-next,
[data-theme="clean"] .step-next {
  background: color-mix(in srgb, var(--blue) 5%, transparent) !important;
}
[data-theme="atlassian-light"] .workflow-metric-card,
[data-theme="enterprise"] .workflow-metric-card,
[data-theme="clean"] .workflow-metric-card {
  background: var(--panel-soft) !important;
}

/* --- Builder --- */
[data-theme="atlassian-light"] .builder-panel,
[data-theme="enterprise"] .builder-panel,
[data-theme="clean"] .builder-panel,
[data-theme="atlassian-light"] .builder-canvas-wrap,
[data-theme="enterprise"] .builder-canvas-wrap,
[data-theme="clean"] .builder-canvas-wrap,
[data-theme="atlassian-light"] .builder-sidebar,
[data-theme="enterprise"] .builder-sidebar,
[data-theme="clean"] .builder-sidebar,
[data-theme="atlassian-light"] .builder-detail-panel,
[data-theme="enterprise"] .builder-detail-panel,
[data-theme="clean"] .builder-detail-panel,
[data-theme="atlassian-light"] .builder-score,
[data-theme="enterprise"] .builder-score,
[data-theme="clean"] .builder-score,
[data-theme="atlassian-light"] .simulation-steps div,
[data-theme="enterprise"] .simulation-steps div,
[data-theme="clean"] .simulation-steps div,
[data-theme="atlassian-light"] .builder-step-hero,
[data-theme="enterprise"] .builder-step-hero,
[data-theme="clean"] .builder-step-hero {
  background: var(--panel-soft) !important;
}
[data-theme="atlassian-light"] .builder-node,
[data-theme="enterprise"] .builder-node,
[data-theme="clean"] .builder-node {
  background: var(--panel) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme="atlassian-light"] .builder-node.selected,
[data-theme="enterprise"] .builder-node.selected,
[data-theme="clean"] .builder-node.selected {
  background: var(--panel-soft) !important;
}
[data-theme="atlassian-light"] .builder-toolbar,
[data-theme="enterprise"] .builder-toolbar,
[data-theme="clean"] .builder-toolbar {
  background: var(--panel-deep) !important;
  border-color: var(--line) !important;
}
[data-theme="atlassian-light"] .builder-toolbar button,
[data-theme="enterprise"] .builder-toolbar button,
[data-theme="clean"] .builder-toolbar button {
  color: var(--muted) !important;
}
[data-theme="atlassian-light"] .builder-toolbar button:hover,
[data-theme="enterprise"] .builder-toolbar button:hover,
[data-theme="clean"] .builder-toolbar button:hover {
  background: color-mix(in srgb, var(--blue) 8%, transparent) !important;
  color: var(--text) !important;
}

/* --- Tutorial --- */
[data-theme="atlassian-light"] .tutorial-canvas,
[data-theme="enterprise"] .tutorial-canvas,
[data-theme="clean"] .tutorial-canvas {
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--panel-deep) 5%, transparent) 1px, transparent 1.4px),
    var(--panel-soft) !important;
}
[data-theme="atlassian-light"] .tutorial-case,
[data-theme="enterprise"] .tutorial-case,
[data-theme="clean"] .tutorial-case {
  background: var(--panel) !important;
}
[data-theme="atlassian-light"] .tutorial-case:hover,
[data-theme="enterprise"] .tutorial-case:hover,
[data-theme="clean"] .tutorial-case:hover,
[data-theme="atlassian-light"] .tutorial-case.selected,
[data-theme="enterprise"] .tutorial-case.selected,
[data-theme="clean"] .tutorial-case.selected {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent), var(--panel-soft)) !important;
  border-color: var(--blue) !important;
}
[data-theme="atlassian-light"] .tutorial-step-card header,
[data-theme="enterprise"] .tutorial-step-card header,
[data-theme="clean"] .tutorial-step-card header {
  background: var(--panel-soft) !important;
  border-color: var(--line) !important;
}
[data-theme="atlassian-light"] .tutorial-step-icon,
[data-theme="enterprise"] .tutorial-step-icon,
[data-theme="clean"] .tutorial-step-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 15%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent)) !important;
}
[data-theme="atlassian-light"] .tutorial-context-item,
[data-theme="enterprise"] .tutorial-context-item,
[data-theme="clean"] .tutorial-context-item,
[data-theme="atlassian-light"] .tutorial-score,
[data-theme="enterprise"] .tutorial-score,
[data-theme="clean"] .tutorial-score,
[data-theme="atlassian-light"] .tutorial-log-row,
[data-theme="enterprise"] .tutorial-log-row,
[data-theme="clean"] .tutorial-log-row,
[data-theme="atlassian-light"] .lesson-card,
[data-theme="enterprise"] .lesson-card,
[data-theme="clean"] .lesson-card {
  background: var(--panel-soft) !important;
  border-color: var(--line) !important;
}
[data-theme="atlassian-light"] .lesson-card.selected,
[data-theme="enterprise"] .lesson-card.selected,
[data-theme="clean"] .lesson-card.selected {
  background: color-mix(in srgb, var(--blue) 8%, transparent) !important;
}
[data-theme="atlassian-light"] .tutorial-node span,
[data-theme="enterprise"] .tutorial-node span,
[data-theme="clean"] .tutorial-node span {
  background: color-mix(in srgb, var(--blue) 15%, transparent) !important;
}

/* --- Pilot / Certification Hero --- */
[data-theme="atlassian-light"] .pilot-hero,
[data-theme="enterprise"] .pilot-hero,
[data-theme="clean"] .pilot-hero,
[data-theme="atlassian-light"] .certification-hero,
[data-theme="enterprise"] .certification-hero,
[data-theme="clean"] .certification-hero,
[data-theme="atlassian-light"] .cert-hero,
[data-theme="enterprise"] .cert-hero,
[data-theme="clean"] .cert-hero {
  background: linear-gradient(135deg, var(--panel-soft), var(--panel-deep)) !important;
  box-shadow: var(--shadow) !important;
}

/* --- Metric cards and panels --- */
[data-theme="atlassian-light"] .metric-card,
[data-theme="enterprise"] .metric-card,
[data-theme="clean"] .metric-card {
  background: var(--panel) !important;
}
[data-theme="atlassian-light"] .panel,
[data-theme="enterprise"] .panel,
[data-theme="clean"] .panel {
  background: var(--panel) !important;
}
[data-theme="atlassian-light"] .decision-card,
[data-theme="enterprise"] .decision-card,
[data-theme="clean"] .decision-card,
[data-theme="atlassian-light"] .review-card,
[data-theme="enterprise"] .review-card,
[data-theme="clean"] .review-card,
[data-theme="atlassian-light"] .audit-record,
[data-theme="enterprise"] .audit-record,
[data-theme="clean"] .audit-record,
[data-theme="atlassian-light"] .key-value,
[data-theme="enterprise"] .key-value,
[data-theme="clean"] .key-value,
[data-theme="atlassian-light"] .verification-card,
[data-theme="enterprise"] .verification-card,
[data-theme="clean"] .verification-card,
[data-theme="atlassian-light"] .role-card,
[data-theme="enterprise"] .role-card,
[data-theme="clean"] .role-card,
[data-theme="atlassian-light"] .attention-item,
[data-theme="enterprise"] .attention-item,
[data-theme="clean"] .attention-item {
  background: var(--panel-soft) !important;
}

/* --- Selectable rows --- */
[data-theme="atlassian-light"] .selected-row,
[data-theme="enterprise"] .selected-row,
[data-theme="clean"] .selected-row {
  background: color-mix(in srgb, var(--blue) 8%, transparent) !important;
}
[data-theme="atlassian-light"] .selectable-row.selected,
[data-theme="enterprise"] .selectable-row.selected,
[data-theme="clean"] .selectable-row.selected {
  box-shadow: inset 3px 0 0 var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, transparent) !important;
}

/* --- Patent KPI --- */
[data-theme="atlassian-light"] .patent-kpi-card,
[data-theme="enterprise"] .patent-kpi-card,
[data-theme="clean"] .patent-kpi-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-soft)) !important;
}

/* ==========================================================================
   THEME-SPECIFIC FINE-TUNING
   ========================================================================== */

/* Atlassian Light */
[data-theme="atlassian-light"] .brand-orb { background: linear-gradient(135deg, var(--blue), var(--blue)) !important; }
[data-theme="atlassian-light"] .nav-link.active { background: var(--blue) !important; }
[data-theme="atlassian-light"] .side-rail { background: var(--panel) !important; }
[data-theme="atlassian-light"] body { background: var(--panel) !important; }

/* Enterprise */
[data-theme="enterprise"] .brand-orb { background: linear-gradient(135deg, var(--blue), var(--blue)) !important; }
[data-theme="enterprise"] .nav-link.active { background: var(--blue) !important; }
[data-theme="enterprise"] .side-rail { background: var(--panel-deep) !important; }
[data-theme="enterprise"] .nav-link { color: var(--muted) !important; }
[data-theme="enterprise"] .nav-section-label { color: var(--green) !important; }
[data-theme="enterprise"] body { background: var(--text) !important; }
[data-theme="enterprise"] .enterprise-shell { background: var(--text) !important; }

/* Clean */
[data-theme="clean"] .brand-orb { background: linear-gradient(135deg, var(--green), var(--green)) !important; }
[data-theme="clean"] .nav-link.active { background: var(--green) !important; }
[data-theme="clean"] .side-rail { background: var(--panel) !important; border-right-color: var(--muted) !important; }
[data-theme="clean"] .nav-link { color: var(--muted) !important; }
[data-theme="clean"] .nav-section-label { color: var(--muted) !important; }
[data-theme="clean"] body { background: var(--panel) !important; }
[data-theme="clean"] .enterprise-shell { background: var(--panel) !important; }

/* Elegant (dark purple) */
[data-theme="elegant"] .workflow-evidence-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 30%, transparent), color-mix(in srgb, var(--panel-deep) 90%, transparent)) !important;
}
[data-theme="elegant"] .evidence-step { background: color-mix(in srgb, var(--panel-deep) 95%, transparent) !important; }
[data-theme="elegant"] .step-hero { background: color-mix(in srgb, var(--panel-deep) 60%, transparent) !important; }
[data-theme="elegant"] .tutorial-case { background: color-mix(in srgb, var(--panel-deep) 80%, transparent) !important; }
[data-theme="elegant"] .tutorial-case.selected { background: color-mix(in srgb, var(--violet) 20%, transparent) !important; border-color: var(--violet) !important; }
[data-theme="elegant"] .selected-row { background: color-mix(in srgb, var(--violet) 12%, transparent) !important; }
[data-theme="elegant"] .selectable-row.selected { box-shadow: inset 3px 0 0 var(--violet); background: color-mix(in srgb, var(--violet) 8%, transparent) !important; }
[data-theme="elegant"] .builder-score, [data-theme="elegant"] .simulation-steps div { background: color-mix(in srgb, var(--panel-deep) 50%, transparent) !important; }
[data-theme="elegant"] .brand-orb { background: linear-gradient(135deg, var(--violet), var(--violet)) !important; }
[data-theme="elegant"] .nav-link.active { background: var(--violet) !important; }
[data-theme="elegant"] body { background: var(--panel-deep) !important; }
[data-theme="elegant"] .enterprise-shell { background: var(--panel-deep) !important; }

/* ==========================================================================
   ADDITIONAL LIGHT THEME OVERRIDES — round 2
   Targets remaining hardcoded dark elements found via DOM audit.
   ========================================================================== */

/* Topbar — was color-mix(in srgb, var(--panel-deep) 82%, transparent), now uses var(--panel-solid) from main CSS */
/* Workspace switcher — was color-mix(in srgb, var(--panel-deep) 72%, transparent), fixed in main CSS above     */

/* Workflow Evidence Canvas — complex multi-gradient background */
[data-theme="atlassian-light"] .workflow-evidence-canvas,
[data-theme="enterprise"] .workflow-evidence-canvas,
[data-theme="clean"] .workflow-evidence-canvas {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--panel-deep) 8%, transparent) 0 0) 16.5% 34%/9% 2px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--panel-deep) 8%, transparent) 0 0) 39.5% 34%/9% 2px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--panel-deep) 8%, transparent) 0 0) 62.5% 34%/9% 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 8%, transparent) 0 0) 74.8% 50%/2px 18% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--panel-deep) 8%, transparent) 0 0) 63% 58%/13% 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--panel-deep) 8%, transparent) 0 0) 48% 66%/2px 16% no-repeat,
    radial-gradient(circle at 16px 16px, color-mix(in srgb, var(--panel-deep) 6%, transparent) 1px, transparent 1.5px) 0 0/22px 22px,
    var(--panel-soft) !important;
}

/* Evidence step inner gradient (workflow/certification views) */
[data-theme="atlassian-light"] .evidence-step,
[data-theme="enterprise"] .evidence-step,
[data-theme="clean"] .evidence-step {
  background: var(--panel) !important;
  color: var(--text) !important;
}

/* Canvas toolbar */
[data-theme="atlassian-light"] .canvas-toolbar.vertical,
[data-theme="enterprise"] .canvas-toolbar.vertical,
[data-theme="clean"] .canvas-toolbar.vertical {
  background: var(--panel-deep) !important;
}

/* Canvas zoom chip */
[data-theme="atlassian-light"] .canvas-zoom-chip,
[data-theme="enterprise"] .canvas-zoom-chip,
[data-theme="clean"] .canvas-zoom-chip {
  background: var(--panel-soft) !important;
}

/* Workflow activity dot */
[data-theme="atlassian-light"] .workflow-activity-item .activity-dot,
[data-theme="enterprise"] .workflow-activity-item .activity-dot,
[data-theme="clean"] .workflow-activity-item .activity-dot {
  background: var(--panel) !important;
}

/* Step hero (workflow evidence) — linear-gradient dark override */
[data-theme="atlassian-light"] .step-hero,
[data-theme="enterprise"] .step-hero,
[data-theme="clean"] .step-hero {
  background: var(--panel-soft) !important;
}

/* Policy version row */
[data-theme="atlassian-light"] .policy-version-row,
[data-theme="enterprise"] .policy-version-row,
[data-theme="clean"] .policy-version-row {
  background: var(--panel-soft) !important;
}

/* Policy zoom button */
[data-theme="atlassian-light"] .policy-zoom button,
[data-theme="enterprise"] .policy-zoom button,
[data-theme="clean"] .policy-zoom button {
  background: var(--panel-deep) !important;
  color: var(--text) !important;
}

/* Global search bar */
[data-theme="atlassian-light"] .global-search,
[data-theme="enterprise"] .global-search,
[data-theme="clean"] .global-search {
  background: var(--panel-soft) !important;
  border-color: var(--line) !important;
}

/* Console topbar backdrop for dark themes — restore dark glass effect */
[data-theme="atlassian-dark"] .console-topbar {
  background: color-mix(in srgb, var(--panel-deep) 82%, transparent) !important;
  backdrop-filter: blur(18px);
}
[data-theme="elegant"] .console-topbar {
  background: color-mix(in srgb, var(--panel-deep) 85%, transparent) !important;
  backdrop-filter: blur(18px);
}
[data-theme="elegant"] .workspace-switcher {
  background: color-mix(in srgb, var(--panel-deep) 80%, transparent) !important;
}
[data-theme="atlassian-dark"] .workspace-switcher {
  background: color-mix(in srgb, var(--panel-deep) 80%, transparent) !important;
}

/* ==========================================================================
   FINAL BROAD OVERRIDES FOR LIGHT THEMES
   Targets select elements, approval components, and all remaining
   dark mini-panels that cannot be individually addressed.
   ========================================================================== */

/* All select elements in light themes */
[data-theme="atlassian-light"] select,
[data-theme="enterprise"] select,
[data-theme="clean"] select {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Approval tabs, filter bars, drawers, detail cards, chain buttons */
[data-theme="atlassian-light"] .approval-tabs button,
[data-theme="enterprise"] .approval-tabs button,
[data-theme="clean"] .approval-tabs button {
  background: var(--panel-soft) !important;
  color: var(--text) !important;
}
[data-theme="atlassian-light"] .approval-tabs button.active,
[data-theme="enterprise"] .approval-tabs button.active,
[data-theme="clean"] .approval-tabs button.active {
  background: color-mix(in srgb, var(--blue) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--blue) 40%, transparent) !important;
  color: var(--blue) !important;
}
[data-theme="atlassian-light"] .approval-filterbar select,
[data-theme="enterprise"] .approval-filterbar select,
[data-theme="clean"] .approval-filterbar select,
[data-theme="atlassian-light"] .approval-drawer,
[data-theme="enterprise"] .approval-drawer,
[data-theme="clean"] .approval-drawer {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}
[data-theme="atlassian-light"] .approval-detail-card,
[data-theme="enterprise"] .approval-detail-card,
[data-theme="clean"] .approval-detail-card,
[data-theme="atlassian-light"] .approval-impact-grid div,
[data-theme="enterprise"] .approval-impact-grid div,
[data-theme="clean"] .approval-impact-grid div,
[data-theme="atlassian-light"] .evidence-snippet-list > div,
[data-theme="enterprise"] .evidence-snippet-list > div,
[data-theme="clean"] .evidence-snippet-list > div {
  background: var(--panel-soft) !important;
}
[data-theme="atlassian-light"] .approval-chain-mini button,
[data-theme="enterprise"] .approval-chain-mini button,
[data-theme="clean"] .approval-chain-mini button {
  background: var(--panel-soft) !important;
}
[data-theme="atlassian-light"] .approval-chain-mini button.active,
[data-theme="enterprise"] .approval-chain-mini button.active,
[data-theme="clean"] .approval-chain-mini button.active {
  background: color-mix(in srgb, var(--blue) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--blue) 40%, transparent) !important;
}

/* Builder canvas shell and nodes */
[data-theme="atlassian-light"] .builder-canvas-shell,
[data-theme="enterprise"] .builder-canvas-shell,
[data-theme="clean"] .builder-canvas-shell {
  background:
    radial-gradient(circle at 20px 20px, color-mix(in srgb, var(--blue) 8%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--panel-soft) !important;
}
[data-theme="atlassian-light"] .builder-node,
[data-theme="enterprise"] .builder-node,
[data-theme="clean"] .builder-node {
  background: var(--panel) !important;
}
[data-theme="atlassian-light"] .builder-canvas-tools button,
[data-theme="enterprise"] .builder-canvas-tools button,
[data-theme="clean"] .builder-canvas-tools button {
  background: var(--panel-soft) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Metric grid child divs (command center KPI cards inside unnamed divs) */
[data-theme="atlassian-light"] .metric-grid > div,
[data-theme="enterprise"] .metric-grid > div,
[data-theme="clean"] .metric-grid > div {
  background: var(--panel) !important;
}

/* Any remaining nameless dark panel divs inside .console */
[data-theme="atlassian-light"] .console > div > div[style*="rgba"],
[data-theme="enterprise"] .console > div > div[style*="rgba"],
[data-theme="clean"] .console > div > div[style*="rgba"] {
  background: var(--panel-soft) !important;
}

/* v2.11.9 visual-tour UX alignment pass
   Keep primary work surfaces readable at common 1440px laptop/desktop widths. */
body.connected .connection-strip {
  display: none;
}

.console-topbar {
  grid-template-columns: minmax(250px, 1fr) minmax(300px, 440px) auto;
  gap: 16px;
  align-items: center;
}
.title-group,
.global-search,
.top-actions {
  order: initial;
  grid-column: auto;
}
.title-group {
  padding: 0;
}
.title-group p {
  max-width: 46ch;
}
.top-actions {
  flex-wrap: nowrap;
}
.global-run-btn {
  min-height: 36px;
  padding-inline: 14px;
  white-space: nowrap;
}
body[data-view="approvals"] .global-run-btn,
body[data-view="workflows"] .global-run-btn,
body[data-view="tutorial"] .global-run-btn {
  display: none;
}

.panel-head {
  flex-wrap: wrap;
  row-gap: 10px;
}
.panel-head > *,
.approval-toolbar > *,
.catalog-header > *,
.access-header > *,
.developer-header > * {
  min-width: 0;
}
.catalog-filters,
.api-table-tools,
.approval-filterbar,
.approval-tabs,
.catalog-actions,
.access-actions {
  gap: 10px;
}
.catalog-filters select,
.api-table-tools select,
.approval-filterbar select,
.inline-search {
  min-height: 38px;
}

@media (max-width: 1680px) {
  .command-kpis {
    grid-template-columns: repeat(7, minmax(130px, 1fr));
  }
}

@media (max-width: 1600px) {
  .console-topbar .ak-breadcrumbs {
    display: none;
  }
  .top-actions #envSelect,
  .top-actions #helpBtn,
  .top-actions button[title="Documentation"] {
    display: none;
  }

  .catalog-layout,
  .access-layout,
  .evidence-layout,
  .workflow-management-shell,
  .ops-workbench-grid {
    grid-template-columns: 1fr !important;
  }
  .catalog-detail-panel,
  .access-detail-panel,
  .evidence-detail-panel,
  .workflow-right-rail {
    position: relative !important;
    top: auto !important;
    width: 100%;
    max-height: none !important;
  }
  .workflow-right-rail {
    min-height: 0;
  }
  .workflow-right-rail .workflow-activity-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .ops-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .approval-kpi-grid {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
  }
  .approval-kpi {
    min-height: 96px;
  }
  .approval-kpi .mini-chart {
    display: none;
  }
  .log-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: start;
  }
  .log-row strong {
    overflow-wrap: anywhere;
  }
  .log-row code {
    grid-column: 2 / -1;
  }
}

@media (max-width: 1360px) {
  .console-topbar {
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 10px 14px;
  }
  .title-group {
    grid-column: 1 / -1;
  }
  .global-search {
    grid-column: 1;
  }
  .top-actions {
    grid-column: 2;
  }
  .command-kpis,
  .approval-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ops-chart-grid,
  .ops-table-grid,
  .ops-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .console-topbar {
    grid-template-columns: 1fr;
  }
  .title-group,
  .global-search,
  .top-actions {
    grid-column: 1;
    width: 100%;
  }
  .top-actions {
    justify-self: stretch;
  }
  .ops-side,
  .workflow-right-rail .workflow-activity-list {
    grid-template-columns: 1fr;
  }
  .api-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .command-kpis,
  .approval-kpi-grid,
  .api-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* v2.11.9 enterprise spacing, alignment, and interaction contract
   Shared rules intentionally live last so feature-specific screens inherit one
   predictable rhythm without altering their visual language. */
.skip-link {
  position: fixed;
  z-index: 10000;
  top: var(--space-1);
  left: var(--space-1);
  transform: translateY(calc(-100% - var(--space-2)));
  min-height: var(--control-height);
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent-border-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
.skip-link:focus {
  transform: translateY(0);
}

.mobile-nav-toggle {
  display: none;
}

:where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none;
}

:where(button, .nav-link, .clickable-row) {
  -webkit-tap-highlight-color: transparent;
}

.console {
  padding: var(--space-3) var(--space-4) var(--space-5);
}

.view.active,
.suite-command-center,
.catalog-console,
.access-console,
.developer-evidence-console,
.policy-studio-shell,
.workflow-management-shell,
.patent-console-shell {
  min-width: 0;
}

.panel,
.metric-card {
  min-width: 0;
}

.panel {
  padding: var(--panel-padding);
}

.panel-head {
  min-height: var(--control-height);
  margin-bottom: var(--space-2);
  gap: var(--space-1) var(--space-2);
  align-items: flex-start;
}

.panel-head.compact {
  min-height: var(--control-height-sm);
  margin-bottom: var(--space-1);
}

.panel-head h3 {
  margin-top: var(--space-0-5);
  line-height: 1.25;
}

.dashboard-grid,
.command-grid,
.command-board,
.command-board.lower,
.command-board.bottom,
.catalog-layout,
.access-layout,
.evidence-layout,
.builder-grid,
.policy-studio-grid,
.pilot-layout,
.pilot-detail-grid,
.ops-workbench-grid {
  gap: var(--section-gap);
}

.catalog-header,
.access-header,
.developer-header,
.builder-studio-header,
.workflow-evidence-hero,
.policy-studio-hero,
.api-portfolio-hero,
.pilot-hero {
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.catalog-actions,
.access-actions,
.api-portfolio-actions,
.policy-studio-actions,
.builder-actions,
.workflow-action-bar,
.workbench-actions,
.catalog-filters,
.api-table-tools,
.approval-filterbar {
  gap: var(--space-1);
  align-items: center;
}

:where(
  .primary-btn, .secondary-btn, .ghost-btn, .purple-btn,
  .danger-btn, .success-btn, .env-select, .environment-btn,
  .catalog-tabs button, .access-tabs button, .detail-tabs button,
  .catalog-filters button, .approval-tabs button
) {
  min-height: var(--control-height);
  padding-inline: var(--space-1-5);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .inline-search, .inline-select) {
  min-height: var(--control-height);
  padding-inline: var(--space-1-5);
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--text);
}

textarea {
  padding-block: var(--space-1);
  line-height: 1.5;
  resize: vertical;
}

label,
.builder-field,
.policy-field,
.pilot-form-grid label {
  gap: var(--space-1);
}

.form-grid,
.pilot-form-grid,
.developer-filter-grid {
  gap: var(--space-2);
  align-items: start;
}

.table-wrap {
  border-radius: var(--radius-md);
}

.enterprise-table {
  font-variant-numeric: tabular-nums;
}

.enterprise-table th,
.enterprise-table td {
  height: var(--control-height-lg);
  padding: var(--space-1) var(--space-1-5);
  line-height: 1.4;
}

.enterprise-table th {
  vertical-align: middle;
}

.enterprise-table th:last-child,
.enterprise-table td:last-child {
  padding-right: var(--space-2);
}

.clickable-row {
  transition: background-color .16s ease, box-shadow .16s ease;
}

.clickable-row:hover {
  background: var(--surface-highlight);
}

.clickable-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  background: var(--surface-selected);
}

.empty-cell {
  height: 112px;
  border: 0;
  border-radius: 0;
}

.empty-state {
  min-height: 112px;
  padding: var(--space-3);
  display: grid;
  place-items: center;
  line-height: 1.5;
}

[aria-busy="true"] {
  cursor: progress;
}

@media (max-width: 1024px) {
  .side-rail {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-1) var(--space-1-5);
  }

  .mobile-nav-toggle {
    min-height: var(--control-height);
    padding: 0 var(--space-1-5);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-soft);
    color: var(--text);
    cursor: pointer;
  }

  .side-rail .nav-list {
    display: none !important;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  .side-rail.nav-open .nav-list {
    display: grid !important;
  }

  .side-rail .nav-link {
    width: 100%;
    min-height: var(--control-height);
    white-space: normal;
  }

  .console {
    padding: var(--space-2);
  }
}

@media (max-width: 760px) {
  :root, [data-theme] {
    --panel-padding: 16px;
    --section-gap: 16px;
  }

  .console {
    padding: var(--space-1-5);
  }

  .top-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .top-actions .theme-select {
    grid-column: 1;
    width: 100%;
  }

  .top-actions .global-run-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .panel-head {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .side-rail .nav-list {
    grid-template-columns: 1fr;
  }

  .panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-head > :not(:first-child) {
    justify-self: start;
  }
}

/* Data-backed charts. Decorative gradient placeholders are intentionally disabled. */
.large-chart,
.large-chart.violet,
.large-chart.green {
  background: none;
}
.large-chart::after {
  display: none;
}
.mini-chart:empty,
.sparkline:empty {
  display: none;
}
.chart-host {
  min-height: 180px;
}
.data-chart-wrap {
  width: 100%;
  min-height: 180px;
}
.data-chart {
  --chart-color: var(--blue);
  display: block;
  width: 100%;
  height: auto;
  min-height: 180px;
  overflow: visible;
}
.data-chart.blue,
.metric-spark.blue {
  --chart-color: var(--blue);
}
.data-chart.violet,
.metric-spark.violet {
  --chart-color: var(--violet);
}
.data-chart.green,
.metric-spark.green {
  --chart-color: var(--green);
}
.data-chart.red,
.metric-spark.red {
  --chart-color: var(--red);
}
.chart-grid-line {
  stroke: color-mix(in srgb, var(--muted) 18%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.chart-axis-line {
  stroke: color-mix(in srgb, var(--muted) 45%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.chart-axis-text {
  fill: var(--muted);
  font-size: 11px;
}
.chart-area {
  fill: color-mix(in srgb, var(--chart-color) 15%, transparent);
}
.chart-line {
  fill: none;
  stroke: var(--chart-color);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.chart-point {
  fill: var(--panel);
  stroke: var(--chart-color);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.chart-value-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.chart-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  padding: 20px;
}
.chart-note {
  color: var(--muted);
  font-size: 12px;
  margin-top: 10px;
}
.data-bars {
  --chart-color: var(--green);
  display: grid;
  gap: 14px;
  min-height: 150px;
  align-content: center;
}
.data-bars.violet {
  --chart-color: var(--violet);
}
.data-bars.blue {
  --chart-color: var(--blue);
}
.data-bars.red {
  --chart-color: var(--red);
}
.data-bar-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(100px, 2fr) auto;
  align-items: center;
  gap: 12px;
}
.data-bar-row span {
  color: var(--muted);
  font-size: 12px;
}
.data-bar-row i {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}
.data-bar-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--chart-color);
}
.data-bar-row strong {
  min-width: 38px;
  text-align: right;
}
.metric-spark {
  --chart-color: var(--blue);
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 8px;
}
.metric-spark polyline {
  fill: none;
  stroke: var(--chart-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 560px) {
  .data-bar-row {
    grid-template-columns: 1fr auto;
  }
  .data-bar-row i {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}