@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../lib/fonts/inter-vietnamese-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../lib/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../lib/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: light;

  /* C4 diagram palette: intentionally stable across light/dark themes. */
  --navy: #17324d;
  --blue: #1168bd;
  --teal: #0b7285;
  --green: #1f7a0d;
  --orange: #f27d00;
  --red: #c2182b;
  --gray: #444444;

  /* Local bridge token derived from generated chrome tokens. */
  --bg-subtle: var(--surface-2);

  /* Legacy aliases retained while the app migrates chrome CSS to semantic names. */
  --line: var(--border);
  --ink: var(--text);
  --muted: var(--text-muted);
  --paper: var(--bg);
  --white: var(--surface);
  /* E1-a design tokens (wireframe §11): layout + a11y */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --left-w: 300px;
  --left-w-min: 260px;
  --left-w-max: 360px;
  --right-w: 320px;
  --header-h: 48px;
  --header-h-2: 72px;
  --focus-ring: 2px solid var(--focus);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

button,
select,
input,
textarea,
.file-button {
  border: 1px solid var(--input-border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  font: inherit;
  min-height: 30px;
  padding: 5px 9px;
}

button,
.file-button {
  cursor: pointer;
}

button:hover,
.file-button:hover {
  border-color: var(--primary);
  background: var(--control-hover);
}

button:disabled {
  color: var(--disabled-text);
  cursor: not-allowed;
  background: var(--disabled-bg);
}

.app-header {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.app-header h1 {
  margin: 1px 0 0;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: 0;
}

.eyebrow {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.header-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.header-identity {
  flex: 0 1 auto;
}

.header-doc-state {
  flex: 0 1 auto;
}

.header-action-divider {
  width: 1px;
  height: 24px;
  flex: 0 0 1px;
  background: var(--border);
}

/* E1-a.2: header context+status bar (wireframe §4) */
.hdr-brand { flex: 0 0 auto; }
.hdr-breadcrumb { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.policy-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--primary-weak);
  color: var(--primary);
  white-space: nowrap;
}
.policy-badge.derived { background: #fdeccf; color: #9a6700; }
.policy-badge.locked { background: #fde7e9; color: var(--danger); }
.surface-switch {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: nowrap;
}

.theme-toggle {
  width: 30px;
  min-width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-weak);
}

.identity-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.sign-in-menu,
.identity-slot .account-chip {
  position: relative;
  border: 0;
  background: transparent;
}

.sign-in-menu[hidden],
.identity-slot .account-chip[hidden] {
  display: none !important;
}

.sign-in-menu summary,
.identity-slot .account-chip summary {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  list-style: none;
}

.sign-in-menu summary::-webkit-details-marker,
.identity-slot .account-chip summary::-webkit-details-marker {
  display: none;
}

.sign-in-menu summary {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
  font-weight: 800;
}

.sign-in-menu[open] summary,
.identity-slot .account-chip[open] summary,
.identity-slot .account-chip summary:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(58, 123, 253, 0.14);
}

.identity-slot .workspace-form,
.identity-slot .account-menu-body {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 248px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.identity-slot .workspace-form input {
  width: 100%;
  min-width: 0;
  font-size: 12px;
}

.identity-slot .workspace-form button,
.identity-slot .account-menu-body button {
  width: 100%;
}

.identity-slot .workspace-user {
  max-width: 150px;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-slot .account-avatar {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.identity-slot .account-more {
  margin-left: 0;
}
/* §4 responsive: 1366 — compact breadcrumb (Project ▸ View), Workspace/Source vào tooltip; ẩn eyebrow */
@media (max-width: 1366px) {
  .hdr-brand .eyebrow { display: none; }
  .bc-item[data-bc="workspace"], .bc-sep[data-bc="project"],
  .bc-item[data-bc="source"], .bc-sep[data-bc="source"] { display: none; }
}
/* §4 responsive: <1200 — header 2-row (72px); Row1 brand+breadcrumb, Row2 status cluster */
@media (max-width: 1199px) {
  .app-header { flex-wrap: wrap; height: var(--header-h-2, 72px); row-gap: 2px; align-content: center; }
  .hdr-breadcrumb { order: 1; }
  .header-actions { order: 2; flex-basis: 100%; justify-content: flex-end; }
  .identity-slot .workspace-user { max-width: 120px; }
}

/* E1-a.4: critical-visibility — validation issues surface globally (DAC §5) */
.val-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fde7e9;
  color: var(--danger);
  white-space: nowrap;
}
.critical-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  min-height: 36px;
  padding: 6px 14px;
  background: #fde7e9;
  border-bottom: 1px solid #f4b6bd;
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
}
.critical-banner-text { flex: 1 1 auto; min-width: 0; }
.critical-banner-text::before { content: "⚠ "; }
.critical-banner-btn {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border: 1px solid var(--danger);
  border-radius: 6px;
  background: var(--surface);
  color: var(--danger);
  cursor: pointer;
}
.critical-banner-btn:hover { background: var(--danger); color: #fff; }

.conflict-drawer {
  position: absolute;
  top: 132px;
  right: 16px;
  z-index: 12;
  width: min(360px, calc(100% - 32px));
  padding: 12px;
  background: var(--surface);
  border: 1px solid #f4b6bd;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: 12px;
}

.conflict-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.conflict-drawer-head strong { color: var(--danger); }
.conflict-drawer-head button { min-height: 26px; font-size: 12px; padding: 2px 8px; }
.conflict-drawer p { margin: 0; color: var(--text-muted); line-height: 1.45; }

/* E1-a.3: collapsible left sections (giảm density, U-1) */
[data-collapsible] > .eyebrow {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-collapsible] > .eyebrow::after { content: "▾"; font-size: 10px; color: var(--text-muted); }
[data-collapsible].is-collapsed > .eyebrow::after { content: "▸"; }
[data-collapsible].is-collapsed > *:not(.eyebrow) { display: none; }

#fileInput {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.app-shell {
  height: calc(100vh - var(--header-h, 48px));
  display: grid;
  /* §11 tokens: left min260/default300/max360, right 320 */
  grid-template-columns: clamp(var(--left-w-min, 260px), var(--left-w, 300px), var(--left-w-max, 360px)) minmax(0, 1fr) var(--right-w, 320px);
  gap: 0;
  transition: grid-template-columns 160ms ease;
}

.app-shell.is-left-collapsed {
  grid-template-columns: 44px minmax(0, 1fr) 320px;
}

.app-shell.is-right-collapsed {
  grid-template-columns: 330px minmax(0, 1fr) 0;
}

.app-shell.is-left-collapsed.is-right-collapsed {
  grid-template-columns: 44px minmax(0, 1fr) 0;
}

.app-shell.is-right-empty:not(.is-right-collapsed) {
  grid-template-columns: clamp(var(--left-w-min, 260px), var(--left-w, 300px), var(--left-w-max, 360px)) minmax(0, 1fr) 28px;
}

.app-shell.is-left-collapsed.is-right-empty:not(.is-right-collapsed) {
  grid-template-columns: 44px minmax(0, 1fr) 28px;
}

.side-panel {
  min-width: 0;
  overflow: auto;
  padding: 10px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}

.app-shell.is-left-collapsed .side-panel {
  overflow: hidden;
  padding: 6px;
}

.app-shell.is-left-collapsed .side-panel > * {
  display: none;
}

.right-panel {
  min-width: 0;
  overflow: auto;
  padding: 10px;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  display: grid;
  gap: 10px;
  align-content: start;
}

.app-shell.is-right-collapsed .right-panel {
  overflow: hidden;
  padding: 0;
  border-left: 0;
}

.app-shell.is-right-collapsed .right-panel > * {
  display: none;
}

.app-shell.is-right-empty:not(.is-right-collapsed) .right-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  border-left: 1px solid var(--border);
}

.app-shell.is-right-empty:not(.is-right-collapsed) .right-panel > * {
  display: none;
}

.app-shell.is-right-empty:not(.is-right-collapsed) .right-panel::before {
  content: "Inspect";
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* E1-a.1: a11y focus baseline (wireframe §12) — visible focus ring cho mọi control + tree */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.file-button:focus-visible,
.tree-node:focus-visible,
.rp-tab:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

/* E1-a.1: right inspector contextual — no-selection ẩn tabs + chỉ còn hint (wireframe §6, U-2) */
.right-panel.is-empty .rp-tabs {
  display: none;
}
.right-panel.is-empty [data-tabpanel="arrange"],
.right-panel.is-empty [data-tabpanel="code"] {
  display: none !important;
}
.right-panel.is-empty [data-tabpanel="text"] {
  display: grid;
}
.right-panel.is-empty .right-panel-head h2 {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 15px;
}

.right-panel-head {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.right-panel-head h2 {
  margin: 6px 0 4px;
  font-size: 17px;
  line-height: 1.2;
}

#lockNotice {
  display: block;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.rp-tabs {
  display: flex;
  gap: 4px;
}

.rp-tab {
  flex: 1 1 auto;
  min-height: 30px;
  font-weight: 700;
  font-size: 12px;
}

.rp-tab.is-active {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
}

.rp-tabpanel {
  display: grid;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.rp-field {
  display: grid;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rp-field input,
.rp-field textarea,
.rp-field select {
  width: 100%;
  min-width: 0;
  font: 12px/1.35 inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

.rp-field textarea {
  resize: vertical;
}

.rp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rp-row button {
  flex: 1 1 auto;
  font-size: 12px;
}

.rp-relstyle,
.rp-relanchors,
.rp-apicontract,
.rp-elementstyle {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.rp-style-row,
.rp-anchor-row,
.rp-color-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.rp-style-row > span,
.rp-anchor-row > span,
.rp-color-row > span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.rp-segment {
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.rp-segment button {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 6px 5px;
  background: transparent;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.rp-segment button + button {
  border-left: 1px solid var(--border);
}

.rp-segment button.is-active {
  background: var(--primary);
  color: var(--primary-fg);
}

.rp-port-picker {
  display: grid;
  grid-template-columns: repeat(5, 22px);
  grid-template-rows: repeat(5, 22px);
  gap: 3px;
  align-items: center;
  justify-content: start;
}

.rp-port-cell {
  display: grid;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.rp-port-cell.is-auto {
  font-size: 10px;
}

.rp-port-cell.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-fg);
}

.rp-port-cell.is-empty {
  visibility: hidden;
}

.rp-port-cell:disabled:not(.is-empty) {
  opacity: 0.55;
  cursor: not-allowed;
}

.rp-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rp-color-swatch {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid var(--input-border);
  background: var(--swatch, var(--surface));
  box-shadow: inset 0 0 0 3px var(--surface);
}

.rp-color-swatch.is-auto {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--surface) 0 45%, var(--border) 45% 55%, var(--surface) 55% 100%);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  box-shadow: none;
}

.rp-color-swatch.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-weak), inset 0 0 0 3px var(--surface);
}

.rp-color-swatch:disabled {
  opacity: 0.55;
}

#codeArea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  font: 12px/1.4 "Aptos Mono", Consolas, monospace;
}

.context-menu {
  position: fixed;
  z-index: 50;
  min-width: 188px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 13px;
}

.context-menu .ctx-item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 5px;
  padding: 7px 9px;
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

.context-menu .ctx-item:hover {
  background: var(--primary-weak);
}

.context-menu .ctx-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.context-menu .ctx-item.is-danger {
  color: var(--danger);
}

.context-menu .ctx-item:disabled {
  color: #aeb6c2;
  background: transparent;
  cursor: default;
}

.context-menu .ctx-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--border);
}

.drop-zone,
.status-box,
.details-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
}

.drop-zone {
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 6px;
  text-align: center;
  border-style: dashed;
}

.drop-zone.is-dragover {
  border-color: var(--primary);
  background: var(--primary-weak);
}

.drop-zone span,
.panel-meta,
.panel-desc {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.workspace-box {
  display: grid;
  gap: 8px;
}

.workspace-box input,
.workspace-box select,
.workspace-box textarea {
  width: 100%;
  min-width: 0;
  font-size: 12px;
}

.workspace-box textarea {
  min-height: 96px;
  resize: vertical;
  font: 12px/1.35 "Aptos Mono", Consolas, monospace;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.field-row > input,
.field-row > select {
  flex: 1 1 auto;
}

.field-row.split {
  justify-content: space-between;
}

.workspace-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.workspace-tools input {
  flex: 1 1 auto;
  min-width: 0;
}

.icon-button {
  width: 30px;
  min-width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.primary-button {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
  font-weight: 700;
}

.primary-button:hover {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
  filter: brightness(0.94);
}

.workspace-form,
.workspace-controls {
  display: grid;
  gap: 7px;
}

.workspace-controls.is-empty-workspace [data-project-required] {
  display: none !important;
}

.workspace-status,
.workspace-meta,
.workspace-user {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.workspace-empty-state {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  background: var(--primary-weak);
}

.workspace-empty-state[hidden] {
  display: none !important;
}

.workspace-empty-state strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.workspace-empty-state span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.workspace-empty-state button {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
  font-weight: 700;
}

.workspace-empty-state button:hover {
  border-color: var(--primary);
  background: var(--primary);
  filter: brightness(0.92);
}

.workspace-empty-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.project-list-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.project-action-menu {
  position: relative;
  min-width: 0;
}

.project-action-menu summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
}

.project-action-menu summary::-webkit-details-marker {
  display: none;
}

.project-action-menu[open] {
  z-index: 26;
}

.project-action-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(276px, calc(100vw - 32px));
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.project-list-import {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.account-chip {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.account-chip summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  cursor: pointer;
  list-style: none;
}

.account-chip summary::-webkit-details-marker {
  display: none;
}

.account-avatar {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--primary-fg);
  background: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.account-more {
  margin-left: auto;
  color: var(--text-muted);
  font-weight: 800;
  letter-spacing: 0;
}

.account-menu-body {
  display: grid;
  gap: 6px;
  padding: 0 8px 8px;
}

.source-action-group {
  position: relative;
  display: grid;
  gap: 5px;
}

.source-action-group::before {
  content: "Source actions";
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.source-action-group .field-row {
  align-items: center;
  position: relative;
}

.source-action-group #saveSourceBtn {
  flex: 1 1 auto;
  min-height: 34px;
}

.source-action-group #saveSourceBtn::before {
  content: "▣";
  margin-right: 6px;
  font-size: 12px;
}

.source-menu {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 0;
  position: relative;
}

.source-menu summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  list-style: none;
}

.source-menu summary::-webkit-details-marker {
  display: none;
}

.source-menu[open] {
  z-index: 24;
}

.source-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: min(270px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.source-menu-popover button {
  width: 100%;
}

.source-path-field {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.source-path-field input {
  width: 100%;
  min-width: 0;
  text-transform: none;
  font-weight: 400;
}

.workspace-error {
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.workspace-status.ok {
  color: var(--ok);
  font-weight: 700;
}

.workspace-status.warn {
  color: #9a6700;
  font-weight: 700;
}

.workspace-status.error {
  color: var(--danger);
  font-weight: 700;
}

.danger-button {
  color: var(--danger);
}

.workspace-tree {
  max-height: 290px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.tree-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 7px;
  border-bottom: 1px solid var(--border);
}

.tree-tools button {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 12px;
}

.tree-node {
  width: 100%;
  min-height: 28px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: 4px 7px 4px calc(7px + var(--tree-depth, 0) * 14px);
  background: transparent;
  text-align: left;
  font-size: 12px;
}

.tree-node:hover {
  background: var(--primary-weak);
}

.tree-node.is-active {
  color: var(--primary-fg);
  background: var(--primary);
}

.tree-badge {
  flex: 0 0 auto;
  min-width: 34px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 4px;
  color: var(--text-muted);
  background: var(--surface);
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}

.tree-node.is-active .tree-badge {
  color: var(--primary);
}

.tree-node-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  background: var(--surface);
}

.tree-node-icon-project {
  color: var(--primary-fg);
  background: var(--primary);
  border-color: var(--primary);
}

.tree-node-icon-c4,
.tree-node-icon-api,
.tree-node-icon-data,
.tree-node-icon-bdd {
  background: color-mix(in srgb, var(--surface) 88%, var(--primary-weak));
}

.tree-node-icon-c4 {
  color: var(--green);
}

.tree-node-icon-api {
  color: #6b3fd7;
}

.tree-node-icon-data {
  color: #9a5b00;
}

.tree-node-icon-bdd {
  color: #1d6f57;
}

.tree-icon {
  width: 17px;
  height: 17px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tree-node.is-active .tree-node-icon {
  color: var(--primary);
  background: var(--primary-fg);
  border-color: var(--primary-fg);
}

.tree-caret {
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

.tree-caret:hover {
  background: rgba(37, 99, 235, 0.16);
}

.tree-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-action {
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  min-height: 22px;
  padding: 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.tree-action.is-icon-only,
.tree-more.is-icon-only,
.tree-quick-action.is-icon-only,
.tree-tool-primary.is-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tree-action .tree-icon,
.tree-more .tree-icon,
.tree-quick-action .tree-icon,
.tree-tool-primary .tree-icon {
  width: 15px;
  height: 15px;
}

.tree-action:disabled {
  opacity: 0.35;
}

.tree-more,
.tree-quick-action {
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  min-height: 22px;
  padding: 0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.tree-more:focus-visible,
.tree-quick-action:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.tree-node.is-dragging {
  opacity: 0.48;
}

.tree-node.is-drop-target {
  background: var(--primary-weak);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.tree-node.is-drop-before::before,
.tree-node.is-drop-after::after {
  content: "";
  position: absolute;
  left: calc(7px + var(--tree-depth, 0) * 14px);
  right: 7px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}

.tree-node.is-drop-before::before {
  top: -2px;
}

.tree-node.is-drop-after::after {
  bottom: -2px;
}

.tree-label-action {
  flex: 1 1 auto;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.tree-label-action:hover {
  border: 0;
  background: transparent;
  color: inherit;
}

.tree-folder {
  color: #475467;
  font-weight: 700;
}

.tree-view-group {
  color: var(--text-muted);
  font-weight: 700;
}

.tree-empty {
  padding: 9px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.validation-status {
  margin: 8px 0;
  font-weight: 700;
}

.validation-status.ok {
  color: var(--ok);
}

.validation-status.error {
  color: var(--danger);
}

.validation-list {
  margin: 0;
  padding-left: 18px;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.4;
}

.validation-data-quality {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.validation-data-quality-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.validation-data-quality-head > div {
  min-width: 0;
}

.validation-data-quality-head strong,
.validation-data-quality-head small {
  display: block;
}

.validation-data-quality-head small {
  margin-top: 2px;
  color: var(--text-muted);
  line-height: 1.3;
}

.validation-data-quality-count {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.validation-data-quality-count.is-warning {
  background: #ffe9b5;
  color: #7b4500;
}

.validation-data-quality-count.is-clean {
  background: #d9f7e9;
  color: #066548;
}

.validation-data-quality-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.validation-data-quality-item {
  padding: 10px;
  border: 1px solid #efc36c;
  border-left: 4px solid #d68a00;
  border-radius: 7px;
  background: #fff8e7;
  color: #34445c;
}

.validation-data-quality-item header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.validation-data-quality-item header strong {
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.validation-data-quality-item header span {
  flex: 0 0 auto;
  margin-left: auto;
  color: #8a5200;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.validation-data-quality-item dl {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 4px 7px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.validation-data-quality-item dt {
  color: var(--text-muted);
  font-weight: 800;
}

.validation-data-quality-item dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.validation-data-quality-item footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 9px;
}

.validation-data-quality-open {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid #9cb7e8;
  border-radius: 7px;
  background: var(--surface);
  color: var(--primary);
  font-weight: 800;
}

.validation-data-quality-empty,
.validation-data-quality-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}

.validation-data-quality-empty {
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-muted);
}

.validation-data-quality-empty.is-clean {
  border-color: #a7e4cb;
  background: #f4fcf8;
  color: #286d57;
}

.validation-data-quality-note {
  color: #6a5022;
}

.export-log {
  min-height: 72px;
  margin: 8px 0 0;
  white-space: pre-wrap;
  color: var(--text);
  font: 12px/1.45 "Aptos Mono", Consolas, monospace;
}

.details-box h2 {
  margin: 8px 0 4px;
  font-size: 18px;
  line-height: 1.2;
}

.relations h3 {
  margin: 12px 0 6px;
  font-size: 13px;
}

.relations ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text);
}

.diagram-shell {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--bg);
  overflow: hidden;
}

.canvas-toolbar {
  min-height: 66px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 14px;
  padding: 8px 16px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.toolbar-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: max-content;
  position: relative;
  padding-bottom: 18px;
}

.toolbar-group::after {
  content: attr(aria-label);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  text-align: center;
}

.toolbar-divider {
  align-self: stretch;
  width: 1px;
  min-height: 46px;
  background: var(--border);
}

.toolbar-panels .panel-toggle[aria-pressed="true"] {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
}

.toolbar-save .save-source-btn {
  min-height: 32px;
  min-width: 76px;
  padding: 0 14px;
  font-weight: 800;
}

.toolbar-save .save-source-btn.is-dirty {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
}

.toolbar-save .save-source-btn.is-clean {
  color: var(--text-muted);
}

.toolbar-save .save-source-btn.is-conflict {
  color: var(--danger);
  border-color: #f4b6bd;
  background: #fde7e9;
}

.toolbar-readability {
  max-width: 330px;
}

.toolbar-readability .icon-button {
  min-width: 42px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.toolbar-readability .icon-button[aria-pressed="true"],
.toolbar-readability .icon-button.is-active {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
}

.diagram-ux-status {
  align-self: center;
  max-width: 128px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.breadcrumb button {
  min-height: 26px;
  padding: 3px 7px;
  font-size: 12px;
}

/* §4 breadcrumb 4-level: Workspace ▸ Project ▸ Source ▸ View */
.bc-item {
  font-size: 12px; color: var(--text-muted); background: none; border: 0; padding: 2px 4px;
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
button.bc-item { cursor: pointer; border-radius: 4px; }
button.bc-item:hover { color: var(--primary); background: var(--primary-weak); }
.bc-item.is-current { color: var(--text); font-weight: 700; }
.bc-sep { color: var(--border); font-size: 11px; flex: 0 0 auto; }

/* §4/§11 sync indicator — sync=teal (Synced) · drift=amber · conflict=red */
.sync-badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  background: #e3f2f4; color: var(--teal, #0b7285); border: 1px solid #c5e6ea;
}
.sync-badge::before { content: "⟳ "; }
.sync-badge.drift { background: #fdeccf; color: #9a6700; border-color: #f0dca0; }
.sync-badge.conflict { background: #fde7e9; color: var(--danger); border-color: #f4b6bd; }

/* Project bundle/source import panels */
.intake-trigger { width: 100%; font-weight: 600; }
.intake-modal { max-width: 440px; width: 92vw; max-height: 86vh; overflow: auto; text-align: left; }
.intake-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3, 12px); }
.intake-modal-head h2 { margin: 0; font-size: 16px; }
.intake-modal .source-intake { border: 0; padding: 0; }
.intake-modal .source-intake > .eyebrow { display: none; }
.modal-x { background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.modal-x:hover { color: var(--text); }
.project-menu {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--surface);
}
.project-menu summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.project-menu button {
  width: 100%;
  margin-top: 8px;
}
.export-log-section { display: none; }
.export-log-section.has-exports { display: block; }

/* G6 §5: Sticky Status — Validation N critical + Sync, luôn hiện ở đáy left nav */
.sticky-status {
  position: sticky; bottom: 0; margin-top: auto;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 8px 10px; background: var(--surface); border-top: 1px solid var(--border); z-index: 3;
}
.sticky-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.sticky-chip.ok { background: #e7f7ee; color: #156a3b; }
.sticky-chip.bad { background: #fde7e9; color: var(--danger); }
.sticky-chip.synced { background: #e3f2f4; color: var(--teal, #0b7285); }
.sticky-chip.drift { background: #fdeccf; color: #9a6700; }
.sticky-chip.conflict { background: #fde7e9; color: var(--danger); }
body.is-viewer .sticky-status, body.is-reviewing .sticky-status { display: none; }

.mode-toggle,
.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-audience {
  gap: 0;
}

.toolbar-audience .mode-button {
  border-radius: 0;
  min-width: 86px;
  font-weight: 700;
}

.toolbar-audience .mode-button:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.toolbar-audience .mode-button:last-child {
  margin-left: -1px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.mode-button.is-active {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
}

.toolbar {
  flex-wrap: wrap;
  gap: 5px;
  min-height: 40px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

body.is-empty-workspace .diagram-shell .canvas-toolbar,
body.is-empty-workspace .diagram-shell .topbar,
body.is-empty-workspace .diagram-shell .toolbar {
  display: none;
}

body.is-empty-workspace .diagram-shell {
  grid-template-rows: minmax(0, 1fr);
}

body.is-empty-workspace .diagram,
body.is-empty-workspace .caption {
  display: none;
}

.diagram-empty-state {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #ffffff;
}

.diagram-empty-state[hidden] {
  display: none !important;
}

.diagram-empty-state > div {
  width: min(420px, 100%);
  display: grid;
  gap: 10px;
  justify-items: start;
}

.diagram-empty-state strong {
  color: #152033;
  font-size: 20px;
  line-height: 1.2;
}

.diagram-empty-state span {
  color: #667085;
  font-size: 14px;
  line-height: 1.45;
}

.diagram-empty-state button {
  min-height: 36px;
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
  font-weight: 700;
}

.diagram-empty-state button:hover {
  border-color: var(--primary);
  background: var(--primary);
  filter: brightness(0.92);
}

.project-overview-card {
  position: absolute;
  inset: 86px 0 0;
  z-index: 3;
  display: grid;
  place-items: start center;
  padding: 28px;
  background: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --text: #152033;
  --text-muted: #667085;
  --border: #d8dee8;
}

.project-overview-card[hidden] {
  display: none !important;
}

.project-overview-panel {
  width: min(900px, calc(100% - 24px));
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.project-overview-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.project-overview-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--primary-fg);
  background: var(--primary);
  font-size: 22px;
  font-weight: 800;
}

.project-overview-head h2 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.2;
}

.project-overview-slug {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.project-shared-badge {
  align-self: start;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--ok);
  background: #e7f7ee;
  font-size: 11px;
  font-weight: 800;
}

.project-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.project-metrics span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  background: var(--surface-2);
  font-size: 12px;
}

.project-metrics strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.project-meta-editor {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) minmax(130px, 170px) auto;
  align-items: end;
  gap: 8px;
}

.project-meta-editor label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-meta-editor input,
.project-meta-editor select {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: var(--surface);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.project-meta-editor button {
  min-width: 120px;
  font-size: 12px;
  font-weight: 700;
}

.project-share-control {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.project-share-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-share-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.project-share-control input {
  width: 100%;
  color: var(--text);
  background: var(--surface);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.project-share-control #shareProjectBtn {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
  font-weight: 700;
  min-width: 54px;
}

.project-hub-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.project-hub-actions button {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}

.project-hub-actions #shareProjectBtn {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
}

.project-hub-panel {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.project-hub-panel[hidden] {
  display: none !important;
}

.project-versions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.catalog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-actions select {
  min-height: 32px;
}

.catalog-table .catalog-source {
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 11px;
}

.catalog-table .catalog-inferred {
  color: var(--warning, #a96f00);
  font-weight: 700;
}

.project-versions-list {
  display: grid;
  gap: 7px;
}

.traceability-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.traceability-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.api-coverage-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

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

.api-coverage-head strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-weight: 800;
}

.api-coverage-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.api-coverage-metrics span {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
}

.api-coverage-metrics strong {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.api-coverage-narrative {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}

.api-coverage-boundary {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.api-coverage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.api-drift-badge {
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 1px solid rgba(199, 43, 43, 0.35);
  color: var(--danger);
  background: #fff5f5;
  font-size: 12px;
  font-weight: 800;
}

.traceability-metric,
.traceability-orphans {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.traceability-metric.ok,
.traceability-orphans.ok {
  color: var(--success, #1d804d);
  border-color: rgba(29, 128, 77, 0.35);
}

.traceability-metric.warn,
.traceability-orphans.warn {
  color: var(--warning, #a96f00);
  border-color: rgba(169, 111, 0, 0.35);
}

.traceability-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.traceability-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 12px;
}

.traceability-table th,
.traceability-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  vertical-align: top;
}

.traceability-table th {
  color: var(--text-muted);
  background: var(--surface-2);
  font-size: 11px;
  text-transform: uppercase;
}

.traceability-row {
  cursor: pointer;
}

.traceability-row:hover,
.traceability-row:focus {
  outline: none;
  background: rgba(58, 123, 253, 0.08);
}

.traceability-row.is-selected {
  background: rgba(58, 123, 253, 0.14);
  box-shadow: inset 3px 0 0 var(--primary, #2f6fed);
}

.traceability-row.is-drift {
  background: #fff5f5;
}

.traceability-row.is-selected.is-drift {
  background: #fee8e8;
}

.traceability-row.policy-waived {
  background: #f3f8f5;
}

.traceability-row.is-selected.policy-waived {
  background: #e8f3ed;
}

.traceability-selection-detail {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 12px;
}

.traceability-selection-detail strong {
  color: var(--text, #071228);
  font-size: 14px;
}

.traceability-selection-detail p {
  color: var(--muted, #5d6b82);
  margin: 0;
}

.traceability-selection-grid {
  display: grid;
  gap: 6px 12px;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
}

.traceability-selection-grid dt {
  color: var(--text-muted, #64748b);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.traceability-selection-grid dd {
  color: var(--text, #071228);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin: 0;
  overflow-wrap: anywhere;
}

.traceability-selection-hint {
  font-size: 12px;
}

.trace-human-label {
  color: var(--text);
  font-weight: 700;
}

.trace-raw-anchor {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.trace-status {
  font-weight: 800;
}

.trace-status.ok {
  color: var(--success, #1d804d);
}

.trace-status.bad {
  color: var(--danger);
}

.trace-policy {
  font-weight: 800;
}

.trace-policy small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-weight: 600;
}

.trace-policy-block {
  color: var(--danger);
}

.trace-policy-warn {
  color: var(--warning, #a96f00);
}

.trace-policy-waived {
  color: var(--success, #1d804d);
}

.trace-waive-btn {
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.trace-waive-btn:hover,
.trace-waive-btn:focus {
  border-color: var(--primary);
  color: var(--primary);
}

.trace-waiver-form {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.trace-waiver-form input {
  width: 100%;
  min-height: 28px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.trace-waiver-form button {
  min-height: 30px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 800;
}

.rp-api-application {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(58, 123, 253, 0.28);
  border-radius: var(--radius);
  background: rgba(58, 123, 253, 0.06);
}

.api-app-bound {
  display: grid;
  gap: 5px;
}

.api-app-bound-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}

.api-app-bound-row span {
  color: var(--text-muted);
  font-weight: 700;
}

.api-app-bound-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.api-app-block {
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: 12px;
}

.api-app-block ul,
.api-app-block ol {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
}

.api-app-drift {
  padding: 8px;
  border: 1px solid rgba(199, 43, 43, 0.35);
  border-radius: var(--radius);
  background: #fff5f5;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
}

.api-app-actions {
  flex-wrap: wrap;
}

.api-app-actions button:disabled {
  color: var(--text-muted);
  background: var(--surface-2);
  cursor: not-allowed;
}

.project-version-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.project-version-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-version-meta strong,
.project-version-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-version-meta span {
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 980px) {
  .project-hub-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-meta-editor {
    grid-template-columns: 1fr;
  }
}

.overview-delete-project {
  min-width: 110px;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: var(--surface);
  font-weight: 700;
}

body.is-project-overview .diagram,
body.is-project-overview .caption {
  display: none;
}

.toolbar select {
  min-height: 30px;
}

.diagram {
  width: 100%;
  height: 100%;
  min-height: 560px;
  background: #ffffff;
  cursor: grab;
  touch-action: none;
}

.diagram-ux-advisory {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 50px;
  z-index: 3;
  max-width: 760px;
  padding: 8px 12px;
  border: 1px solid #f0dca0;
  border-radius: 8px;
  background: #fff8e6;
  color: #7a4b00;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.diagram-ux-advisory[data-level="warn"] {
  border-color: #f4b6bd;
  background: #fde7e9;
  color: var(--danger);
}

.diagram-ux-advisory[data-level="notice"] {
  border-color: #f0dca0;
  background: #fff8e6;
  color: #7a4b00;
}

.diagram.is-dragging {
  cursor: grabbing;
}

.caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gray);
  font-size: 15px;
  pointer-events: none;
}

.caption strong {
  color: var(--gray);
  font-size: 18px;
  font-weight: 500;
}

.boundary {
  fill: rgba(255, 255, 255, 0.02);
  stroke: var(--blue);
  stroke-width: 3.5;
  stroke-dasharray: none;
}

.boundary-internal {
  fill: rgba(255, 255, 255, 0.02);
  stroke: var(--blue);
}

.boundary-external {
  fill: rgba(255, 255, 255, 0.02);
  stroke: var(--orange);
}

.boundary-label {
  fill: var(--blue);
  font-size: 20px;
  font-weight: 700;
}

.boundary-external + .boundary-label {
  fill: var(--orange);
}

.element {
  --element-stroke: var(--blue);
  --element-text: var(--blue);
  --element-fill: #ffffff;
  cursor: default;
}

.element.is-moving {
  opacity: 0.88;
}

.element.drillable {
  cursor: pointer;
}

.element .box,
.datastore-body,
.bucket-body,
.directory-body,
.directory-tab,
.code-box,
.person-body,
.deployment-node-box {
  fill: var(--element-fill);
  stroke: var(--element-stroke);
  stroke-width: 4;
  stroke-linejoin: round;
}

.bucket-lip,
.datastore-lip {
  fill: none;
  stroke: var(--element-stroke);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

.role-external {
  --element-stroke: var(--red);
  --element-text: var(--red);
}

.role-person,
.type-person {
  --element-stroke: var(--green);
  --element-text: var(--green);
}

.role-posting {
  --element-stroke: var(--orange);
  --element-text: var(--orange);
}

.role-rail {
  --element-stroke: var(--teal);
  --element-text: var(--teal);
}

.role-data,
.role-internal,
.tag-internal {
  --element-stroke: var(--blue);
  --element-text: var(--blue);
}

.role-deployment {
  --element-stroke: var(--gray);
  --element-text: var(--gray);
}

.role-deployment .deployment-node-box {
  fill: rgba(255, 255, 255, 0.02);
  stroke-width: 3.5;
}

.type-infrastructureNode {
  --element-stroke: var(--gray);
  --element-text: var(--gray);
}

.person-arm {
  stroke: var(--element-stroke);
  stroke-width: 1.4;
  opacity: 0.45;
}

.browser-chrome-line,
.terminal-cursor {
  stroke: var(--element-stroke);
  stroke-width: 4;
  stroke-linecap: round;
}

.browser-dot {
  fill: var(--element-stroke);
}

.terminal-prompt {
  fill: var(--element-text);
  font-size: 24px;
  font-weight: 900;
}

.is-selected .box,
.is-selected .person-body,
.is-selected .datastore-body,
.is-selected .datastore-lip,
.is-selected .bucket-body,
.is-selected .bucket-lip,
.is-selected .directory-body,
.is-selected .directory-tab,
.is-selected .code-box,
.is-selected .deployment-node-box {
  stroke-width: 5.5;
  filter: drop-shadow(0 7px 8px rgba(15, 23, 42, 0.12));
}

.element-title {
  fill: var(--element-text);
  font-size: 23px;
  font-weight: 800;
}

.element-tech {
  fill: var(--element-text);
  font-size: 13px;
  font-weight: 500;
}

.element-desc {
  fill: var(--element-text);
  font-size: 16px;
}

.deployment-node-title {
  fill: var(--element-text);
  font-size: 20px;
  font-weight: 800;
}

.deployment-node-meta,
.deployment-node-desc {
  fill: var(--element-text);
  font-size: 13px;
}

.uml-divider {
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.5;
}

.drill-pill-group {
  cursor: pointer;
}

.drill-pill {
  fill: #eef6ff;
  stroke: #9bc7ef;
}

.drill-pill-text {
  fill: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.relationship {
  stroke: var(--gray);
  stroke-width: 2.6;
  stroke-dasharray: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.relationship.is-async {
  stroke-dasharray: 10 8;
}

.dynamic-relationship .relationship {
  stroke-width: 3;
}

.step-badge {
  fill: #ffffff;
  stroke: var(--navy);
  stroke-width: 3;
}

.step-badge-text {
  fill: var(--navy);
  font-size: 14px;
  font-weight: 800;
  dominant-baseline: middle;
}

.step-badge-text.small {
  font-size: 11px;
}

.dynamic-legend-box {
  fill: rgba(255, 255, 255, 0.92);
  stroke: #c8d2df;
  stroke-width: 1.5;
}

.dynamic-legend {
  cursor: grab;
}

.dynamic-legend-row {
  cursor: pointer;
}

.dynamic-legend-row-hit {
  fill: transparent;
}

.dynamic-legend-row:hover .dynamic-legend-row-hit,
.dynamic-legend-row:focus-visible .dynamic-legend-row-hit {
  fill: rgba(47, 106, 246, 0.08);
  stroke: rgba(47, 106, 246, 0.45);
}

.dynamic-legend.is-moving,
.diagram.is-legend-dragging .dynamic-legend {
  cursor: grabbing;
}

.dynamic-legend:focus-visible .dynamic-legend-box {
  stroke: #2f6af6;
  stroke-width: 2;
}

body.is-readonly .dynamic-legend {
  cursor: default;
}

.dynamic-legend-title {
  fill: var(--navy);
  font-size: 17px;
  font-weight: 800;
}

.dynamic-legend-line {
  fill: var(--gray);
  font-size: 13px;
}

.relationship-label-bg {
  fill: rgba(255, 255, 255, 0.82);
  stroke: transparent;
}

.relationship-label {
  fill: var(--gray);
  font-size: 17px;
  font-weight: 500;
}

.relationship-tech {
  fill: var(--gray);
  font-size: 12px;
}

.relationship-api-badge {
  fill: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

#diagramLayer.d09-lod-overview .element-tech,
#diagramLayer.d09-lod-overview .element-desc,
#diagramLayer.d09-lod-overview .deployment-node-meta,
#diagramLayer.d09-lod-overview .deployment-node-desc,
#diagramLayer.d09-lod-overview .relationship-tech,
#diagramLayer.d09-lod-overview .relationship-api-badge,
#diagramLayer.d09-lod-overview .dynamic-legend,
#diagramLayer.d09-lod-overview .er-ref-badge,
#diagramLayer.d09-lod-overview .er-ref-badge-text {
  display: none;
}

#diagramLayer.d09-lod-summary .element-desc,
#diagramLayer.d09-lod-summary .deployment-node-desc,
#diagramLayer.d09-lod-summary .relationship-api-badge {
  display: none;
}

#diagramLayer.d09-lod-overview .relationship-label-bg,
#diagramLayer.d09-lod-summary .relationship-label-bg {
  fill: rgba(255, 255, 255, 0.94);
  stroke: rgba(68, 68, 68, 0.22);
}

#diagramLayer.d09-focus-active .d09-focus-muted {
  opacity: 0.18;
  transition: opacity 120ms ease;
}

#diagramLayer.d09-focus-active .d09-focus-target .box,
#diagramLayer.d09-focus-active .d09-focus-target .person-body,
#diagramLayer.d09-focus-active .d09-focus-target .datastore-body,
#diagramLayer.d09-focus-active .d09-focus-target .datastore-lip,
#diagramLayer.d09-focus-active .d09-focus-target .bucket-body,
#diagramLayer.d09-focus-active .d09-focus-target .bucket-lip,
#diagramLayer.d09-focus-active .d09-focus-target .directory-body,
#diagramLayer.d09-focus-active .d09-focus-target .directory-tab,
#diagramLayer.d09-focus-active .d09-focus-target .code-box,
#diagramLayer.d09-focus-active .d09-focus-target .deployment-node-box,
#diagramLayer.d09-focus-active .d09-focus-target .relationship {
  stroke-width: 6;
  filter: drop-shadow(0 9px 12px rgba(37, 99, 235, 0.22));
}

#relApiHint.has-error {
  color: var(--danger);
  font-weight: 800;
}

.empty-state {
  fill: #667085;
  font-size: 18px;
  font-weight: 700;
}

.sequence-mermaid-svg,
.mermaid-rendered-svg {
  overflow: visible;
}

@media (max-width: 920px) {
  .app-header {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }

  .app-shell,
  .app-shell.is-left-collapsed,
  .app-shell.is-right-collapsed,
  .app-shell.is-left-collapsed.is-right-collapsed {
    height: auto;
    grid-template-columns: 1fr;
  }

  .side-panel {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .right-panel {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .diagram-shell {
    height: 720px;
  }
}

/* Role badge + read-only (view-only) gating */
.role-badge {
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
}

.role-badge.is-admin {
  color: var(--ok);
  border-color: #b7e0c6;
  background: #f0fbf4;
}

.role-badge.is-viewer {
  color: #9a6700;
  border-color: #f0dca0;
  background: #fffaf0;
}

.role-badge.is-preview {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--surface-2);
}

body.is-readonly [data-write] {
  display: none !important;
}

.source-intake {
  display: grid;
  gap: 8px;
}

.source-intake .drop-zone {
  margin-bottom: 0;
}

.advanced-workspace .intake-modal-head {
  display: none;
}

.bundle-import {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.bundle-import input,
.bundle-import select {
  width: 100%;
}

.bundle-import-diff {
  max-height: 150px;
  overflow: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface-2);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.code-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #9a6700;
  background: #fffaf0;
  border: 1px solid #f0dca0;
}

/* E1-b: Author Workbench inspector — source fragment / governance / relationship meta (read-only blocks) */
.rp-source, .rp-governance, .rp-relmeta {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border);
}
.rp-ro-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 4px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  vertical-align: middle;
}
.rp-source-json {
  max-height: 200px;
  overflow: auto;
  margin: 0;
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 6px;
}
.rp-gov-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: 12px;
}
.rp-gov-grid dt { color: var(--text-muted); }
.rp-gov-grid dd { margin: 0; font-weight: 600; word-break: break-word; }
.rp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.rp-issues {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--danger);
  background: #fde7e9;
  border: 1px solid #f4b6bd;
}

/* Export modal (U9) */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.42);
}

.modal {
  width: min(420px, 92vw);
  display: grid;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.modal h2 {
  margin: 0;
  font-size: 18px;
}

.delete-source-copy {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.delete-source-modal .danger-button {
  color: #ffffff;
  border-color: var(--danger);
  background: var(--danger);
  font-weight: 700;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#exportRunBtn {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary);
}

/* Resize handle (U7) */
.resize-handle {
  fill: #ffffff;
  stroke: #8aa1bc;
  stroke-width: 2;
  cursor: nwse-resize;
}

.element:hover .resize-handle {
  stroke: var(--blue);
}

body.is-readonly .resize-handle {
  display: none;
}

/* Relationship selection / edit (U8) */
.relationship-hit {
  stroke: transparent;
  stroke-width: 16;
  fill: none;
  cursor: pointer;
}

.is-rel-selected .relationship {
  stroke: var(--primary);
  stroke-width: 3.6;
}

.is-rel-selected .relationship-label {
  fill: var(--primary);
  font-weight: 700;
}

.relationship-port-overlay {
  pointer-events: none;
}

.rel-port-handle {
  pointer-events: all;
  fill: var(--surface);
  stroke: var(--primary);
  stroke-width: 2.6;
  cursor: grab;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.22));
}

.rel-port-handle-source {
  fill: #e9efff;
}

.rel-port-handle-target {
  fill: #f2fbf5;
}

.rel-port-handle:hover,
.rel-port-handle:focus-visible {
  stroke-width: 3.4;
  outline: none;
}

.diagram.is-port-dragging,
.diagram.is-port-dragging .rel-port-handle {
  cursor: grabbing;
}


/* View-only / logged-out: bỏ hẳn right inspect/edit sidebar (owner: viewer không cần edit panel) */
body.is-readonly .right-panel,
body.is-readonly #rightPanelToggleBtn {
  display: none;
}

body.is-readonly .app-shell {
  grid-template-columns: 330px minmax(0, 1fr);
}

body.is-readonly .app-shell.is-left-collapsed {
  grid-template-columns: 44px minmax(0, 1fr);
}

body.is-viewer.is-readonly .right-panel {
  display: grid;
}

body.is-viewer.is-readonly .app-shell {
  grid-template-columns: 330px minmax(0, 1fr) 320px;
}

body.is-viewer.is-readonly .app-shell.is-left-collapsed {
  grid-template-columns: 44px minmax(0, 1fr) 320px;
}

body.is-viewer.is-readonly .right-panel .rp-tabs,
body.is-viewer.is-readonly .right-panel [data-tabpanel="arrange"],
body.is-viewer.is-readonly .right-panel [data-tabpanel="code"] {
  display: none !important;
}

body.is-viewer.is-readonly .right-panel [data-tabpanel="text"] {
  display: grid !important;
}

/* E1-c: Viewer surface — read-only clean route (#/view/...), không render author shell (§2) */
.policy-badge.viewer { background: #e7f7ee; color: #156a3b; }
body.is-viewer #sidebarToggleBtn {
  display: none;
}
body.is-viewer .side-panel {
  display: block;
}
body.is-viewer .project-list-actions,
body.is-viewer .project-list-import,
body.is-viewer #workspaceEmptyState,
body.is-viewer #sourceActionGroup,
body.is-viewer #loadSourceBtn,
body.is-viewer #advancedWorkspace,
body.is-viewer .export-log-section,
body.is-viewer .sticky-status,
body.is-viewer .tree-action,
body.is-viewer .tree-more,
body.is-viewer .tree-quick-action,
body.is-viewer .tree-tools {
  display: none !important;
}
body.is-viewer .toolbar-panels,
body.is-viewer .toolbar-save,
body.is-viewer .toolbar-divider {
  display: none;
}
body.is-viewer .toolbar-group {
  padding-bottom: 0;
}
body.is-viewer .toolbar-group::after {
  display: none;
}
body.is-viewer .app-shell,
body.is-viewer .app-shell.is-left-collapsed {
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
}
body.is-viewer .critical-banner { display: none; } /* viewer = consumer read-only, không phải author-validation surface */
.viewer-export:disabled { opacity: 0.5; cursor: not-allowed; } /* visibility điều khiển bằng JS (btn.hidden) — official export gated bởi exportPolicy (§3) */

/* E1-d: Source Studio surface (#/app/.../sources/...) — shell/skeleton + badges (§7, §17.2) */
.source-studio { display: none; }
body.is-sourcestudio .app-shell { display: none; }
body.is-sourcestudio #sourceStudio {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: var(--space-3, 12px);
  height: calc(100vh - var(--header-h, 48px));
  padding: var(--space-3, 12px) var(--space-4, 16px);
  box-sizing: border-box;
}
.ss-overview { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; }
.ss-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-muted); white-space: nowrap; border: 1px solid var(--border);
}
.ss-badge.ss-type { background: var(--primary-weak); color: var(--primary); border-color: var(--primary); }
.ss-badge.ss-authority { background: #e7f7ee; color: #156a3b; border-color: #c6ecd5; }
.ss-badge.ss-authority.is-derived { background: #fdeccf; color: #9a6700; border-color: #f0dca0; }
.ss-badge.ss-authority.is-viewer { background: #e8f1ff; color: #1d4ed8; border-color: #bfd7ff; }
.ss-badge.ss-sync.unsaved { background: #fdeccf; color: #9a6700; }
.ss-badge.ss-sync.conflict { background: #fde7e9; color: var(--danger); }
.ss-overview-name { font-weight: 600; color: var(--text); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ss-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3, 12px); min-height: 0; }
.ss-pane { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.ss-pane-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ss-pane-tag { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.ss-editor {
  flex: 1 1 auto; min-height: 0; resize: none; border: 0; padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;
}
.ss-editor:read-only { background: #0f172a; color: #e2e8f0; }
.ss-preview { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px; font-size: 13px; color: var(--text); }
.ss-preview svg { max-width: 100%; height: auto; }
.ss-error { margin: 0 10px 10px; padding: 8px 10px; border-radius: 6px; font-size: 12px; color: var(--danger); background: #fde7e9; border: 1px solid #f4b6bd; }
.ss-validation { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ss-validation.ok { color: #156a3b; }
.ss-validation.has-error { color: var(--danger); }
.ss-test-status {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.ss-test-status-head { display: inline-flex; align-items: center; gap: 8px; }
.ss-test-status p { margin: 0; color: var(--text-muted); font-size: 12px; min-width: 0; }
.ss-test-status button { justify-self: end; }
.ss-test-status-badge.is-pass { background: #e7f7ee; color: #156a3b; border-color: #c6ecd5; }
.ss-test-status-badge.is-fail { background: #fde7e9; color: var(--danger); border-color: #f4b6bd; }
.ss-test-status-badge.is-mixed { background: #fdeccf; color: #9a6700; border-color: #f0dca0; }
.ss-test-status-badge.is-unavailable { background: #fde7e9; color: var(--danger); border-color: #f4b6bd; }
.ss-actions { display: flex; align-items: center; gap: 8px; }
.ss-actions-spacer { flex: 1 1 auto; }
.ss-derived-toggle { font-size: 12px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
@media (max-width: 760px) {
  .ss-test-status { grid-template-columns: 1fr auto; }
  .ss-test-status p { grid-column: 1 / -1; grid-row: 2; }
  .ss-test-status button { grid-column: 2; grid-row: 1; }
}

/* E1-e: Presentation surface (#/present/.../packs/...) — full-screen, no chrome (§8) */
.presentation { display: none; }
body.is-presenting .app-header,
body.is-presenting .side-panel,
body.is-presenting .right-panel,
body.is-presenting #rightPanelToggleBtn,
body.is-presenting .diagram-shell .canvas-toolbar,
body.is-presenting .diagram-shell .topbar,
body.is-presenting .diagram-shell .toolbar,
body.is-presenting .diagram-shell .caption { display: none !important; }
body.is-presenting .app-shell,
body.is-presenting .app-shell.is-left-collapsed { grid-template-columns: minmax(0, 1fr); height: 100vh; }
body.is-presenting .diagram-shell { height: 100vh; }
body.is-presenting #diagram { background: #fff; }
body.is-presenting .diagram { cursor: default; }
body.is-presenting .element,
body.is-presenting .relationship-hit { pointer-events: none; }
body.is-presenting .resize-handle,
body.is-presenting .drill-pill-group { display: none; }
body.is-presenting .element-tech,
body.is-presenting .relationship-tech,
body.is-presenting .relationship-api-badge { display: none; }
body.is-presenting .is-selected .box,
body.is-presenting .is-selected .person-body,
body.is-presenting .is-selected .datastore-body,
body.is-presenting .is-selected .code-box,
body.is-presenting .is-selected .deployment-node-box {
  stroke-width: 4;
  filter: none;
}
#presentation {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
}
.pres-top, .pres-bottom {
  pointer-events: auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; background: rgba(15, 23, 42, 0.92); color: #fff;
}
.pres-title { font-weight: 700; font-size: 15px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-exit { background: transparent; border: 0; color: #fff; font-size: 16px; cursor: pointer; flex: 0 0 auto; }
.pres-nav { background: #1e293b; border: 1px solid #334155; color: #fff; border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.pres-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.pres-counter { font-variant-numeric: tabular-nums; font-size: 13px; flex: 0 0 auto; }
.pres-caption { flex: 1 1 auto; font-size: 13px; color: #cbd5e1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-spacer { flex: 0 0 8px; }
.pres-mode-badge { border: 1px solid #334155; border-radius: 999px; color: #cbd5e1; font-size: 12px; padding: 3px 8px; white-space: nowrap; }
.pres-export { background: #2563eb; border: 0; color: #fff; border-radius: 6px; padding: 4px 12px; cursor: pointer; flex: 0 0 auto; }
.pres-export:disabled { opacity: 0.5; cursor: not-allowed; }

/* Governance Review (#/review/<package>) — real source approval workflow. */
.review-slot { display: none; }
body.is-reviewing .side-panel,
body.is-reviewing #sidebarToggleBtn { display: none; }
body.is-reviewing .app-shell,
body.is-reviewing .app-shell.is-left-collapsed { grid-template-columns: minmax(0, 1fr); }
body.is-reviewing .diagram-shell { margin-right: 300px; }
body.is-reviewing #reviewSlot {
  display: flex; flex-direction: column; gap: 12px;
  position: fixed; top: var(--header-h, 48px); right: 0; bottom: 0; width: 300px;
  padding: 14px 16px; background: var(--surface); border-left: 1px solid var(--border); overflow: auto; z-index: 30; box-sizing: border-box;
}
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-status-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #fdeccf; color: #9a6700; white-space: nowrap; }
.rv-status-badge.is-approved { background: #dcfce7; color: #166534; }
.rv-status-badge.is-drift { background: #fee2e2; color: #991b1b; }
.rv-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 12px; }
.rv-grid dt { color: var(--text-muted); }
.rv-grid dd { margin: 0; font-weight: 600; word-break: break-word; }
.rv-actions { display: flex; gap: 8px; }
.rv-actions button { flex: 1 1 0; padding: 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 700; }
.rv-actions button:disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.55; }
.rv-disclaimer { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin: 0; padding: 8px 10px; background: var(--surface-2); border-radius: 6px; border: 1px dashed var(--border); }
.rv-thread { display: flex; flex-direction: column; gap: 6px; }
.rv-thread-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.rv-thread-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); font-size: 11px; }
.rv-thread-label { font-weight: 700; color: var(--text); }
.rv-thread-actor { color: var(--text-muted); }
.rv-thread-redacted { color: var(--text-muted); font-style: italic; }
.rv-thread-note { margin: 0; font-size: 11px; color: var(--text-muted); }
.is-agent-proposal { color: var(--accent, #6ea8fe); font-weight: 700; }
.ui-v2-publish { font-size: 11px; font-weight: 700; white-space: nowrap; }
.ui-v2-publish.is-published { color: var(--ok, #4ade80); }
.ui-v2-publish.is-blocked { color: var(--warn, #fbbf24); }
.ui-v2-publish.is-na { color: var(--text-muted); font-weight: 400; }

/* Save status (Option 1) */
.save-status {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  min-height: 16px;
}

.save-status.saved { color: var(--ok); }
.save-status.unsaved { color: #9a6700; }
.save-status.conflict { color: var(--danger); }

/* Multi-select Arrange tools (CR-004) */
.rp-align-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.rp-align-grid button,
.rp-row.distribute button {
  font-size: 12px;
}

.multi-count {
  font-weight: 700;
  color: var(--primary);
}

/* CR-013: DBML ER view + C4 erRef binding */
.er-edge {
  fill: none;
  stroke: #566070;
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.er-table-box {
  fill: #ffffff;
  stroke: #1168bd;
  stroke-width: 2.5;
}

.er-table-header {
  fill: #eaf3ff;
  stroke: #1168bd;
  stroke-width: 2.5;
}

.er-table-title {
  fill: #0f4f96;
  font-size: 15px;
  font-weight: 800;
}

.er-column-name {
  fill: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.er-column-type,
.er-column-tags {
  fill: #5f6f86;
  font-size: 12px;
  font-weight: 700;
}

.er-ref-badge {
  fill: #eaf3ff;
  stroke: #1168bd;
  stroke-width: 1.4;
}

.er-ref-badge-text {
  fill: #0f4f96;
  font-size: 10px;
  font-weight: 800;
}

.rp-erref {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 10px;
}

/* CR-014: Gherkin Scenario view + featureRef binding */
.bdd-feature-title {
  fill: #0f172a;
  font-size: 26px;
  font-weight: 850;
}

.bdd-card {
  fill: #ffffff;
  stroke: #c8d3e3;
  stroke-width: 1.5;
}

.bdd-kind {
  fill: #65758b;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.bdd-scenario-title {
  fill: #07152b;
  font-size: 19px;
  font-weight: 850;
}

.bdd-step-keyword {
  font-size: 13px;
  font-weight: 850;
}

.bdd-given { fill: #1168bd; }
.bdd-when { fill: #8a1ac2; }
.bdd-then { fill: #156a3b; }
.bdd-and,
.bdd-but { fill: #5f6f86; }

.bdd-step-text {
  fill: #26364d;
  font-size: 13px;
  font-weight: 600;
}

.bdd-tag {
  fill: #eef4ff;
  stroke: #b7c8ea;
}

.bdd-tag-text {
  fill: #285190;
  font-size: 11px;
  font-weight: 800;
}

.bdd-example-row rect {
  fill: #f7f9fc;
  stroke: #dde5f0;
}

.bdd-example-row.is-head rect {
  fill: #eaf3ff;
}

.bdd-example-cell {
  fill: #334155;
  font-size: 12px;
  font-weight: 700;
}

.rp-bddref {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 10px;
}

/* UI v2 I0-I2 controlled shell. Feature-flagged; current UI remains available when flag is OFF. */
.ui-v2-shell {
  min-height: 100vh;
  background: var(--bg, #f7f9fc);
  color: var(--text, #07152b);
}

html[data-theme="dark"] .ui-v2-shell {
  --bg: #08111f;
  --panel: #111827;
  --panel-muted: #1f2937;
  --text: #e5edf7;
  --muted: #9fb0c8;
  --border: #334155;
  --input-border: #475569;
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .ui-v2-shell input,
html[data-theme="dark"] .ui-v2-shell select,
html[data-theme="dark"] .ui-v2-shell textarea {
  background: #0f172a;
  border-color: var(--input-border);
  color: var(--text);
}

body.ui-v2-active .app-header,
body.ui-v2-active .app-shell,
body.ui-v2-active #presentation,
body.ui-v2-active #reviewSlot {
  display: none !important;
}

body.ui-v2-active.ui-v2-editor-active .app-shell {
  display: grid !important;
  min-height: calc(100vh - 118px);
}

body.ui-v2-active.ui-v2-editor-active .ui-v2-shell {
  min-height: auto;
}

body.ui-v2-active.ui-v2-editor-active .ui-v2-main {
  padding: 6px 14px 8px;
}

body.ui-v2-active.ui-v2-editor-active .app-shell .toolbar,
body.ui-v2-active.ui-v2-editor-active .app-shell .canvas-toolbar {
  display: none !important;
}

body.ui-v2-active .app-header {
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

.ui-v2-topbar {
  align-items: center;
  background: var(--panel, #ffffff);
  border-bottom: 1px solid var(--border, #c8d3e3);
  display: flex;
  flex-wrap: nowrap;
  gap: 6px 10px;
  overflow: hidden;
  padding: 6px 14px;
}

.ui-v2-topbar > div:first-child {
  align-items: baseline;
  display: flex;
  flex: 0 1 min(30vw, 360px);
  gap: 8px;
  max-width: min(30vw, 360px);
  min-width: 120px;
  overflow: hidden;
}

.ui-v2-eyebrow {
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.ui-v2-topbar h1,
.ui-v2-hero h2,
.ui-v2-guard-panel h2,
.ui-v2-project-card h2 {
  letter-spacing: 0;
  margin: 0;
}

.ui-v2-topbar h1 {
  font-size: 19px;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v2-topbar p,
.ui-v2-hero p,
.ui-v2-guard-panel p,
.ui-v2-project-card p {
  color: var(--muted, #64748b);
  margin: 4px 0 0;
}

.ui-v2-topbar > div:first-child > p:not(.ui-v2-eyebrow) {
  display: none;
}

.ui-v2-tabs {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ui-v2-tabs::-webkit-scrollbar {
  display: none;
}

.ui-v2-tabs a,
.ui-v2-flag,
.ui-v2-user,
.ui-v2-card-actions a,
.ui-v2-card-actions span {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--text, #07152b);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 7px;
  text-decoration: none;
}

.ui-v2-tabs a.is-active,
.ui-v2-card-actions a {
  background: #1f5eff;
  border-color: #1f5eff;
  color: #ffffff;
}

.ui-v2-flag {
  background: #e9f8ef;
  border-color: #b7e4c7;
  color: #156a3b;
}

.ui-v2-user {
  background: var(--panel-muted, #eef4ff);
}

.ui-v2-identity {
  align-items: center;
  display: flex;
  gap: 6px;
  flex: 0 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.ui-v2-theme-toggle,
.ui-v2-role-badge,
.ui-v2-account-menu > summary,
.ui-v2-signin-menu > summary,
.ui-v2-login-form button,
.ui-v2-account-popover button {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  background: var(--panel, #ffffff);
  color: var(--text, #07152b);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-height: 30px;
  padding: 4px 7px;
  white-space: nowrap;
}

.ui-v2-theme-toggle {
  min-width: 48px;
}

.ui-v2-role-badge {
  background: #e9f8ef;
  border-color: #b7e4c7;
  color: #156a3b;
  cursor: default;
  white-space: nowrap;
}

.ui-v2-role-badge.is-viewer {
  background: var(--panel-muted, #eef4ff);
  border-color: var(--border, #c8d3e3);
  color: var(--muted, #64748b);
}

.ui-v2-account-menu,
.ui-v2-signin-menu {
  position: relative;
}

.ui-v2-account-menu > summary,
.ui-v2-signin-menu > summary {
  align-items: center;
  display: flex;
  gap: 6px;
  list-style: none;
  max-width: 220px;
}

.ui-v2-account-menu > summary::-webkit-details-marker,
.ui-v2-signin-menu > summary::-webkit-details-marker {
  display: none;
}

.ui-v2-account-menu > summary span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v2-account-avatar {
  align-items: center;
  background: #1f5eff;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 24px;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.ui-v2-account-popover,
.ui-v2-login-form {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  display: grid;
  gap: 8px;
  min-width: 230px;
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
}

.ui-v2-account-menu:not([open]) > .ui-v2-account-popover,
.ui-v2-signin-menu:not([open]) > .ui-v2-login-form {
  display: none;
}

.ui-v2-login-form input {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  padding: 9px 10px;
}

.ui-v2-login-error,
.ui-v2-readonly-note {
  color: #b42318;
  font-size: 12px;
  margin: 0;
}

.ui-v2-login-screen {
  align-items: center;
  background: var(--bg, #f7f9fc);
  display: grid;
  min-height: 100vh;
  padding: 32px 18px;
}

.ui-v2-login-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 460px;
  padding: 28px;
  width: min(100%, 460px);
}

.ui-v2-login-card h1 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
}

.ui-v2-login-card p {
  color: var(--muted, #64748b);
  margin: 8px 0 0;
}

.ui-v2-login-screen-form {
  display: grid;
  gap: 12px;
}

.ui-v2-login-screen-form label {
  color: var(--muted, #64748b);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
}

.ui-v2-login-screen-form input {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--text, #07152b);
  font: inherit;
  padding: 10px 12px;
}

.ui-v2-login-screen-form button,
.ui-v2-settings-panel button {
  border: 1px solid #1f5eff;
  border-radius: 6px;
  background: #1f5eff;
  color: #ffffff;
  cursor: pointer;
  font-weight: 850;
  padding: 10px 12px;
}

.ui-v2-login-screen-form button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.ui-v2-login-note {
  background: var(--panel-muted, #eef4ff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--muted, #64748b);
  display: grid;
  gap: 4px;
  padding: 12px;
}

.ui-v2-login-note strong {
  color: var(--text, #07152b);
}

.ui-v2-user-info {
  border-bottom: 1px solid var(--border, #c8d3e3);
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
}

.ui-v2-user-info strong {
  color: var(--text, #07152b);
}

.ui-v2-user-info span {
  color: var(--muted, #64748b);
  font-size: 12px;
}

.ui-v2-settings-panel {
  background: var(--panel, #ffffff);
  border-bottom: 1px solid var(--border, #c8d3e3);
  display: grid;
  gap: 14px;
  padding: 14px 18px;
}

.ui-v2-settings-panel[hidden] {
  display: none !important;
}

.ui-v2-settings-panel h2 {
  margin: 0;
}

.ui-v2-settings-panel p {
  color: var(--muted, #64748b);
  margin: 4px 0 0;
}

.ui-v2-settings-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-v2-settings-grid article {
  background: var(--panel-muted, #eef4ff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.ui-v2-settings-grid span {
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 800;
}

.ui-v2-settings-grid .ui-v2-theme-toggle {
  width: fit-content;
}

@media (max-width: 1500px) {
  .ui-v2-topbar {
    align-items: center;
  }

  .ui-v2-tabs,
  .ui-v2-identity {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .ui-v2-account-popover,
  .ui-v2-login-form {
    left: auto;
    right: 0;
  }

  .ui-v2-capability-map-head,
  .ui-v2-capability-empty-state,
  .ui-v2-capability-grid {
    grid-template-columns: 1fr;
  }

  .ui-v2-capability-map-badges {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .ui-v2-settings-grid {
    grid-template-columns: 1fr;
  }
}

.ui-v2-main {
  margin: 0 auto;
  max-width: 1440px;
  padding: 12px 14px 24px;
}

.ui-v2-band,
.ui-v2-hero,
.ui-v2-guard-panel,
.ui-v2-guidance {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  padding: 12px 14px;
}

.ui-v2-search-band {
  align-items: end;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(240px, 1fr) auto;
}

.ui-v2-search-band label {
  display: grid;
  gap: 6px;
}

.ui-v2-search-band span,
.ui-v2-band-actions span {
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 800;
}

.ui-v2-search-band input {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  font: inherit;
  min-height: 40px;
  padding: 8px 10px;
}

.ui-v2-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-v2-band-actions span {
  background: var(--panel-muted, #eef4ff);
  border-radius: 6px;
  padding: 8px 10px;
}

.ui-v2-band-button {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--text, #07152b);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  min-height: 34px;
  padding: 6px 10px;
}

.ui-v2-band-button.is-primary {
  background: #1f5eff;
  border-color: #1f5eff;
  color: #ffffff;
}

.ui-v2-segmented {
  align-items: center;
  background: var(--panel-muted, #eef4ff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
}

.ui-v2-segmented button {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--muted, #64748b);
  cursor: pointer;
  font-weight: 850;
  min-height: 28px;
  padding: 4px 9px;
}

.ui-v2-segmented button.is-active {
  background: #1f5eff;
  color: #ffffff;
}

.ui-v2-modal-backdrop {
  align-items: center;
  background: rgba(7, 21, 43, 0.34);
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 24px;
  position: fixed;
  z-index: 1200;
}

.ui-v2-modal-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(7, 21, 43, 0.22);
  color: var(--text, #07152b);
  max-height: min(88vh, 760px);
  max-width: 760px;
  overflow: auto;
  width: min(760px, 100%);
}

.ui-v2-modal-head {
  align-items: center;
  border-bottom: 1px solid var(--border, #c8d3e3);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 16px;
}

.ui-v2-modal-head h2 {
  font-size: 22px;
  margin: 2px 0 0;
}

.ui-v2-modal-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px;
}

.ui-v2-modal-form label {
  color: var(--muted, #64748b);
  display: grid;
  font-size: 12px;
  font-weight: 850;
  gap: 6px;
}

.ui-v2-modal-form input,
.ui-v2-modal-form select,
.ui-v2-modal-form textarea {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--text, #07152b);
  font: inherit;
  min-height: 38px;
  padding: 8px 10px;
}

.ui-v2-modal-form small {
  color: var(--muted, #64748b);
  font-size: 12px;
}

.ui-v2-modal-form .is-full,
.ui-v2-modal-actions {
  grid-column: 1 / -1;
}

.ui-v2-modal-preview {
  background: #f8fafc;
  border: 1px dashed var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.ui-v2-modal-preview div {
  display: grid;
  gap: 10px;
  grid-template-columns: 160px minmax(0, 1fr);
}

.ui-v2-modal-preview strong {
  color: var(--muted, #64748b);
}

.ui-v2-modal-preview span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ui-v2-modal-status {
  border-radius: 8px;
  font-weight: 850;
  margin: 0;
  padding: 10px 12px;
}

.ui-v2-modal-status[data-tone="ok"] {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #047857;
}

.ui-v2-modal-status[data-tone="warn"] {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #a16207;
}

.ui-v2-modal-status[data-tone="error"] {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.ui-v2-modal-actions {
  align-items: center;
  border-top: 1px solid var(--border, #c8d3e3);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 4px -16px -16px;
  padding: 14px 16px;
}

.ui-v2-modal-actions button,
.ui-v2-modal-head button {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--text, #07152b);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  min-height: 34px;
  padding: 7px 10px;
}

.ui-v2-modal-actions button.is-primary {
  background: #1f5eff;
  border-color: #1f5eff;
  color: #ffffff;
}

.ui-v2-modal-actions button:disabled {
  background: var(--panel-muted, #eef4ff);
  color: var(--muted, #64748b);
  cursor: default;
  opacity: 0.72;
}

.ui-v2-project-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 16px;
}

.ui-v2-project-grid[data-layout="list"] {
  grid-template-columns: 1fr;
}

.ui-v2-project-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 178px;
  padding: 14px;
}

.ui-v2-maintenance {
  background: var(--bg, #f7f9fc);
  display: grid;
  min-height: 100vh;
  padding: 32px;
  place-items: center;
}

.ui-v2-maintenance-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  box-shadow: var(--shadow, 0 8px 24px rgba(15, 23, 42, 0.08));
  padding: 28px;
  width: min(680px, 100%);
}

.ui-v2-maintenance-card h1 {
  font-size: 32px;
  margin: 4px 0 12px;
}

.ui-v2-maintenance-card button {
  margin-top: 16px;
  min-height: 40px;
  width: auto;
}

.ui-v2-project-grid[data-layout="list"] .ui-v2-project-card {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.7fr) auto;
  min-height: 96px;
}

.ui-v2-project-card-head {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 44px 1fr;
  min-width: 0;
}

.ui-v2-avatar {
  align-items: center;
  background: #eaf3ff;
  border: 1px solid #b7c8ea;
  border-radius: 8px;
  color: #0f5ca8;
  display: inline-flex;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.ui-v2-project-meta,
.ui-v2-card-actions,
.ui-v2-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-v2-card-actions {
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.ui-v2-project-meta span {
  align-items: flex-start;
  background: var(--panel-muted, #f2f6fb);
  border-radius: 6px;
  color: var(--muted, #64748b);
  display: inline-flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 800;
  gap: 3px;
  line-height: 1.2;
  min-width: 104px;
  padding: 7px 9px;
}

.ui-v2-project-meta strong {
  color: var(--text, #0f172a);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ui-v2-project-meta span[data-health-status="ok"],
.ui-v2-project-meta span[data-health-status="healthy"] {
  background: #ecfdf3;
  color: #087443;
}

.ui-v2-project-meta span[data-health-status="warn"],
.ui-v2-project-meta span[data-health-status="warning"],
.ui-v2-project-meta span[data-health-status="review"] {
  background: #fff7e6;
  color: #9a5b00;
}

.ui-v2-project-meta span[data-health-status="block"],
.ui-v2-project-meta span[data-health-status="blocked"],
.ui-v2-project-meta span[data-health-status="error"] {
  background: #fff1f1;
  color: #b42318;
}

.ui-v2-card-badges {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.ui-v2-card-badges span,
.ui-v2-card-actions > span {
  align-items: center;
  background: #edf4ff;
  border: 1px solid #c9daf7;
  border-radius: 999px;
  color: #185ca3;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  min-height: 26px;
  padding: 3px 8px;
}

.ui-v2-hero {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 48px;
}

.ui-v2-hero > div {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.ui-v2-hero .ui-v2-eyebrow {
  flex: 0 0 auto;
  font-size: 10px;
}

.ui-v2-hero h2 {
  flex: 0 1 auto;
  font-size: 18px;
  line-height: 1.15;
  max-width: min(34vw, 430px);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v2-hero p:not(.ui-v2-eyebrow) {
  flex: 1 1 auto;
  font-size: 13px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v2-status {
  background: #e9f8ef;
  border: 1px solid #b7e4c7;
  border-radius: 999px;
  color: #156a3b;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
  white-space: nowrap;
}

.ui-v2-health-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.ui-v2-health-grid article {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  padding: 16px;
}

.ui-v2-health-grid strong {
  display: block;
  font-size: 28px;
  line-height: 1.1;
}

.ui-v2-health-grid span {
  color: var(--muted, #64748b);
  display: block;
  font-weight: 800;
  margin-top: 4px;
}

.ui-v2-home-hero {
  align-items: stretch;
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .55fr);
  padding: 22px;
}

.ui-v2-home-hero h2 {
  font-size: 32px;
  line-height: 1.08;
  margin: 2px 0 8px;
}

.ui-v2-home-hero p:not(.ui-v2-eyebrow) {
  color: var(--muted, #64748b);
  line-height: 1.45;
  margin: 0;
  max-width: 920px;
}

.ui-v2-home-answer-card {
  background: #f8fafc;
  border: 1px solid #d7deea;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.ui-v2-home-answer-card strong {
  font-size: 26px;
}

.ui-v2-home-answer-card small {
  color: var(--muted, #64748b);
  line-height: 1.35;
}

.ui-v2-home-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ui-v2-home-primary-actions a {
  align-items: center;
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  color: var(--text, #07152b);
  display: inline-flex;
  font-weight: 900;
  min-height: 38px;
  padding: 8px 12px;
  text-decoration: none;
}

.ui-v2-home-primary-actions a.ui-v2-primary-link {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.ui-v2-home-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.ui-v2-home-panel {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  min-width: 0;
  padding: 16px;
}

.ui-v2-home-panel h3 {
  font-size: 18px;
  line-height: 1.2;
  margin: 2px 0 10px;
}

.ui-v2-home-panel p,
.ui-v2-home-list span {
  color: var(--muted, #64748b);
  line-height: 1.4;
}

.ui-v2-home-list {
  display: grid;
  gap: 10px;
}

.ui-v2-home-list div {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 10px;
}

.ui-v2-home-list strong {
  overflow-wrap: anywhere;
}

.ui-v2-home-advanced {
  background: var(--panel, #ffffff);
  border: 1px dashed var(--border, #c8d3e3);
  border-radius: 8px;
  margin-top: 14px;
  padding: 12px;
}

.ui-v2-home-advanced > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
}

.ui-v2-home-advanced > summary::-webkit-details-marker {
  display: none;
}

.ui-v2-home-advanced > summary span {
  background: #eef4ff;
  border: 1px solid #c7d7fe;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.ui-v2-review-task-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.ui-v2-review-task-grid article {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  padding: 14px;
}

.ui-v2-review-task-grid h3 {
  font-size: 17px;
  line-height: 1.2;
  margin: 2px 0 8px;
}

.ui-v2-review-task-grid p:not(.ui-v2-eyebrow) {
  color: var(--muted, #64748b);
  line-height: 1.35;
  margin: 0;
}

.ui-v2-review-guide,
.ui-v2-review-honesty {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.ui-v2-review-guide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-v2-review-honesty {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-v2-review-guide article,
.ui-v2-review-honesty article {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
}

.ui-v2-review-guide strong,
.ui-v2-review-honesty strong {
  color: var(--ink, #0f172a);
  font-size: 16px;
}

.ui-v2-review-guide span,
.ui-v2-review-honesty span {
  color: var(--muted, #64748b);
  line-height: 1.35;
}

.ui-v2-meta-panel {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
}

.ui-v2-meta-panel-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.ui-v2-meta-panel h3 {
  margin: 2px 0 0;
}

.ui-v2-meta-form {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.75fr) minmax(150px, 0.45fr);
}

.ui-v2-meta-form label,
.ui-v2-comment-entry {
  color: var(--muted, #64748b);
  display: grid;
  font-size: 12px;
  font-weight: 850;
  gap: 5px;
}

.ui-v2-meta-form input,
.ui-v2-meta-form select,
.ui-v2-meta-form textarea,
.ui-v2-comment-entry textarea,
.ui-v2-review-commandbar select {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--text, #07152b);
  font: inherit;
  min-height: 38px;
  padding: 8px 10px;
}

.ui-v2-meta-description {
  grid-column: 1 / -1;
}

.ui-v2-meta-status {
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 800;
  margin: 0;
}

.ui-v2-meta-status[data-tone="dirty"] {
  color: #9a5d00;
}

.ui-v2-meta-status[data-tone="warn"] {
  color: #b42318;
}

.ui-v2-meta-readonly {
  display: grid;
  gap: 6px 12px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
}

.ui-v2-meta-readonly dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-v2-author-state {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 12px;
}

.ui-v2-author-state article {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  padding: 14px 16px;
}

.ui-v2-author-state span {
  color: var(--muted, #64748b);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.ui-v2-author-state strong {
  color: var(--text, #07152b);
  font-size: 20px;
}

.ui-v2-handoff {
  display: grid;
  gap: 16px;
}

.ui-v2-handoff-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-v2-handoff-grid article,
.ui-v2-handoff-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
}

.ui-v2-handoff-grid article {
  padding: 14px 16px;
}

.ui-v2-handoff-grid span {
  color: var(--muted, #64748b);
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 5px;
}

.ui-v2-handoff-grid strong {
  display: block;
  font-size: 18px;
  line-height: 1.25;
}

.ui-v2-handoff-card {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 20px;
}

.ui-v2-handoff-card h3 {
  margin: 4px 0 8px;
}

.ui-v2-handoff-card p:not(.ui-v2-eyebrow) {
  color: var(--muted, #64748b);
  line-height: 1.5;
  margin: 0;
}

.ui-v2-handoff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ui-v2-handoff-actions a {
  align-items: center;
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  color: var(--text, #07152b);
  display: inline-flex;
  font-weight: 900;
  min-height: 42px;
  padding: 8px 14px;
  text-decoration: none;
}

.ui-v2-handoff-actions a:hover {
  border-color: var(--accent, #2563eb);
}

.ui-v2-author-chrome {
  align-items: center;
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 16px;
  padding: 10px 12px;
}

.ui-v2-author-panel-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.ui-v2-author-panel-controls button {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  color: var(--text, #0f172a);
  font: inherit;
  font-weight: 900;
  min-height: 36px;
  padding: 7px 12px;
}

.ui-v2-author-panel-controls button[aria-pressed="true"] {
  background: #1f5eff;
  border-color: #1f5eff;
  color: #ffffff;
}

.ui-v2-author-advanced {
  position: relative;
}

.ui-v2-author-advanced summary {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  color: var(--text, #0f172a);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
  min-height: 36px;
  padding: 8px 12px;
}

.ui-v2-author-advanced summary::-webkit-details-marker {
  display: none;
}

.ui-v2-editor-strip {
  align-items: center;
  background: var(--panel, #ffffff);
  border-bottom: 1px solid var(--border, #c8d3e3);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 44px;
  padding: 5px 14px;
}

.ui-v2-editor-strip > div:first-child {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

.ui-v2-editor-strip .ui-v2-eyebrow {
  flex: 0 0 auto;
  font-size: 10px;
}

.ui-v2-editor-strip h2 {
  flex: 0 1 auto;
  font-size: 15px;
  line-height: 1.2;
  margin: 0;
  max-width: 260px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v2-editor-strip p:not(.ui-v2-eyebrow) {
  color: var(--muted, #64748b);
  flex: 1 1 180px;
  font-size: 12px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v2-editor-strip-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.ui-v2-editor-strip-actions .ui-v2-status,
.ui-v2-editor-strip-actions a {
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 7px;
  white-space: nowrap;
}

.ui-v2-editor-strip-actions a {
  border: 1px solid var(--border, #c8d3e3);
  color: var(--text, #07152b);
  font-weight: 900;
  text-decoration: none;
}

.ui-v2-author-commandbar {
  align-items: center;
  background: var(--panel, #ffffff);
  border-bottom: 1px solid var(--border, #c8d3e3);
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-height: 40px;
  overflow-x: auto;
  padding: 5px 14px;
  scrollbar-width: none;
}

.ui-v2-author-commandbar::-webkit-scrollbar {
  display: none;
}

.ui-v2-author-command-group {
  align-items: center;
  border-right: 1px solid var(--border, #c8d3e3);
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding-right: 7px;
}

.ui-v2-author-command-group:last-child {
  border-right: 0;
  padding-right: 0;
}

.ui-v2-author-commandbar button {
  background: #ffffff;
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: #07152b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-height: 30px;
  padding: 0 8px;
}

.ui-v2-author-commandbar button:hover:not(:disabled) {
  border-color: #7aa2ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ui-v2-author-commandbar button.is-active,
.ui-v2-author-commandbar button[aria-pressed="true"] {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.ui-v2-author-commandbar button:disabled {
  color: #7b8798;
  cursor: not-allowed;
  opacity: 0.62;
}

.ui-v2-author-readability-host .toolbar-readability {
  gap: 4px;
  max-width: none;
  padding-bottom: 0;
}

.ui-v2-author-readability-host .toolbar-readability .icon-button {
  width: auto;
  min-width: 44px;
  padding-inline: 10px;
}

.ui-v2-author-readability-host .toolbar-readability::after {
  display: none;
}

.ui-v2-author-readability-host .diagram-ux-status {
  max-width: 116px;
}

.ui-v2-author-advanced[open] summary {
  background: var(--panel-muted, #eef4ff);
  border-color: #9db6e8;
}

.ui-v2-author-advanced-menu {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16);
  display: grid;
  gap: 8px;
  min-width: 220px;
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 12;
}

.ui-v2-author-advanced-menu span {
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ui-v2-author-advanced-menu button {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 7px;
  color: var(--text, #0f172a);
  font: inherit;
  font-weight: 900;
  min-height: 34px;
  text-align: left;
}

.ui-v2-author-advanced-menu button[aria-pressed="true"] {
  background: #1f5eff;
  border-color: #1f5eff;
  color: #ffffff;
}

.ui-v2-expired-state {
  border-color: #f6c6c6;
}

.ui-v2-secondary-grid {
  margin-top: 12px;
}

.ui-v2-next-actions {
  margin-top: 14px;
}

.ui-v2-lifecycle-panel,
.ui-v2-governance-panel {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  margin-top: 14px;
  padding: 16px;
}

.ui-v2-lifecycle-panel {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.6fr);
}

.ui-v2-lifecycle-panel h3 {
  margin: 0 0 6px;
}

.ui-v2-lifecycle-panel p {
  color: var(--muted, #64748b);
  margin: 0;
}

.ui-v2-lifecycle-actions {
  align-content: start;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-v2-lifecycle-actions button,
.ui-v2-governance-panel button,
.ui-v2-governance-panel a {
  align-items: center;
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--ink, #0f172a);
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  text-decoration: none;
}

.ui-v2-lifecycle-actions button:not(:disabled):hover,
.ui-v2-governance-panel button:not(:disabled):hover,
.ui-v2-governance-panel a:hover {
  border-color: #1f5eff;
  color: #1f5eff;
}

.ui-v2-lifecycle-actions button.is-danger {
  border-color: #f3b8b8;
  color: #b42318;
}

.ui-v2-governance-panel {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-v2-governance-panel article {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
}

.ui-v2-governance-panel strong,
.ui-v2-governance-panel span {
  display: block;
}

.ui-v2-governance-panel span {
  color: var(--muted, #64748b);
  font-size: 13px;
  line-height: 1.35;
}

.ui-v2-capability-map {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
}

.ui-v2-capability-map-head {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 1fr) auto;
}

.ui-v2-capability-map-head h3,
.ui-v2-capability-map-head p {
  margin: 0;
}

.ui-v2-capability-map-head p:not(.ui-v2-eyebrow) {
  color: var(--muted, #64748b);
  margin-top: 4px;
}

.ui-v2-capability-map-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ui-v2-capability-map-badges span,
.ui-v2-capability-empty-state span,
.ui-v2-capability-status {
  background: var(--panel-muted, #eef4ff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: #43516a;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 8px;
}

.ui-v2-capability-explainer {
  background: #eef6ff;
  border: 1px solid #b6d4fe;
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.ui-v2-capability-explainer p,
.ui-v2-capability-empty-state p,
.ui-v2-capability-copy p,
.ui-v2-capability-role span,
.ui-v2-capability-policy-note {
  color: var(--muted, #64748b);
  margin: 0;
}

.ui-v2-capability-empty-state {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-v2-capability-empty-state article {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.ui-v2-capability-empty-state h4 {
  margin: 0;
}

.ui-v2-capability-empty-state article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-v2-capability-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-v2-capability-card {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
}

.ui-v2-capability-card > header {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.ui-v2-capability-card h3 {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.ui-v2-capability-icon {
  align-items: center;
  background: #dbeafe;
  border: 1px solid #aac4ff;
  border-radius: 8px;
  color: #0f4fd6;
  display: inline-flex;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.ui-v2-capability-status[data-tone="ok"] {
  background: #dcfce7;
  border-color: #b7efca;
  color: #087f5b;
}

.ui-v2-capability-status[data-tone="warn"] {
  background: #fff3c4;
  border-color: #f6d47d;
  color: #9a5b00;
}

.ui-v2-capability-status[data-tone="block"] {
  background: #fee4e2;
  border-color: #f6b8b4;
  color: #b42318;
}

.ui-v2-capability-rows {
  display: grid;
  gap: 8px;
}

.ui-v2-capability-row {
  align-items: start;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(160px, 1.05fr) minmax(150px, .9fr) minmax(132px, .72fr);
  min-width: 0;
  padding: 10px;
}

.ui-v2-capability-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ui-v2-capability-copy strong {
  font-size: 14px;
}

.ui-v2-capability-copy small {
  color: #43516a;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.ui-v2-capability-actions {
  align-content: start;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.ui-v2-capability-actions a,
.ui-v2-capability-actions button,
.ui-v2-capability-empty-state a,
.ui-v2-capability-empty-state button {
  align-items: center;
  background: #f8fbff;
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: #0d326f;
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  height: auto;
  justify-content: center;
  line-height: 1.15;
  min-height: 34px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 5px 7px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

.ui-v2-capability-actions button:disabled,
.ui-v2-capability-empty-state button:disabled {
  background: #f1f5f9;
  color: #7b8798;
  cursor: not-allowed;
}

.ui-v2-capability-role {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ui-v2-capability-role b {
  color: #087f5b;
  font-size: 12px;
}

.ui-v2-capability-role[data-tone="warn"] b {
  color: #9a5b00;
}

.ui-v2-capability-role[data-tone="blocked"] b {
  color: #b42318;
}

.ui-v2-capability-role span {
  font-size: 12px;
  line-height: 1.35;
}

.ui-v2-capability-nonclaim {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #7c2d12;
  font-weight: 900;
  margin: 0;
  padding: 11px 12px;
}

.ui-v2-capability-policy-note {
  font-size: 12px;
}

.ui-v2-project-inventory,
.ui-v2-catalog-drill-card,
.ui-v2-api-classify {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-top: 14px;
  min-width: 0;
  padding: 14px;
}

.ui-v2-project-inventory-head {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 1fr) auto;
}

.ui-v2-project-inventory-head h3,
.ui-v2-project-inventory-head p,
.ui-v2-api-classify h3,
.ui-v2-api-classify p {
  margin: 0;
}

.ui-v2-project-inventory-head p:not(.ui-v2-eyebrow),
.ui-v2-api-classify p {
  color: var(--muted, #64748b);
}

.ui-v2-project-inventory-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.ui-v2-project-inventory-badges span,
.ui-v2-api-type {
  background: #eaf3ff;
  border: 1px solid #c6d9ff;
  border-radius: 999px;
  color: #0f4fd6;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 6px 9px;
  white-space: nowrap;
}

.ui-v2-api-type.is-client {
  background: #fff7d6;
  border-color: #f6d47d;
  color: #9a5b00;
}

.ui-v2-api-type.is-service {
  background: #dcfce7;
  border-color: #b7efca;
  color: #087f5b;
}

.ui-v2-api-type.is-integration {
  background: #eaf3ff;
  border-color: #c6d9ff;
  color: #0f4fd6;
}

.ui-v2-project-inventory-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(300px, 0.88fr) minmax(420px, 1.12fr);
  min-width: 0;
}

.ui-v2-inventory-browser,
.ui-v2-operation-browser {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.ui-v2-operation-browser {
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  padding: 10px;
}

.ui-v2-operation-browser > header,
.ui-v2-api-classify > header {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) auto;
}

.ui-v2-inventory-row {
  align-items: start;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 42px minmax(180px, 1fr) minmax(150px, .55fr) minmax(148px, .48fr);
  min-width: 0;
  padding: 10px;
}

.ui-v2-inventory-kind {
  align-items: center;
  background: #dbeafe;
  border: 1px solid #aac4ff;
  border-radius: 8px;
  color: #0f4fd6;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 38px;
}

.ui-v2-inventory-copy,
.ui-v2-inventory-role {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ui-v2-inventory-copy p,
.ui-v2-inventory-copy small,
.ui-v2-inventory-role span {
  color: var(--muted, #64748b);
  line-height: 1.35;
  margin: 0;
}

.ui-v2-inventory-copy small {
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.ui-v2-inventory-role b {
  color: #087f5b;
  font-size: 12px;
}

.ui-v2-inventory-role[data-tone="warn"] b {
  color: #9a5b00;
}

.ui-v2-inventory-role[data-tone="blocked"] b {
  color: #b42318;
}

.ui-v2-inventory-role span {
  font-size: 12px;
}

.ui-v2-inventory-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.ui-v2-inventory-actions a,
.ui-v2-inventory-actions button,
.ui-v2-operation-links a,
.ui-v2-classify-table button {
  align-items: center;
  background: #f8fbff;
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: #0d326f;
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  height: auto;
  justify-content: center;
  line-height: 1.15;
  min-height: 34px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 5px 7px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

.ui-v2-inventory-actions button:disabled,
.ui-v2-classify-table button:disabled {
  background: #f1f5f9;
  color: #7b8798;
  cursor: not-allowed;
}

.ui-v2-operation-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, .72fr);
  min-width: 0;
}

.ui-v2-operation-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ui-v2-operation-row {
  align-items: center;
  background: var(--panel, #ffffff);
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  color: var(--text, #07152b);
  cursor: pointer;
  display: grid;
  gap: 9px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 10px;
  text-align: left;
}

.ui-v2-operation-row.is-selected {
  border-color: #1f5eff;
  box-shadow: 0 0 0 2px rgba(31, 94, 255, 0.14);
}

.ui-v2-operation-row small,
.ui-v2-operation-detail p,
.ui-v2-operation-facts span,
.ui-v2-operation-links span,
.ui-v2-classify-table small {
  color: var(--muted, #64748b);
}

.ui-v2-operation-row span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ui-v2-method {
  align-items: center;
  background: #e0f2fe;
  border-radius: 6px;
  color: #075985;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  justify-content: center;
  min-height: 28px;
}

.ui-v2-operation-detail {
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.ui-v2-operation-detail > header {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.ui-v2-operation-detail h4 {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.ui-v2-operation-facts {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.ui-v2-operation-facts article,
.ui-v2-operation-links > div {
  border: 1px solid #d8e2ef;
  border-radius: 7px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
}

.ui-v2-operation-facts span,
.ui-v2-operation-links span {
  overflow-wrap: anywhere;
}

.ui-v2-operation-links {
  display: grid;
  gap: 8px;
}

.ui-v2-operation-links a {
  justify-self: end;
  margin-top: 3px;
}

.ui-v2-api-classify.is-embedded {
  margin-top: 12px;
}

.ui-v2-classify-table {
  border-collapse: collapse;
  width: 100%;
}

.ui-v2-classify-table th,
.ui-v2-classify-table td {
  border-bottom: 1px solid #d8e2ef;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.ui-v2-classify-table th {
  background: var(--panel-muted, #eef4ff);
  color: var(--muted, #64748b);
  font-size: 12px;
  text-transform: uppercase;
}

.ui-v2-classify-table td {
  font-size: 13px;
}

.ui-v2-classify-table td:first-child {
  display: grid;
  gap: 2px;
}

.ui-v2-catalog .ui-v2-real-catalog-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  margin-top: 14px;
  padding: 16px;
}

.ui-v2-catalog-drill-card {
  margin-top: 14px;
}

.ui-v2-real-catalog-host {
  min-width: 0;
  overflow: auto;
}

.ui-v2-real-catalog-host .project-hub-panel {
  display: block;
  margin: 0;
  min-height: 120px;
  position: static;
  width: 100%;
}

.ui-v2-lifecycle-result {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  margin-top: 14px;
  padding: 16px;
}

.ui-v2-lifecycle-result h3,
.ui-v2-lifecycle-result p {
  margin: 0;
}

.ui-v2-lifecycle-result p {
  color: var(--muted, #64748b);
}

.ui-v2-lifecycle-panel-host {
  min-width: 0;
  overflow: auto;
}

.ui-v2-lifecycle-panel-host .project-hub-panel,
.ui-v2-lifecycle-panel-host .project-share-control {
  display: block;
  margin: 0;
  min-height: 48px;
  position: static;
  width: 100%;
}

.ui-v2-lifecycle-panel-host .project-hub-panel[hidden],
.ui-v2-lifecycle-panel-host .project-share-control[hidden] {
  display: none;
}

.ui-v2-lifecycle-panel-host .traceability-table-wrap {
  max-height: 360px;
  overflow: auto;
}

.ui-v2-empty-inline {
  border: 1px dashed var(--border, #c8d3e3);
  border-radius: 8px;
  color: var(--muted, #64748b);
  margin: 0;
  padding: 14px;
}

.ui-v2-next-actions button,
.ui-v2-next-actions a {
  background: #1f5eff;
  border: 1px solid #1f5eff;
  border-radius: 6px;
  color: #ffffff;
  display: inline-flex;
  font: inherit;
  font-weight: 900;
  justify-content: center;
  min-height: 42px;
  padding: 8px 14px;
  text-decoration: none;
}

.ui-v2-primary-link {
  background: #1f5eff;
  border: 1px solid #1f5eff;
  border-radius: 6px;
  color: #ffffff;
  display: inline-flex;
  font: inherit;
  font-weight: 900;
  justify-content: center;
  min-height: 42px;
  padding: 8px 14px;
  text-decoration: none;
}

.ui-v2-primary-link,
.ui-v2-secondary-link {
  justify-self: start;
  max-width: 100%;
  width: auto;
}

.ui-v2-secondary-link {
  align-items: center;
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--text, #07152b);
  display: inline-flex;
  font: inherit;
  font-weight: 900;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  text-decoration: none;
}

.ui-v2-list-toolbar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 12px;
}

.ui-v2-list-toolbar label {
  display: grid;
  gap: 6px;
}

.ui-v2-list-toolbar input {
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  min-height: 40px;
  padding: 8px 10px;
}

.ui-v2-trace-card {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin-top: 10px;
  padding: 12px;
}

.ui-v2-trace-card[data-severity="critical"] {
  border-color: #ef4444;
  box-shadow: inset 4px 0 0 #ef4444;
}

.ui-v2-trace-card strong {
  display: block;
  margin-bottom: 6px;
}

.ui-v2-trace-card p {
  margin: 0 0 8px;
}

.ui-v2-step-list {
  margin: 0;
  padding-left: 20px;
}

.ui-v2-step-list li {
  margin: 8px 0;
}

.ui-v2-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #9a3412;
  font-weight: 800;
  margin-top: 14px;
  padding: 12px;
}

.ui-v2-validation-ready,
.ui-v2-validation-pending {
  border-radius: 8px;
  font-weight: 800;
  margin: 12px 0;
  padding: 10px 12px;
}

.ui-v2-validation-ready {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #047857;
}

.ui-v2-validation-pending {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.ui-v2-clean-present {
  background: #ffffff;
  color: #0f172a;
  min-height: 100vh;
  padding: 28px;
}

.ui-v2-clean-stage {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1180px;
}

.ui-v2-clean-header {
  align-items: center;
  border-bottom: 1px solid #dbe4f0;
  display: flex;
  justify-content: space-between;
  padding-bottom: 18px;
}

.ui-v2-clean-header p {
  color: #53657f;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.ui-v2-clean-header h1 {
  font-size: 34px;
  line-height: 1.08;
  margin: 0;
}

.ui-v2-clean-header span {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #047857;
  font-weight: 900;
  padding: 8px 14px;
}

.ui-v2-clean-slide {
  border: 1px solid #d7e0ee;
  border-radius: 10px;
  min-height: 480px;
  padding: 26px;
}

.ui-v2-clean-slide h2 {
  font-size: 42px;
  line-height: 1.05;
  margin: 0 0 14px;
}

.ui-v2-clean-slide p {
  color: #334155;
  font-size: 22px;
  line-height: 1.35;
  max-width: 800px;
}

.ui-v2-clean-diagram {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 36px 0;
}

.ui-v2-clean-diagram span {
  align-items: center;
  border: 3px solid #0b69c7;
  border-radius: 10px;
  color: #075aa8;
  display: flex;
  font-size: 20px;
  font-weight: 900;
  justify-content: center;
  min-height: 110px;
  text-align: center;
}

.ui-v2-clean-slide footer {
  display: flex;
  gap: 12px;
}

.ui-v2-clean-slide button {
  background: #ffffff;
  border: 1px solid #b8c5d8;
  border-radius: 8px;
  font-weight: 900;
  min-height: 42px;
  padding: 8px 14px;
}

.ui-v2-clean-exit {
  align-items: center;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-weight: 900;
  min-height: 42px;
  padding: 8px 14px;
  text-decoration: none;
}

.ui-v2-live-present {
  padding: 18px;
}

.ui-v2-live-present .ui-v2-clean-stage {
  max-width: 1440px;
}

.ui-v2-live-present .ui-v2-clean-header {
  padding-bottom: 12px;
}

.ui-v2-live-present .ui-v2-clean-header h1 {
  font-size: 28px;
}

.ui-v2-live-slide {
  display: grid;
  gap: 12px;
  min-height: calc(100vh - 150px);
  padding: 14px;
}

.ui-v2-present-meta {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
}

.ui-v2-present-meta .ui-v2-eyebrow {
  margin: 0;
}

.ui-v2-live-slide h2 {
  font-size: 22px;
  margin: 0;
}

.ui-v2-live-slide p {
  font-size: 14px;
  line-height: 1.35;
  margin: 0;
  max-width: none;
}

.ui-v2-presentation-live-host {
  background: #ffffff;
  border: 1px solid #d7e0ee;
  border-radius: 10px;
  min-height: min(620px, calc(100vh - 285px));
  overflow: hidden;
}

body.ui-v2-active.is-presenting .ui-v2-presentation-live-host .diagram-shell {
  height: min(620px, calc(100vh - 285px));
  margin: 0;
  min-height: 420px;
}

body.ui-v2-active.is-presenting .ui-v2-presentation-live-host .canvas-toolbar,
body.ui-v2-active.is-presenting .ui-v2-presentation-live-host .toolbar,
body.ui-v2-active.is-presenting .ui-v2-presentation-live-host .topbar,
body.ui-v2-active.is-presenting .ui-v2-presentation-live-host .caption,
body.ui-v2-active.is-presenting .ui-v2-presentation-live-host .drill-pill-group,
body.ui-v2-active.is-presenting .ui-v2-presentation-live-host .drill-pill,
body.ui-v2-active.is-presenting .ui-v2-presentation-live-host .drill-pill-text,
.ui-v2-presentation-live-host .resize-handle,
.ui-v2-presentation-live-host .ui-v2-present-hidden-author-chrome {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.ui-v2-active.is-presenting .ui-v2-presentation-live-host #diagram {
  min-height: 420px;
}

.ui-v2-presentation-live-host .element:focus,
.ui-v2-presentation-live-host .element:focus-visible,
.ui-v2-presentation-live-host .relationship-selectable:focus,
.ui-v2-presentation-live-host .relationship-selectable:focus-visible {
  outline: none !important;
}

body.ui-v2-active.ui-v2-guard-active:not(.ui-v2-editor-active) .ui-v2-review .canvas-toolbar,
body.ui-v2-active.ui-v2-guard-active:not(.ui-v2-editor-active) .ui-v2-review .toolbar,
body.ui-v2-active.ui-v2-guard-active:not(.ui-v2-editor-active) .ui-v2-review .topbar,
body.ui-v2-active.ui-v2-guard-active:not(.ui-v2-editor-active) .ui-v2-review .caption,
body.ui-v2-active.ui-v2-guard-active:not(.ui-v2-editor-active) .ui-v2-review .drill-pill-group,
body.ui-v2-active.ui-v2-guard-active:not(.ui-v2-editor-active) .ui-v2-review .drill-pill,
body.ui-v2-active.ui-v2-guard-active:not(.ui-v2-editor-active) .ui-v2-review .drill-pill-text {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ui-v2-live-slide footer {
  align-items: center;
  flex-wrap: wrap;
}

.ui-v2-live-slide footer button,
.ui-v2-live-slide footer a {
  font-size: 14px;
  min-height: 38px;
  padding: 7px 12px;
}

.ui-v2-clean-caption {
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 16px;
}

.ui-v2-clean-caption p {
  margin: 6px 0 0;
}

.ui-v2-guidance {
  margin-top: 14px;
}

.ui-v2-guidance h3 {
  margin: 0 0 8px;
}

.ui-v2-guidance li {
  margin: 6px 0;
}

.ui-v2-guard-panel {
  margin-top: 20px;
}

.ui-v2-empty {
  background: var(--panel, #ffffff);
  border: 1px dashed var(--border, #c8d3e3);
  border-radius: 8px;
  grid-column: 1 / -1;
  padding: 24px;
}

.ui-v2-studio-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  margin-top: 16px;
}

.ui-v2-source .ui-v2-studio-grid {
  grid-template-columns: minmax(340px, 0.36fr) minmax(0, 1fr);
}

.ui-v2-source[data-source-nav-hidden="true"] .ui-v2-studio-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ui-v2-source[data-source-nav-hidden="true"] .ui-v2-source-list {
  display: none;
}

.ui-v2-source-commandbar,
.ui-v2-review-commandbar {
  align-items: center;
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
}

.ui-v2-source-commandbar button,
.ui-v2-review-commandbar button,
.ui-v2-meta-panel-head button,
.ui-v2-review-comments button {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--text, #07152b);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  min-height: 34px;
  padding: 7px 10px;
}

.ui-v2-review-commandbar button,
.ui-v2-meta-panel-head button:not(:disabled),
.ui-v2-review-comments button {
  background: #1f5eff;
  border-color: #1f5eff;
  color: #ffffff;
}

.ui-v2-review-commandbar button:disabled,
.ui-v2-review-comments button:disabled {
  background: var(--panel-muted, #eef4ff);
  border-color: var(--border, #c8d3e3);
  color: var(--muted, #64748b);
  cursor: default;
  opacity: 0.76;
}

.ui-v2-meta-panel-head button:disabled {
  cursor: default;
  opacity: 0.55;
}

.ui-v2-review-commandbar label {
  align-items: center;
  display: flex;
  gap: 8px;
}

.ui-v2-review-commandbar label span {
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 850;
}

.ui-v2-agent .ui-v2-studio-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.55fr);
}

.ui-v2-agent .ui-v2-work-surface,
.ui-v2-agent .ui-v2-inspector {
  min-width: 0;
}

.ui-v2-agent-gates article {
  min-width: 0;
}

.ui-v2-agent-gates strong {
  font-size: 24px;
}

.ui-v2-agent-diff pre {
  background: #0f172a;
  border-radius: 8px;
  color: #dbeafe;
  font-size: 14px;
  line-height: 1.45;
  margin: 12px 0;
  min-height: 120px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.ui-v2-author-studio-grid {
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1.8fr) minmax(300px, 0.52fr);
}

.ui-v2-author[data-navigator-collapsed="true"][data-inspector-collapsed="true"] .ui-v2-author-studio-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ui-v2-author[data-navigator-collapsed="true"][data-inspector-collapsed="false"] .ui-v2-author-studio-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.45fr);
}

.ui-v2-author[data-navigator-collapsed="false"][data-inspector-collapsed="true"] .ui-v2-author-studio-grid {
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
}

.ui-v2-author[data-navigator-collapsed="true"] .ui-v2-author-navigator,
.ui-v2-author[data-inspector-collapsed="true"] .ui-v2-real-inspector-card {
  display: none;
}

.ui-v2-work-surface,
.ui-v2-inspector,
.ui-v2-source-list,
.ui-v2-author-navigator,
.ui-v2-editor-frame,
.ui-v2-comments {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  padding: 18px;
}

.ui-v2-work-surface h3,
.ui-v2-inspector h3,
.ui-v2-editor-frame h3 {
  margin: 4px 0 8px;
}

.ui-v2-mini-canvas {
  align-items: center;
  background: var(--panel-muted, #eef4ff);
  border: 1px dashed var(--border-strong, #8aa0c2);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 220px;
  padding: 18px;
}

.ui-v2-mini-canvas span {
  background: #ffffff;
  border: 2px solid #1469c9;
  border-radius: 8px;
  color: #0754a6;
  font-weight: 900;
  min-height: 84px;
  padding: 18px;
  text-align: center;
}

.ui-v2-real-workbench-card {
  min-width: 0;
}

.ui-v2-author-navigator {
  min-width: 0;
}

.ui-v2-author-navigator h3 {
  margin: 4px 0 8px;
}

.ui-v2-author-navigator p:not(.ui-v2-eyebrow) {
  color: var(--muted, #64748b);
  margin: 0 0 12px;
}

.ui-v2-real-navigator-host {
  display: grid;
  gap: 10px;
}

.ui-v2-real-navigator-host .ui-v2-workbench-loading {
  min-height: 180px;
}

.ui-v2-navigator-search {
  display: grid;
}

.ui-v2-navigator-search #explorerSearchInput {
  width: 100%;
}

.ui-v2-real-navigator-host .workspace-tree {
  max-height: min(640px, calc(100vh - 340px));
}

body.ui-v2-active.ui-v2-editor-active #newProjectMenu,
body.ui-v2-active.ui-v2-editor-active #projectListImportBtn,
body.ui-v2-active.ui-v2-editor-active #projectListImportPanel,
body.ui-v2-active.ui-v2-editor-active #emptyCreateProjectBtn,
body.ui-v2-active.ui-v2-editor-active #emptyImportProjectBtn {
  display: none !important;
}

.ui-v2-real-workbench-host {
  min-height: min(780px, calc(100vh - 230px));
  overflow: hidden;
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  background: var(--surface, #ffffff);
}

.ui-v2-real-workbench-host .diagram-shell {
  height: min(780px, calc(100vh - 230px));
  min-height: 620px;
  border: 0;
}

.ui-v2-real-workbench-host .canvas-toolbar {
  position: relative;
  z-index: 3;
}

.ui-v2-author-relationship-hint {
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 750;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v2-editor-strip .ui-v2-author-relationship-hint {
  flex: 0 1 290px;
}

.ui-v2-share-guidance {
  color: #0754a6;
  font-size: 14px;
  font-weight: 800;
  margin-top: 8px;
}

.ui-v2-real-workbench-host .ui-v2-legacy-toolbar-reconciled,
.ui-v2-real-workbench-host .ui-v2-legacy-toolbar-divider-reconciled {
  display: none;
}

.ui-v2-real-inspector-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  min-width: 320px;
  padding: 0;
}

.ui-v2-real-inspector-card > .ui-v2-eyebrow {
  padding: 16px 16px 0;
}

.ui-v2-real-inspector-host {
  min-height: min(720px, calc(100vh - 260px));
  overflow: auto;
}

.ui-v2-real-inspector-host .right-panel {
  display: grid;
  min-height: min(720px, calc(100vh - 260px));
  border-left: 0;
  background: transparent;
}

.ui-v2-workbench-loading {
  display: grid;
  min-height: 360px;
  place-items: center;
  color: var(--muted, #64748b);
  font-weight: 800;
}

.ui-v2-real-source-studio-host {
  transform: scale(var(--ui-v2-source-preview-scale, 1));
  transform-origin: top left;
  width: calc(100% / var(--ui-v2-source-preview-scale, 1));
}

#uiV2WorkbenchStatus[data-tone="ok"] {
  color: #156a3b;
}

#uiV2WorkbenchStatus[data-tone="warn"],
#uiV2WorkbenchStatus[data-tone="error"] {
  color: #a16207;
}

.ui-v2-inspector dl {
  display: grid;
  gap: 8px;
  grid-template-columns: 96px minmax(0, 1fr);
}

.ui-v2-inspector dt {
  color: var(--muted, #64748b);
  font-weight: 800;
}

.ui-v2-inspector dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ui-v2-inspector button,
.ui-v2-comments button,
.ui-v2-source-list button {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  font: inherit;
  font-weight: 850;
  min-height: 38px;
  padding: 8px 10px;
}

.ui-v2-inspector button:not(:disabled),
.ui-v2-comments button {
  background: #1f5eff;
  border-color: #1f5eff;
  color: #ffffff;
}

.ui-v2-source-list {
  display: grid;
  gap: 8px;
  align-content: start;
  max-height: min(760px, calc(100vh - 230px));
  overflow: auto;
}

.ui-v2-source-list button {
  background: var(--panel, #ffffff);
  display: grid;
  gap: 8px;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  line-height: 1.25;
  min-height: 44px;
  max-height: 64px;
  text-align: left;
}

.ui-v2-source-list button.is-active {
  border-color: #1f5eff;
  color: #0754a6;
}

.ui-v2-source-list button .ui-v2-source-kind {
  display: inline-block;
  color: inherit;
  font-size: 11px;
  font-weight: 900;
  opacity: 0.75;
  text-transform: uppercase;
}

.ui-v2-source-list button .ui-v2-source-path-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ui-v2-source-list button .ui-v2-source-path-label strong,
.ui-v2-source-list button .ui-v2-source-path-label small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v2-source-list button .ui-v2-source-path-label strong {
  color: var(--text, #07142e);
  font-size: 13px;
  font-weight: 900;
}

.ui-v2-source-list button .ui-v2-source-path-label small {
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 750;
}

.ui-v2-source-list button.is-active .ui-v2-source-path-label strong {
  color: #0754a6;
}

.ui-v2-real-source-card {
  min-width: 0;
  padding: 0;
}

.ui-v2-share-explainer {
  background: var(--panel-muted, #eef4ff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 6px;
  color: var(--muted, #64748b);
  font-size: 14px;
  font-weight: 750;
  margin: 0 0 12px;
  padding: 10px 12px;
}

.ui-v2-real-source-studio-host {
  min-height: min(760px, calc(100vh - 230px));
  overflow: hidden;
}

.ui-v2-real-source-studio-host #sourceStudio {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: var(--space-3, 12px);
  height: min(820px, calc(100vh - 210px));
  padding: 0;
  box-sizing: border-box;
}

.ui-v2-real-source-studio-host .ss-body {
  min-height: min(560px, calc(100vh - 360px));
}

.ui-v2-real-source-studio-host .ss-preview {
  min-height: 320px;
}

.ui-v2-real-source-studio-host .ss-preview svg {
  display: block;
  height: auto;
  max-height: min(520px, calc(100vh - 390px));
  max-width: 100%;
  min-height: 260px;
  width: 100%;
}

.ui-v2-review-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ui-v2-review-engine-card,
.ui-v2-real-traceability-card,
.ui-v2-real-presentation-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  min-width: 0;
  padding: 18px;
}

.ui-v2-real-review-host {
  min-height: min(720px, calc(100vh - 260px));
}

.ui-v2-view-switcher {
  align-items: center;
  background: var(--panel-muted, #eef4ff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 8px 0 10px;
  padding: 8px 10px;
}

.ui-v2-view-switcher-main {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
}

.ui-v2-view-switcher label {
  align-items: center;
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 180px;
}

.ui-v2-view-switcher label span,
.ui-v2-view-switcher-counter,
.ui-v2-view-switcher-empty span {
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 850;
}

.ui-v2-view-switcher select {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 7px;
  font-size: 13px;
  min-height: 32px;
  min-width: 0;
  padding: 5px 8px;
}

.ui-v2-view-switcher button {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 7px;
  font-weight: 850;
  min-height: 32px;
  padding: 5px 10px;
  white-space: nowrap;
}

.ui-v2-view-switcher-empty {
  display: grid;
  gap: 2px;
}

body.ui-v2-active .ui-v2-real-review-host #reviewSlot {
  background: transparent;
  border-left: 0;
  bottom: auto;
  display: flex !important;
  left: auto;
  padding: 0;
  position: static;
  right: auto;
  top: auto;
  width: 100%;
  max-width: 100%;
  z-index: auto;
}

body.ui-v2-active.is-reviewing .ui-v2-real-workbench-host .diagram-shell {
  margin-right: 0;
}

body.ui-v2-active .ui-v2-real-review-host .rv-grid {
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
}

body.ui-v2-active .ui-v2-real-review-host .rv-grid dd {
  overflow-wrap: anywhere;
  word-break: normal;
}

body.ui-v2-active .ui-v2-real-review-host .rv-actions {
  flex-wrap: wrap;
  align-items: center;
}

body.ui-v2-active .ui-v2-real-review-host .rv-actions button {
  flex: 0 1 auto;
  min-height: 40px;
  max-height: 48px;
  max-width: 220px;
  min-width: 0;
  padding: 8px 12px;
  white-space: nowrap;
}

.ui-v2-real-traceability-host .project-hub-panel,
.ui-v2-real-presentation-host {
  min-height: 260px;
}

.ui-v2-real-traceability-host .project-hub-panel {
  border: 0;
  margin: 0;
  padding: 0;
}

.ui-v2-traceability-guide {
  align-items: stretch;
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  padding: 14px;
}

.ui-v2-traceability-guide strong {
  color: var(--text, #0f172a);
  font-size: 15px;
}

.ui-v2-traceability-guide p {
  color: var(--muted, #64748b);
  margin: 5px 0 0;
}

.ui-v2-traceability-controls {
  display: grid;
  gap: 8px;
}

.ui-v2-traceability-controls input {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  font-size: 14px;
  min-height: 36px;
  padding: 7px 10px;
}

.ui-v2-traceability-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ui-v2-traceability-filter-row button {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  min-height: 30px;
  padding: 5px 9px;
}

.ui-v2-traceability-filter-row button.is-active {
  background: #eaf2ff;
  border-color: #8bbcff;
  color: #075aa8;
}

#uiV2TraceabilityFilterStatus {
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 850;
}

.ui-v2-trace-depth {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ui-v2-trace-depth-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.ui-v2-trace-depth-card-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.ui-v2-trace-depth-card-head h3 {
  font-size: 18px;
  line-height: 1.15;
  margin: 2px 0 4px;
}

.ui-v2-trace-depth-card-head p {
  color: var(--muted, #64748b);
  margin: 0;
}

.ui-v2-trace-depth-metrics,
.ui-v2-trace-policy-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-v2-trace-depth-metric,
.ui-v2-trace-policy-metrics article {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}

.ui-v2-trace-depth-metric.is-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.ui-v2-trace-depth-metric.is-warn {
  background: #fff7ed;
  border-color: #fed7aa;
}

.ui-v2-trace-depth-metric strong,
.ui-v2-trace-policy-metrics strong {
  font-size: 24px;
  line-height: 1;
}

.ui-v2-trace-depth-metric span,
.ui-v2-trace-policy-metrics span,
.ui-v2-trace-depth-metric small {
  overflow-wrap: anywhere;
}

.ui-v2-trace-depth-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-v2-trace-depth-filters span,
.ui-v2-trace-state {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 999px;
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 850;
  padding: 5px 8px;
  white-space: nowrap;
}

.ui-v2-trace-depth-rows,
.ui-v2-trace-policy-list,
.ui-v2-trace-impact-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ui-v2-trace-depth-row,
.ui-v2-trace-policy-row {
  align-items: center;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 72px minmax(0, 1fr) minmax(92px, max-content) minmax(180px, max-content);
  min-width: 0;
  padding: 10px;
}

.ui-v2-trace-depth-row.is-uncovered,
.ui-v2-trace-depth-row.is-ambiguous,
.ui-v2-trace-depth-row.is-deprecated,
.ui-v2-trace-depth-row.is-partial {
  background: #fff7ed;
  border-color: #fed7aa;
}

.ui-v2-trace-kind {
  align-items: center;
  background: #dbeafe;
  border: 1px solid #aac4ff;
  border-radius: 8px;
  color: #0f4fd6;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 34px;
}

.ui-v2-trace-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ui-v2-trace-row-main strong,
.ui-v2-trace-row-main span,
.ui-v2-trace-row-main small,
.ui-v2-trace-impact-row strong,
.ui-v2-trace-impact-row span,
.ui-v2-trace-impact-row small {
  overflow-wrap: anywhere;
}

.ui-v2-trace-row-main small,
.ui-v2-trace-impact-row small,
.ui-v2-trace-policy-row small {
  color: var(--muted, #64748b);
}

.ui-v2-trace-state.is-covered,
.ui-v2-trace-state.is-ok {
  background: #dcfce7;
  border-color: #86efac;
  color: #047857;
}

.ui-v2-trace-state.is-uncovered,
.ui-v2-trace-state.is-warn,
.ui-v2-trace-state.is-partial,
.ui-v2-trace-state.is-ambiguous,
.ui-v2-trace-state.is-deprecated {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.ui-v2-trace-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.ui-v2-trace-row-actions button,
.ui-v2-trace-policy-row button,
.ui-v2-trace-impact-row button,
.ui-v2-trace-waiver-table button {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 850;
  min-height: 32px;
  padding: 5px 9px;
  white-space: nowrap;
}

.ui-v2-trace-depth-two-col {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ui-v2-trace-policy-row {
  grid-template-columns: 88px minmax(0, 1fr) minmax(150px, max-content);
}

.ui-v2-trace-policy-row > span {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  min-height: 34px;
  padding: 6px 8px;
}

.ui-v2-trace-policy-row.is-clean > span {
  background: #dcfce7;
  color: #047857;
}

.ui-v2-trace-policy-row.is-block > span,
.ui-v2-trace-policy-row.is-warn > span {
  background: #fef3c7;
  color: #92400e;
}

.ui-v2-trace-waiver-table-wrap {
  overflow-x: auto;
}

.ui-v2-trace-waiver-table {
  border-collapse: collapse;
  width: 100%;
}

.ui-v2-trace-waiver-table th,
.ui-v2-trace-waiver-table td {
  border-bottom: 1px solid #d8e2ef;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

.ui-v2-trace-waiver-table th {
  background: var(--panel-muted, #eef4ff);
  color: var(--muted, #64748b);
  font-size: 12px;
  text-transform: uppercase;
}

.ui-v2-trace-impact-picker {
  display: grid;
  gap: 5px;
}

.ui-v2-trace-impact-picker span {
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.ui-v2-trace-impact-picker select {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  min-height: 38px;
  padding: 7px 10px;
}

.ui-v2-trace-impact-detail {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
}

.ui-v2-trace-impact-detail > article,
.ui-v2-trace-impact-row {
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
}

.ui-v2-trace-role-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-v2-trace-role-grid article {
  border-left: 4px solid #1f5eff;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-left: 10px;
}

.ui-v2-trace-role-grid article:first-child {
  border-left-color: #087f5b;
}

.ui-v2-trace-role-grid article:nth-child(2) {
  border-left-color: #9a5b00;
}

.ui-v2-trace-role-grid span {
  color: var(--muted, #64748b);
}

.ui-v2-trace-depth-nonclaim {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #7c2d12;
  font-weight: 850;
  padding: 12px 14px;
}

@media (max-width: 900px) {
  .ui-v2-home-hero,
  .ui-v2-home-grid,
  .ui-v2-review-task-grid,
  .ui-v2-review-guide,
  .ui-v2-review-honesty,
  .ui-v2-pitch-header,
  .ui-v2-pitch-pack,
  .ui-v2-pitch-diagram {
    grid-template-columns: 1fr;
  }

  .ui-v2-pitch-header {
    align-items: flex-start;
    display: grid;
  }

  .ui-v2-home-hero h2,
  .ui-v2-pitch-header h2,
  .ui-v2-pitch-summary h3 {
    font-size: 28px;
  }

  .ui-v2-trace-depth-card-head,
  .ui-v2-trace-depth-two-col,
  .ui-v2-trace-impact-detail,
  .ui-v2-trace-role-grid {
    grid-template-columns: 1fr;
  }

  .ui-v2-trace-depth-card-head {
    display: grid;
  }

  .ui-v2-trace-depth-metrics,
  .ui-v2-trace-policy-metrics {
    grid-template-columns: 1fr;
  }

  .ui-v2-trace-depth-row,
  .ui-v2-trace-policy-row {
    grid-template-columns: 1fr;
  }

  .ui-v2-trace-row-actions {
    justify-content: flex-start;
  }
}

.ui-v2-presentation-pitch {
  background: #ffffff;
  color: #0f172a;
  min-height: calc(100vh - 60px);
}

.ui-v2-pitch-header {
  align-items: center;
  border-bottom: 1px solid #dbe4f0;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 10px 0 18px;
}

.ui-v2-pitch-header h2 {
  font-size: 38px;
  line-height: 1.08;
  margin: 4px 0 6px;
}

.ui-v2-pitch-header p:not(.ui-v2-eyebrow) {
  color: #334155;
  line-height: 1.4;
  margin: 0;
}

.ui-v2-pitch-card {
  border: 1px solid #d7e0ee;
  border-radius: 8px;
  margin-top: 26px;
  padding: 28px;
}

.ui-v2-pitch-pack {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.ui-v2-pitch-sequence {
  align-content: start;
  display: grid;
  gap: 10px;
}

.ui-v2-pitch-sequence span {
  background: #f8fafc;
  border: 1px solid #d7e0ee;
  border-radius: 8px;
  color: #475569;
  font-weight: 850;
  line-height: 1.3;
  padding: 12px;
}

.ui-v2-pitch-sequence span.is-active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
}

.ui-v2-pitch-summary h3 {
  font-size: 40px;
  line-height: 1.08;
  margin: 4px 0 12px;
}

.ui-v2-pitch-summary p:not(.ui-v2-eyebrow) {
  color: #334155;
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
  max-width: 860px;
}

.ui-v2-pitch-diagram {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px 0;
}

.ui-v2-pitch-diagram span {
  align-items: center;
  border: 3px solid #0b69c7;
  border-radius: 10px;
  color: #075aa8;
  display: flex;
  font-size: 18px;
  font-weight: 900;
  justify-content: center;
  min-height: 96px;
  padding: 14px;
  text-align: center;
}

.ui-v2-pitch-real-diagram {
  align-items: stretch;
  border: 2px solid #b7cdf0;
  border-radius: 10px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 28px 0 16px;
  padding: 18px;
}

.ui-v2-pitch-real-diagram article {
  align-content: center;
  border: 3px solid #0b69c7;
  border-radius: 10px;
  color: #075aa8;
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 18px;
  text-align: center;
}

.ui-v2-pitch-real-diagram article.is-external {
  border-color: #c1121f;
  color: #b91c1c;
}

.ui-v2-pitch-real-diagram strong {
  font-size: 18px;
  line-height: 1.2;
}

.ui-v2-pitch-real-diagram span {
  color: inherit;
  font-size: 12px;
  font-weight: 850;
  opacity: .78;
  text-transform: uppercase;
}

.ui-v2-pitch-real-diagram.is-empty {
  align-items: center;
  color: #64748b;
  min-height: 140px;
}

.ui-v2-pitch-caption-note {
  background: #eff6ff;
  border-left: 5px solid #0b69c7;
  border-radius: 8px;
  color: #24364d;
  font-size: 16px !important;
  font-weight: 700;
  margin: 0 0 18px !important;
  padding: 14px;
}

.ui-v2-pitch-nonclaim {
  color: #64748b;
  font-weight: 750;
  margin: 14px 0 0;
}

.ui-v2-presentation-pack {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.ui-v2-presentation-pack .ui-v2-primary-link {
  max-width: 280px;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  body.ui-v2-active *,
  body.ui-v2-active *::before,
  body.ui-v2-active *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

.ui-v2-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-v2-badge-row span,
.ui-v2-comment span {
  background: var(--panel-muted, #eef4ff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 999px;
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 850;
  padding: 5px 8px;
}

.ui-v2-editor-frame pre {
  background: #07152b;
  border-radius: 8px;
  color: #dbeafe;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.ui-v2-comments {
  display: grid;
  gap: 10px;
}

.ui-v2-review-comments {
  margin-top: 12px;
}

.ui-v2-control-reason {
  color: var(--muted, #64748b);
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 6px;
}

.ui-v2-control-reason.is-ready {
  color: var(--ok, #047857);
}

.ui-v2-comments-head {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.ui-v2-comments-head strong {
  display: block;
  margin-top: 2px;
}

.ui-v2-comments-head > span {
  background: var(--panel-muted, #eef4ff);
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 999px;
  color: var(--muted, #64748b);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
  padding: 5px 8px;
}

.ui-v2-comment-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.ui-v2-review-comments [data-ui-v2-review-comment-add] {
  justify-self: start;
  min-width: 120px;
  width: auto;
}

.ui-v2-comment {
  border: 1px solid var(--border, #c8d3e3);
  border-radius: 8px;
  padding: 12px;
}

.ui-v2-comment strong {
  display: block;
  margin-bottom: 6px;
}

.ui-v2-comment p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.ui-v2-comment[data-anchor-status="missing"] {
  border-color: #f6c6c6;
}

@media (max-width: 900px) {
  .ui-v2-topbar,
  .ui-v2-search-band,
  .ui-v2-author-state {
    grid-template-columns: 1fr;
  }

  .ui-v2-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-v2-lifecycle-panel,
  .ui-v2-governance-panel,
  .ui-v2-lifecycle-result {
    grid-template-columns: 1fr;
  }

  .ui-v2-lifecycle-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-v2-capability-row {
    grid-template-columns: 1fr;
  }

  .ui-v2-project-inventory-head,
  .ui-v2-project-inventory-grid,
  .ui-v2-operation-browser > header,
  .ui-v2-operation-grid,
  .ui-v2-operation-detail > header,
  .ui-v2-api-classify > header {
    grid-template-columns: 1fr;
  }

  .ui-v2-project-inventory-badges {
    justify-content: flex-start;
  }

  .ui-v2-inventory-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .ui-v2-inventory-role,
  .ui-v2-inventory-actions {
    grid-column: 1 / -1;
  }

  .ui-v2-operation-facts {
    grid-template-columns: 1fr;
  }

  .ui-v2-studio-grid,
  .ui-v2-mini-canvas,
  .ui-v2-handoff-grid,
  .ui-v2-handoff-card {
    grid-template-columns: 1fr;
  }

  .ui-v2-handoff-actions {
    justify-content: flex-start;
  }
}