:root {
  color-scheme: light;
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  --color-primary-500: #0f766e;
  --color-primary-600: #0d5f59;
  --color-primary-50: #e6f4f3;
  --color-primary-200: #a7d7d2;
  --color-info-500: #0e7490;
  --color-success-500: #22c55e;
  --color-warning-500: #f59e0b;
  --color-danger-500: #ef4444;
  --color-surface-0: #ffffff;
  --color-surface-50: #f6f8fc;
  --color-surface-100: #eef2f8;
  --color-surface-200: #e3eaf4;
  --color-surface-300: #cfd9e7;
  --color-text-900: #0f172a;
  --color-text-700: #334155;
  --color-text-500: #64748b;
  --color-text-300: #94a3b8;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.14);
}

.tax-exemptions-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: calc(100dvh - 132px);
  min-height: 0;
  overflow: hidden;
}

.tax-exemptions-shell__pinned {
  border-bottom: 1px solid var(--color-surface-200);
  display: grid;
  flex: 0 0 auto;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.tax-exemptions-toolbar,
.tax-exemptions-filters,
.tax-exemptions-actions {
  align-items: end;
  display: flex;
  gap: var(--space-3);
}

.tax-exemptions-toolbar {
  margin-bottom: var(--space-2);
  justify-content: space-between;
}

.ds-subtabs,
.tax-exemptions-primary-tabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ds-subtab,
.tax-exemptions-primary-tab {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-700);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--space-4);
}

.ds-subtab--active,
.tax-exemptions-primary-tab--active {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}

.tax-exemptions-tabs {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
}

.segmented-button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-700);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  min-height: 34px;
  padding: 0 var(--space-3);
}

.segmented-button--active {
  background: var(--color-surface-0);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary-600);
}

.tax-exemptions-filters {
  flex-wrap: wrap;
}

.field--compact {
  min-width: 150px;
}

.field--compact input,
.field--compact select {
  min-height: 38px;
}

.tax-exemptions-workspace {
  display: grid;
  flex: 0 1 auto;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.tax-exemptions-panel {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-5);
}

.tax-exemptions-panel__header {
  align-items: start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.tax-exemptions-panel__header h2 {
  font-size: var(--text-xl);
  margin: 0;
}

.tax-exemptions-panel__header .tax-exemptions-actions {
  align-self: start;
  flex: 0 0 auto;
  justify-content: flex-end;
}

.tax-exemptions-table-card {
  min-height: 0;
  overflow: hidden;
}

.tax-exemptions-table-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

.tax-exemptions-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.tax-exemptions-table {
  table-layout: fixed;
}

.tax-exemptions-table th {
  overflow-wrap: normal;
  white-space: nowrap;
}

.tax-exemptions-table td {
  overflow-wrap: anywhere;
}

.tax-exemptions-table th,
.tax-exemptions-table td {
  padding-left: 10px;
  padding-right: 10px;
}

.tax-exemptions-table td:nth-child(4),
.tax-exemptions-table td:nth-child(5) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tax-exemptions-table th:nth-child(1),
.tax-exemptions-table td:nth-child(1) {
  width: 27%;
}

.tax-exemptions-table th:nth-child(2),
.tax-exemptions-table td:nth-child(2) {
  width: 17%;
}

.tax-exemptions-table th:nth-child(3),
.tax-exemptions-table td:nth-child(3) {
  width: 8%;
}

.tax-exemptions-table th:nth-child(4),
.tax-exemptions-table td:nth-child(4) {
  width: 16%;
}

.tax-exemptions-table th:nth-child(5),
.tax-exemptions-table td:nth-child(5) {
  width: 17%;
}

.tax-exemptions-table th:nth-child(6),
.tax-exemptions-table td:nth-child(6) {
  width: 15%;
}

.tax-exemptions-table td.table-actions {
  display: table-cell;
  padding-right: 28px;
  text-align: right;
  white-space: nowrap;
}

.tax-exemptions-table td.table-actions .ghost-button--compact {
  min-width: 0;
}

.tax-exemptions-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
  position: relative;
  right: 8px;
  width: max-content;
}

.page .tax-exemptions-row-actions .ghost-button--compact,
.page .tax-exemptions-row-actions .danger-button {
  min-height: 22px;
  min-width: 0;
  padding: 3px 9px;
  font-size: var(--text-xs);
  line-height: 1;
  white-space: nowrap;
}

.data-table {
  border-collapse: collapse;
  width: 100%;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--color-surface-200);
  padding: var(--space-3);
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  background: var(--color-surface-0);
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 800;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 2;
}

.tax-exemptions-row {
  cursor: pointer;
}

.tax-exemptions-row:hover,
.tax-exemptions-row--selected {
  background: var(--color-primary-50);
}

.tax-exemptions-row strong,
.tax-exemptions-row .meta {
  display: block;
}

.status-pill {
  align-items: center;
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 800;
  min-height: 24px;
  padding: 0 var(--space-2);
  white-space: nowrap;
}

.status-pill--success {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}

.status-pill--warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.status-pill--danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.status-pill--neutral {
  background: var(--color-surface-100);
  color: var(--color-text-700);
}

.tax-exemptions-pagination {
  border-top: 1px solid var(--color-surface-200);
  flex: 0 0 auto;
  margin-top: var(--space-2);
  padding: var(--space-3) 0 0;
}

.tax-exemptions-empty {
  align-content: center;
  display: grid;
  min-height: 220px;
  text-align: center;
}

.tax-detail-header,
.tax-detail-status-card,
.tax-detail-status-card__actions,
.tax-document-row,
.tax-action-buttons,
.modal-card__header {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.tax-detail-status-card {
  align-items: flex-start;
  background: linear-gradient(180deg, var(--color-surface-0) 0%, var(--color-surface-50) 100%);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.tax-detail-status-card__copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.tax-detail-status-card__copy h2 {
  font-size: var(--text-xl);
  line-height: 1.15;
  margin: 0;
  overflow-wrap: anywhere;
}

.tax-detail-status-card__actions {
  flex: 0 0 auto;
  gap: var(--space-2);
}

.tax-detail-header h2 {
  font-size: var(--text-xl);
  margin: 0;
}

.tax-detail-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin: 0;
  min-width: 0;
}

.tax-detail-grid dt {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.tax-detail-grid dd {
  color: var(--color-text-900);
  font-weight: 700;
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.tax-detail-grid--compact {
  grid-template-columns: 1fr;
}

.tax-detail-section {
  border-top: 1px solid var(--color-surface-200);
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.tax-detail-section h3 {
  font-size: var(--text-lg);
  margin: 0;
}

.tax-detail-disclosure {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  min-width: 0;
  overflow: hidden;
}

.tax-detail-disclosure summary {
  align-items: center;
  color: var(--color-text-900);
  cursor: pointer;
  display: flex;
  font-weight: 800;
  gap: var(--space-3);
  justify-content: space-between;
  list-style: none;
  padding: var(--space-3) var(--space-4);
}

.tax-detail-disclosure summary::-webkit-details-marker {
  display: none;
}

.tax-detail-disclosure summary .ui-icon {
  color: var(--color-text-500);
  flex: 0 0 auto;
  height: 16px;
  transition: transform 160ms ease;
  width: 16px;
}

.tax-detail-disclosure[open] summary .ui-icon {
  transform: rotate(180deg);
}

.tax-detail-disclosure__body {
  border-top: 1px solid var(--color-surface-200);
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
}

.tax-section-heading {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.tax-review-layout {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  min-width: 0;
}

.tax-detail-content {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.tax-review-layout *,
.tax-detail-content * {
  min-width: 0;
}

.tax-review-layout__left,
.tax-review-layout__right {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.tax-preview-frame {
  align-items: center;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: center;
  min-height: 240px;
  overflow: hidden;
  position: relative;
}

.tax-preview-media {
  border: 0;
  height: 300px;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.tax-preview-frame--focused {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 24%, transparent);
}

.tax-preview-focus {
  background: color-mix(in oklab, var(--color-primary-50) 72%, white);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.tax-preview-focus[hidden] {
  display: none;
}

.tax-document-row {
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.tax-document-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

.tax-document-row strong,
.tax-document-row .meta {
  overflow-wrap: anywhere;
}

.tax-extracted-table {
  font-size: var(--text-sm);
  table-layout: fixed;
}

.tax-detail-content--modal .tax-extracted-table,
.tax-detail-content--modal .tax-extracted-table thead,
.tax-detail-content--modal .tax-extracted-table tbody,
.tax-detail-content--modal .tax-extracted-table tr,
.tax-detail-content--modal .tax-extracted-table th,
.tax-detail-content--modal .tax-extracted-table td {
  display: block;
  width: 100%;
}

.tax-detail-content--modal .tax-extracted-table thead {
  display: none;
}

.tax-detail-content--modal .tax-extracted-table tr {
  border-bottom: 1px solid var(--color-surface-200);
  padding: var(--space-2) 0;
}

.tax-detail-content--modal .tax-extracted-table td {
  border-bottom: 0;
  padding: var(--space-1) 0;
}

.tax-detail-content--modal .tax-extracted-table td:first-child {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.tax-extracted-table th,
.tax-extracted-table td {
  overflow-wrap: anywhere;
  vertical-align: top;
}

.tax-evidence-chip {
  margin-right: var(--space-2);
}

.tax-evidence-quote {
  display: block;
  margin-top: var(--space-1);
}

.tax-help-panel {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.tax-help-panel--embedded {
  border-top: 1px solid var(--color-surface-200);
}

.tax-help-panel summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 800;
  gap: var(--space-3);
  justify-content: space-between;
}

.tax-evidence-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}

.tax-reason-dictionary,
.tax-audit-timeline {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}

.tax-reason-dictionary li,
.tax-audit-timeline li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tax-reason-dictionary {
  gap: var(--space-3);
  list-style: none;
  padding-left: 0;
}

.tax-reason-dictionary li {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.tax-reason-dictionary strong,
.tax-audit-timeline strong {
  display: block;
}

.tax-reason-dictionary strong {
  line-height: 1.35;
}

.tax-reason-dictionary .meta {
  line-height: 1.5;
}

.tax-evidence-list li,
.tax-help-panel,
.tax-preview-focus {
  overflow-wrap: anywhere;
}

.tax-action-panel .field {
  margin: 0;
}

.tax-action-panel {
  display: grid;
  gap: var(--space-3);
}

.tax-action-panel textarea,
.tax-audit-bundle textarea,
.tax-governance__form textarea,
.tax-exemptions-form textarea {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-300);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font: inherit;
  line-height: 1.45;
  min-height: 96px;
  padding: var(--space-3);
  resize: vertical;
}

.tax-action-panel textarea::placeholder,
.tax-audit-bundle textarea::placeholder,
.tax-governance__form textarea::placeholder,
.tax-exemptions-form textarea::placeholder {
  color: var(--color-text-300);
}

.tax-action-buttons {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.modal-backdrop {
  align-items: center;
  background: rgba(15, 23, 42, 0.42);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-5);
  position: fixed;
  z-index: 1400;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.tax-exemptions-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: min(820px, calc(100dvh - 48px));
  max-width: 760px;
  overflow: hidden;
  width: min(760px, 100%);
}

.tax-exemptions-modal > .modal-card__header {
  flex: 0 0 auto;
  min-height: 0;
}

.tax-exemptions-modal > .tax-exemptions-form,
.tax-exemptions-modal > .tax-exemptions-reporting,
.tax-exemptions-modal > .tax-governance,
.tax-exemptions-modal > .tax-audit-bundle,
.tax-exemptions-modal > .tax-exemptions-detail-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: var(--space-3);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.tax-exemptions-modal > .tax-exemptions-form::-webkit-scrollbar,
.tax-exemptions-modal > .tax-exemptions-reporting::-webkit-scrollbar,
.tax-exemptions-modal > .tax-governance::-webkit-scrollbar,
.tax-exemptions-modal > .tax-audit-bundle::-webkit-scrollbar,
.tax-exemptions-modal > .tax-exemptions-detail-modal__body::-webkit-scrollbar {
  width: 8px;
}

.tax-exemptions-modal > .tax-exemptions-form::-webkit-scrollbar-track,
.tax-exemptions-modal > .tax-exemptions-reporting::-webkit-scrollbar-track,
.tax-exemptions-modal > .tax-governance::-webkit-scrollbar-track,
.tax-exemptions-modal > .tax-audit-bundle::-webkit-scrollbar-track,
.tax-exemptions-modal > .tax-exemptions-detail-modal__body::-webkit-scrollbar-track {
  background: transparent;
}

.tax-exemptions-modal > .tax-exemptions-form::-webkit-scrollbar-thumb,
.tax-exemptions-modal > .tax-exemptions-reporting::-webkit-scrollbar-thumb,
.tax-exemptions-modal > .tax-governance::-webkit-scrollbar-thumb,
.tax-exemptions-modal > .tax-audit-bundle::-webkit-scrollbar-thumb,
.tax-exemptions-modal > .tax-exemptions-detail-modal__body::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--color-text-300) 62%, transparent);
  border-radius: 999px;
}

.tax-exemptions-modal--wide {
  max-width: 920px;
  width: min(920px, 100%);
}

.tax-exemptions-detail-modal {
  max-width: 1080px;
  width: min(1080px, 100%);
}

.tax-detail-content--modal .tax-preview-frame {
  min-height: 320px;
}

@media (min-width: 980px) {
  .tax-detail-content--modal .tax-review-layout {
    align-items: start;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  }
}

.tax-exemptions-form {
  display: grid;
  gap: var(--space-4);
}

.form-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tax-report-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--space-4);
}

.tax-report-card {
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.tax-report-card strong {
  font-size: var(--text-2xl);
}

.tax-report-sections {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tax-report-section {
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
}

.tax-report-section h3 {
  font-size: var(--text-base);
  margin: 0;
}

.tax-report-table th,
.tax-report-table td {
  padding: var(--space-2) 0;
}

.tax-report-table td:last-child {
  text-align: right;
}

.tax-audit-bundle__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.tax-audit-bundle__grid h3 {
  margin: 0 0 var(--space-3);
}

.tax-audit-bundle__list {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) var(--space-5);
}

.tax-audit-bundle__form {
  display: grid;
  gap: var(--space-3);
}

.tax-governance__form {
  display: grid;
  gap: var(--space-4);
}

.tax-governance__summary .tax-report-card strong {
  font-size: var(--text-xl);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tax-governance__toggles,
.tax-governance__gates {
  display: grid;
  gap: var(--space-3);
}

.tax-governance__toggles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tax-governance__gates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tax-governance__gate {
  align-items: flex-start;
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  min-width: 0;
  padding: var(--space-3);
}

.tax-governance__gate span {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.tax-governance__gate strong,
.tax-governance__gate small {
  overflow-wrap: anywhere;
}

.table-pagination__summary {
  color: var(--color-text-500);
  font-weight: 700;
}

.table-pagination__button {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  color: var(--color-text-700);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  height: 32px;
  justify-content: center;
  min-width: 32px;
  padding: 0 var(--space-2);
}

.table-pagination__button--wide {
  min-width: 56px;
}

.table-pagination__button--active {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
  color: var(--color-primary-600);
}

.table-pagination__button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.table-pagination__ellipsis {
  align-items: center;
  display: inline-flex;
  height: 32px;
}

.tax-audit-pagination {
  border-top: 1px solid var(--color-surface-200);
  padding: var(--space-3) 0 0;
}

@media (min-width: 901px) {
  .page:has(.tax-exemptions-shell) {
    height: 100dvh;
    overflow: hidden;
  }

  .page-external--content:has(.tax-exemptions-shell) {
    flex: 1 1 auto;
    min-height: 0;
  }

  .tax-exemptions-shell {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding-right: var(--space-5);
  }
}

@media (max-width: 900px) {
  .tax-exemptions-shell {
    height: auto;
    overflow: visible;
  }

  .tax-exemptions-workspace {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 760px) {
  .tax-exemptions-toolbar,
  .tax-exemptions-actions,
  .tax-document-row {
    align-items: stretch;
    flex-direction: column;
  }

  .tax-exemptions-primary-tabs,
  .tax-exemptions-tabs,
  .tax-exemptions-filters,
  .form-grid,
  .tax-audit-bundle__grid,
  .tax-governance__toggles,
  .tax-governance__gates,
  .tax-report-sections,
  .tax-report-grid,
  .tax-review-layout,
  .tax-detail-grid,
  .tax-detail-grid--compact {
    grid-template-columns: 1fr;
  }

  .tax-exemptions-tabs {
    display: grid;
    width: 100%;
  }

  .tax-exemptions-primary-tab {
    width: 100%;
  }

  .data-table thead {
    display: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table tr {
    border-bottom: 1px solid var(--color-surface-200);
    padding: var(--space-3);
  }

  .data-table td {
    border-bottom: 0;
    padding: var(--space-2) 0;
  }

  .data-table td::before {
    color: var(--color-text-500);
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: 800;
    margin-bottom: var(--space-1);
    text-transform: uppercase;
  }
}

.infra-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
}

.infra-scroll-surface {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
}

.infra-scroll-surface__pinned {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.infra-scroll-surface__pinned .infra-banner {
  margin: 0;
}

.infra-scroll-surface__content {
  display: grid;
  gap: var(--space-4);
}

.infra-overview {
  display: grid;
  gap: var(--space-3);
}

.infra-tabs .ds-subtab {
  min-width: 120px;
}

.infra-alerts {
  display: grid;
  gap: var(--space-4);
}

.infra-alerts__subscription {
  display: grid;
  gap: var(--space-4);
}

.infra-alerts__summary {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: var(--space-4);
}

.infra-alerts__stat {
  display: grid;
  gap: var(--space-1);
}

.infra-alerts__stat strong {
  color: var(--color-text-900);
  font-size: var(--text-xl);
  font-weight: 700;
}

.infra-alerts__toggles {
  display: grid;
  gap: var(--space-3);
}

.infra-alerts__option {
  align-items: center;
  color: var(--color-text-700);
  display: inline-flex;
  gap: var(--space-2);
}

.infra-alerts__option input[type="checkbox"] {
  accent-color: var(--color-primary-500);
  height: 18px;
  width: 18px;
}

.infra-alerts__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.infra-alerts__rss {
  border-top: 1px solid var(--color-surface-200);
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
}

.infra-alerts__rss-row {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}

.infra-alerts__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.infra-panel,
.infra-stage {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.infra-architecture {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.infra-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 186px;
  padding: var(--space-4);
  position: relative;
}

.infra-stage header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
}

.infra-stage__index {
  align-items: center;
  background: var(--color-primary-50);
  border-radius: 999px;
  color: var(--color-primary-600);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  height: 28px;
  justify-content: center;
  min-width: 28px;
}

.infra-stage h3 {
  font-size: var(--text-lg);
}

.infra-stage__stats {
  display: grid;
  gap: var(--space-2);
}

.infra-stage__stats div {
  align-items: baseline;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.infra-stage__stats strong {
  color: var(--color-text-900);
  font-size: var(--text-lg);
  font-weight: 700;
}

.infra-grid-two {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.infra-panel {
  padding: var(--space-4);
}

.infra-panel__header {
  margin-bottom: var(--space-3);
}

.infra-panel__header h3 {
  font-size: var(--text-lg);
}

.infra-controls {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.infra-controls__actions {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  grid-column: 1 / -1;
}

.infra-hotspots {
  display: grid;
  gap: var(--space-3);
}

.infra-hotspot {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.infra-recommendations {
  display: grid;
  gap: var(--space-3);
}

.infra-recommendation {
  align-items: flex-start;
  background: rgba(15, 118, 110, 0.05);
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: auto 1fr;
  padding: var(--space-3);
}

.infra-insights {
  display: grid;
  gap: var(--space-4);
}

.infra-insights__section {
  display: grid;
  gap: var(--space-3);
}

.infra-insights__section h4 {
  color: var(--color-text-700);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.infra-hotspot__title {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.infra-hotspot__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.infra-metric-chip {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-700);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
}

.infra-recommendation__index {
  align-items: center;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: 999px;
  color: var(--color-primary-600);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  justify-content: center;
  min-width: 32px;
  padding: 2px 8px;
}

.infra-recommendation__content {
  display: grid;
  gap: var(--space-1);
}

.infra-recommendation__content strong {
  color: var(--color-text-900);
  font-size: var(--text-sm);
}

.infra-empty {
  background: var(--color-surface-50);
  border: 1px dashed var(--color-surface-300);
  border-radius: var(--radius-md);
  color: var(--color-text-500);
  font-size: var(--text-sm);
  padding: var(--space-3);
}

.infra-banner {
  background: rgba(14, 116, 144, 0.08);
  border-color: rgba(14, 116, 144, 0.24);
  color: var(--color-info-500);
}

.infra-table-card {
  margin-top: var(--space-3);
}

.infra-toolbar {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.infra-toolbar .search {
  flex: 1 1 260px;
  min-width: 0;
}

.infra-toolbar .search input {
  max-width: 100%;
  width: 100%;
}

.infra-toolbar .users-toolbar__filters {
  align-items: center;
  display: flex;
  flex: 1 1 360px;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  min-width: 0;
}

.infra-toolbar .users-toolbar__filters > * {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
}

.infra-toolbar .users-toolbar__filters .secondary-button {
  white-space: normal;
}

.infra-tenant {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.infra-tenant strong,
.infra-tenant .meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.infra-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 4px 10px;
}

.infra-pill--placement {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.infra-target-select {
  min-width: 120px;
}

.infra-issues {
  color: var(--color-text-700);
  display: inline-block;
  line-height: 1.35;
}

.infra-cluster-summary {
  margin-bottom: var(--space-3);
}

.ds-inline-help,
.infra-heading-with-help {
  align-items: center;
  display: inline-flex;
  gap: 3px;
}

.ds-help-icon,
.infra-help-button {
  align-items: center;
  color: var(--color-text-500);
  cursor: help;
  display: inline-flex;
  height: 16px;
  justify-content: center;
  position: relative;
  width: 16px;
}

.ds-help-icon .ui-icon,
.infra-help-button .ui-icon {
  height: 13px;
  width: 13px;
}

.ds-help-icon:focus-visible,
.infra-help-button:focus-visible {
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.22);
  outline: none;
}

.ds-help-tooltip-floating,
.infra-help-tooltip-floating {
  background: var(--color-text-900);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--color-surface-0);
  font-size: var(--text-xs);
  font-weight: 500;
  left: 0;
  line-height: 1.35;
  max-width: 320px;
  min-width: 260px;
  padding: 8px 10px;
  pointer-events: none;
  position: fixed;
  top: 0;
  white-space: normal;
  z-index: 1200;
}

.ds-help-tooltip-floating.is-bottom,
.infra-help-tooltip-floating.is-bottom {
  transform: translateY(0);
}

.infra-cluster-divider {
  border-top: 1px solid var(--color-surface-200);
  margin-bottom: var(--space-3);
}

.infra-cluster-summary__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.infra-cluster-summary__item {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.infra-cluster-summary__item strong {
  color: var(--color-text-900);
  font-size: var(--text-md);
}

.infra-cluster-summary__line {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.infra-cluster-summary__line--value {
  align-items: baseline;
  flex-wrap: wrap;
}

.infra-cluster-create {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.infra-cluster-create__actions {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  grid-column: 1 / -1;
}

.infra-cluster-traffic {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.infra-cluster-traffic__select {
  max-width: 140px;
  width: 140px;
}

.infra-cluster-table {
  table-layout: fixed;
}

.infra-cluster-table th,
.infra-cluster-table td {
  padding: 14px 8px;
  vertical-align: top;
}

.infra-cluster-table thead th {
  color: var(--color-text-700);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.infra-cluster-table thead th:nth-child(1),
.infra-cluster-table tbody td:nth-child(1),
.infra-cluster-table thead th:nth-child(6),
.infra-cluster-table tbody td:nth-child(6) {
  white-space: nowrap;
}

.infra-cluster-table thead th:nth-child(1),
.infra-cluster-table tbody td:nth-child(1) {
  width: 72px;
}

.infra-cluster-table thead th:nth-child(2),
.infra-cluster-table tbody td:nth-child(2) {
  max-width: 420px;
  width: 34%;
}

.infra-cluster-table thead th:nth-child(3),
.infra-cluster-table tbody td:nth-child(3) {
  width: 170px;
}

.infra-cluster-table thead th:nth-child(4),
.infra-cluster-table tbody td:nth-child(4) {
  width: 120px;
}

.infra-cluster-table thead th:nth-child(5),
.infra-cluster-table tbody td:nth-child(5) {
  width: 220px;
}

.infra-cluster-table thead th:nth-child(6),
.infra-cluster-table tbody td:nth-child(6) {
  width: 132px;
}

.infra-cluster-table td[data-label="Actions"] {
  white-space: nowrap;
}

.infra-cluster-slot {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-900);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  min-height: 30px;
  padding: 0 10px;
}

.infra-cluster-container {
  display: grid;
  gap: 4px;
}

.infra-cluster-container__name {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  overflow-wrap: anywhere;
}

.infra-cluster-weight {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-family: inherit;
  font-size: var(--text-sm);
  min-height: 44px;
  padding: 10px 12px;
  width: 104px;
}

.infra-cluster-weight:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.infra-cluster-runtime {
  display: grid;
  gap: 8px;
}

.infra-cluster-runtime .status {
  justify-self: start;
  width: fit-content;
}

.infra-cluster-runtime .meta {
  max-width: 220px;
}

.infra-cluster-endpoint {
  color: var(--color-text-800);
  display: inline-flex;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.table-actions.infra-cluster-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  width: auto;
}

.infra-cluster-actions .infra-cluster-action-btn {
  border-color: var(--color-surface-300);
  color: var(--color-primary-500);
  height: 36px;
  min-height: 36px;
  min-width: 36px;
  width: 36px;
}

.infra-cluster-actions .infra-cluster-action-btn .ui-icon {
  color: var(--color-primary-500);
}

.ds-icon-action:hover,
.infra-cluster-actions .infra-cluster-action-btn:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
}

.ds-icon-action:hover:not(:disabled),
.ds-icon-action:focus-visible,
.infra-cluster-actions .infra-cluster-action-btn:hover:not(:disabled),
.infra-cluster-actions .infra-cluster-action-btn:focus-visible {
  background: var(--color-primary-50) !important;
  border-color: var(--color-primary-500) !important;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.18);
  transform: translateY(-1px);
}

.infra-cluster-actions .icon-button.is-busy {
  opacity: 0.7;
}

.modal--infra-cluster {
  --modal-width-min: 640px;
  --modal-width-fluid: 68vw;
  --modal-width-max: 980px;
  --modal-height-max: 760px;
  gap: var(--space-4);
  text-align: left;
}

.infra-cluster-modal__body {
  display: grid;
  gap: var(--space-4);
}

.infra-cluster-modal__section {
  display: grid;
  gap: var(--space-3);
}

.infra-cluster-modal__section + .infra-cluster-modal__section {
  border-top: 1px solid var(--color-surface-200);
  padding-top: var(--space-4);
}

.infra-cluster-modal__section--accepts {
  border-top: none;
  padding-top: 0;
}

.infra-cluster-modal__section--accepts + .infra-cluster-modal__section {
  border-top: none;
  padding-top: 0;
}

.infra-cluster-modal__facts {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.infra-cluster-modal__fact {
  background: linear-gradient(180deg, var(--color-surface-0) 0%, var(--color-surface-50) 100%);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 4px;
  min-height: 112px;
  overflow: hidden;
  padding: var(--space-3);
  position: relative;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.infra-cluster-modal__fact::before {
  background: var(--color-surface-300);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.infra-cluster-modal__fact[data-tone="accounts"]::before {
  background: var(--color-primary-500);
}

.infra-cluster-modal__fact[data-tone="domains"]::before {
  background: var(--color-success-500);
}

.infra-cluster-modal__fact[data-tone="revenue"]::before {
  background: var(--color-warning-500);
}

.infra-cluster-modal__fact:hover {
  border-color: var(--color-surface-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.infra-cluster-modal__fact strong {
  color: var(--color-text-900);
}

.infra-cluster-modal__mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.infra-cluster-modal__form-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.infra-cluster-modal__weight {
  width: 100%;
}

.infra-cluster-modal__toggle-field {
  align-items: center;
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-3);
}

.infra-cluster-modal__toggle-copy {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  text-align: left;
}

.infra-cluster-modal__toggle-copy .org-reject-modal__label,
.infra-cluster-modal__toggle-copy .meta {
  text-align: left;
}

.infra-cluster-modal__toggle-wrap {
  flex-shrink: 0;
}

.infra-cluster-modal__issues {
  margin: 0;
  padding-left: 18px;
}

.infra-cluster-modal__help-text {
  color: var(--color-text-700);
  line-height: 1.6;
  margin: 0;
}

.infra-cluster-modal__footer {
  align-items: center;
}

.infra-cluster-modal__footer .meta {
  flex: 1;
}

.page-header--infrastructure {
  align-items: flex-start;
}

.infra-title-wrap {
  display: grid;
  gap: var(--space-2);
}

.infra-header-tools {
  align-items: center;
  display: inline-flex;
  gap: var(--space-3);
  margin-top: 2px;
}

.infra-page .primary-button.is-busy,
.infra-page .secondary-button.is-busy {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  justify-content: center;
}

@media (min-width: 901px) {
  .page:has(.infra-scroll-surface) {
    height: 100dvh;
    overflow: hidden;
  }

  .page-external--content:has(.infra-scroll-surface) {
    flex: 1 1 auto;
    min-height: 0;
  }

  .infra-page {
    flex: 1 1 auto;
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }

  .infra-scroll-surface {
    flex: 1 1 auto;
    gap: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--space-5) var(--space-4) 0;
    scrollbar-color: rgba(100, 116, 139, 0.68) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  .infra-scroll-surface__pinned {
    background: var(--color-surface-50);
    border-bottom: 1px solid var(--color-surface-200);
    flex: 0 0 auto;
    padding-bottom: var(--space-4);
    position: sticky;
    top: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    z-index: 2;
  }

  .infra-scroll-surface--content-scrolled .infra-scroll-surface__pinned {
    border-bottom-color: var(--color-surface-200);
    box-shadow: none;
  }

  .infra-scroll-surface__content {
    flex: 0 0 auto;
    padding-top: calc(var(--space-2) + 4px);
    transition: padding-top 160ms ease;
  }

  .infra-scroll-surface--content-scrolled .infra-scroll-surface__content {
    padding-top: var(--space-2);
  }

  .infra-scroll-surface::-webkit-scrollbar {
    width: 8px;
  }

  .infra-scroll-surface::-webkit-scrollbar-track {
    background: transparent;
  }

  .infra-scroll-surface::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.64);
    border-radius: 999px;
  }

  .infra-scroll-surface::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.78);
  }
}

@media (max-width: 1200px) {
  .infra-architecture {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .infra-grid-two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .page-header--infrastructure {
    flex-direction: column;
    gap: var(--space-3);
  }

  .infra-header-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .infra-controls {
    grid-template-columns: 1fr;
  }

  .infra-cluster-summary__grid,
  .infra-cluster-create {
    grid-template-columns: 1fr;
  }

  .infra-cluster-traffic__select,
  .infra-cluster-weight {
    max-width: 100%;
    width: 100%;
  }

  .infra-cluster-modal__facts {
    grid-template-columns: 1fr;
  }

  .infra-cluster-modal__form-grid {
    grid-template-columns: 1fr;
  }

  .infra-cluster-modal__toggle-field {
    align-items: flex-start;
    flex-direction: column;
  }

  .infra-alerts__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .infra-alerts__actions .primary-button,
  .infra-alerts__actions .secondary-button {
    width: 100%;
  }

  .infra-alerts__rss-row {
    grid-template-columns: 1fr;
  }

  .infra-toolbar .users-toolbar__filters {
    width: 100%;
  }

  .infra-toolbar .users-toolbar__filters select,
  .infra-toolbar .users-toolbar__filters .secondary-button {
    flex: 1 1 140px;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-primary-500: #5bc0b8;
  --color-primary-600: #45aaa3;
  --color-primary-50: rgba(91, 192, 184, 0.14);
  --color-primary-200: rgba(91, 192, 184, 0.24);
  --color-info-500: #7ec9de;
  --color-success-500: #7cf2b0;
  --color-warning-500: #f4c36c;
  --color-danger-500: #f08b8b;
  --color-surface-0: #0b1220;
  --color-surface-50: #0f172a;
  --color-surface-100: #111c34;
  --color-surface-200: #1f2a44;
  --color-surface-300: #2c3a57;
  --color-text-900: #e2e8f0;
  --color-text-700: #cbd5f1;
  --color-text-500: #9fb0cc;
  --color-text-300: #7b8aa6;
  --shadow-sm: 0 2px 10px rgba(2, 6, 23, 0.4);
  --shadow-md: 0 10px 24px rgba(2, 6, 23, 0.45);
  --shadow-lg: 0 16px 40px rgba(2, 6, 23, 0.55);
}

[data-theme="dark"] .nav-item__badge {
  box-shadow: 0 4px 10px rgba(240, 139, 139, 0.34);
}

[data-theme="dark"] .toggle-password {
  color: #fff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-surface-50);
  color: var(--color-text-900);
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: var(--text-md);
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

.ui-icon {
  color: #000;
}

[data-theme="dark"] .ui-icon {
  color: #fff;
}

button {
  font-family: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

[hidden] {
  display: none !important;
}

.shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  gap: 0;
  padding: 0;
  transition: grid-template-columns 220ms ease;
}

.auth-shell {
  align-items: center;
  background: radial-gradient(circle at top, var(--color-primary-50), var(--color-surface-50));
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-8);
}

.auth-shell--compact-mfa {
  align-items: center;
  padding-block: clamp(12px, 2vh, 22px);
}

.auth-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 440px;
  transition: max-width 180ms ease;
  width: 100%;
}

.auth-panel--invite-mfa {
  max-width: min(760px, calc(100vw - 48px));
}

.auth-shell--compact-mfa .auth-panel {
  gap: var(--space-3);
}

.card__header h2 {
  margin-bottom: var(--space-3);
}

.auth-card {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.auth-shell--compact-mfa .auth-card {
  gap: 14px;
  padding: clamp(18px, 2.5vw, 24px);
}

.invite-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.invite-progress {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(32px, auto) 1fr minmax(32px, auto);
  gap: var(--space-3);
}

.invite-progress__step {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-500);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  height: 32px;
  justify-content: center;
  line-height: 1;
  min-width: 32px;
  padding: 0 var(--space-2);
}

.invite-progress__step--active,
.invite-progress__step--done {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: #fff;
}

.invite-progress__line {
  border-top: 1px solid var(--color-surface-200);
  display: block;
}

.invite-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.auth-shell--compact-mfa .invite-step {
  gap: var(--space-3);
}

.invite-mfa__header {
  display: block;
  margin-bottom: var(--space-4);
}

.auth-shell--compact-mfa .invite-mfa__header {
  margin-bottom: var(--space-3);
}

.invite-mfa__header .status {
  flex: 0 0 auto;
  max-width: none;
}

.invite-mfa__header > div {
  min-width: 0;
}

.invite-mfa__title-row {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: flex-start;
  min-width: 0;
}

.invite-mfa__header h4 {
  font-size: var(--text-lg);
  margin: 0;
}

.invite-mfa__header .meta {
  margin-top: var(--space-2);
}

.invite-mfa__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(260px, 1.15fr) minmax(220px, 0.85fr);
}

.auth-shell--compact-mfa .invite-mfa__grid {
  gap: var(--space-3);
}

.invite-mfa__panel {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
}

.auth-shell--compact-mfa .invite-mfa__panel {
  gap: 10px;
  padding: 14px var(--space-4);
}

.invite-mfa__panel h4 {
  margin: 0;
}

.invite-step--mfa .qr-code,
.required-mfa .qr-code {
  height: 164px;
  width: 164px;
}

.auth-shell--compact-mfa .invite-step--mfa .qr-code,
.auth-shell--compact-mfa .required-mfa .qr-code {
  height: clamp(136px, 18vh, 152px);
  width: clamp(136px, 18vh, 152px);
}

.invite-step--mfa .backup-codes,
.required-mfa .backup-codes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invite-step--mfa .backup-codes span,
.required-mfa .backup-codes span {
  font-size: var(--text-xs);
  padding: 6px 8px;
}

.invite-mfa__verify {
  align-items: flex-start;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(240px, 1fr) minmax(180px, auto);
  margin-top: var(--space-4);
}

.auth-shell--compact-mfa .invite-mfa__verify {
  margin-top: var(--space-3);
}

.invite-mfa__verify .primary-button {
  align-self: end;
  min-height: 48px;
}

.invite-mfa__verify input {
  min-height: 48px;
}

.invite-mfa__copy {
  align-self: stretch;
  min-height: 44px;
  width: 100%;
}

@media (max-width: 720px) {
  .auth-panel--invite-mfa {
    max-width: 100%;
  }

  .invite-mfa__grid,
  .invite-mfa__verify {
    grid-template-columns: 1fr;
  }

  .invite-step--mfa .qr-code,
  .required-mfa .qr-code {
    height: 148px;
    width: 148px;
  }
}

.auth-form input[readonly] {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--color-text-700);
}

.auth-tabs {
  display: flex;
  gap: var(--space-2);
}

.field-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.password-field {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.password-field input {
  flex: 1;
}

.toggle-password {
  background: transparent;
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--text-xs);
  line-height: 1;
  padding: 6px 10px;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
}

.toggle-password .icon {
  display: inline-flex;
  height: 16px;
  width: 16px;
  color: inherit;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.toggle-password svg {
  height: 16px;
  width: 16px;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.toggle-password:focus,
.toggle-password:active {
  color: inherit;
}

.icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-500);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
}

.icon-button:hover {
  background: var(--color-surface-100);
  border-color: var(--color-surface-200);
}

.icon-button svg {
  height: 18px;
  width: 18px;
  display: block;
  overflow: visible;
}

.link-button {
  background: transparent;
  border: none;
  color: var(--color-primary-500);
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: left;
}

.link-button:hover {
  color: var(--color-primary-600);
  text-decoration: underline;
}

.captcha-placeholder {
  align-items: center;
  border: 1px dashed var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-500);
  display: flex;
  font-size: var(--text-xs);
  justify-content: center;
  min-height: 60px;
}

.form-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.photo-preview {
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
  overflow: hidden;
  width: 120px;
}

.photo-preview img {
  display: block;
  height: 120px;
  object-fit: cover;
  width: 120px;
}

.modal-overlay {
  align-items: center;
  backdrop-filter: blur(6px);
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 20;
}

.modal {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 360px;
  padding: var(--space-6);
  text-align: center;
  width: calc(100% - 32px);
}

.modal__icon {
  align-items: center;
  background: var(--color-success-500);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: var(--text-xl);
  font-weight: 700;
  height: 48px;
  justify-content: center;
  margin-bottom: var(--space-4);
  width: 48px;
}

.tab-button {
  background: transparent;
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-500);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 8px 16px;
}

.tab-button:hover {
  background: var(--color-surface-100);
  border-color: var(--color-surface-200);
  color: var(--color-text-700);
}

.tab-button--active {
  background: var(--color-primary-500);
  border-color: transparent;
  color: #fff;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-form-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-1);
}

.auth-form-intro__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-form-intro__divider {
  border-top: 1px solid var(--color-surface-200);
}

.auth-form-intro .logo__mark {
  border-radius: 999px;
}

.auth-form-intro .meta {
  margin: 0;
}

.saved-logins-field {
  position: relative;
}

.toggle-password--static {
  cursor: default;
  pointer-events: none;
}

.saved-logins {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: calc(100% - 40px);
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  z-index: 12;
  max-height: 180px;
  overflow: auto;
}

.saved-logins__item {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-700);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 8px 10px;
  text-align: left;
}

.saved-logins__item:hover,
.saved-logins__item:focus {
  background: var(--color-surface-100);
  outline: none;
}

.auth-remember {
  color: var(--color-text-700);
  font-size: var(--text-sm);
}

.auth-footer {
  color: var(--color-text-500);
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  min-height: 20px;
}

.auth-footer:empty {
  display: none;
}

.auth-footer .inline-spinner {
  justify-content: center;
  width: 100%;
}

.sidebar {
  align-self: start;
  background: var(--color-surface-50);
  border-right: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100vh;
  overflow-y: auto;
  padding: var(--space-6);
  position: sticky;
  top: 0;
}

.sidebar-collapse-toggle {
  display: none;
}


.logo {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.sidebar .logo {
  border-bottom: 1px solid var(--color-surface-200);
  margin-bottom: 1px;
  padding-bottom: var(--space-4);
}

.logo__mark {
  align-items: center;
  background: var(--color-primary-500);
  border-radius: var(--radius-md);
  color: #fff;
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.logo__text {
  font-size: var(--text-lg);
  font-weight: 700;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-2);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 1px;
  padding-inline-end: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
  transition: scrollbar-color 160ms ease;
}

.sidebar__nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar__nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background-color 160ms ease;
}

.sidebar__nav:hover,
.sidebar__nav:focus-within,
.sidebar__nav.sidebar__nav--scrolling {
  scrollbar-color: var(--color-surface-300) transparent;
}

.sidebar__nav:hover::-webkit-scrollbar-thumb,
.sidebar__nav:focus-within::-webkit-scrollbar-thumb,
.sidebar__nav.sidebar__nav--scrolling::-webkit-scrollbar-thumb {
  background: var(--color-surface-300);
}

.sidebar__nav::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-500);
}

.org-context {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
}

.org-context__label {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.org-context__name {
  font-size: var(--text-sm);
  font-weight: 600;
}

.nav-item {
  align-items: center;
  border-radius: 999px;
  color: var(--color-text-500);
  display: flex;
  font-size: var(--text-sm);
  font-weight: 600;
  gap: var(--space-3);
  line-height: 1.2;
  min-height: 44px;
  padding: 10px 16px;
  position: relative;
  transition: box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.nav-item__icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.nav-item__icon .ui-icon {
  color: currentColor;
  height: 18px;
  stroke: currentColor;
  width: 18px;
}

.nav-item__label {
  min-width: 0;
  white-space: nowrap;
}

.nav-item__badge {
  align-items: center;
  background: var(--color-danger-500);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.32);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
}

.nav-item--active {
  background: var(--color-primary-500);
  color: #fff;
}

.nav-item:hover {
  background: var(--color-surface-100);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.nav-item--active:hover {
  background: var(--color-primary-500);
  color: #fff;
}

.sidebar__footer {
  margin-top: auto;
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  padding-top: var(--space-3);
  background: var(--color-surface-50);
  position: relative;
}

.sidebar__footer::before {
  display: none;
}

.user-card {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  min-height: 64px;
  padding: 12px 14px;
}

.user-card .avatar {
  height: 44px;
  width: 44px;
  font-size: var(--text-md);
}

.user-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
}

.user-card__role {
  color: var(--color-text-500);
  font-size: var(--text-xs);
}

.icon-button--ghost {
  border-color: transparent;
  color: var(--color-text-500);
  height: 32px;
  width: 32px;
}

.user-card .icon-button--ghost {
  margin-left: auto;
}

.icon-button--ghost:hover {
  background: var(--color-surface-200);
}

.ghost-button {
  background: transparent;
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-500);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 10px 14px;
  width: auto;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ghost-button:hover {
  background: var(--color-surface-100);
  border-color: var(--color-surface-200);
}

.ghost-button:active {
  background: var(--color-surface-200);
}

.ghost-button--danger,
.ghost-button.danger {
  border-color: var(--color-danger-500);
  color: var(--color-danger-500);
}

.ghost-button--danger:hover,
.ghost-button.danger:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--color-danger-500);
}

.ghost-button--compact {
  padding: 12px 18px;
  font-size: var(--text-sm);
  min-height: 44px;
}

.org-workspace__renewal-action {
  min-height: 22px;
  padding: 3px 9px;
  font-size: var(--text-xs);
  line-height: 1;
  white-space: nowrap;
}

.org-workspace__renewal-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width: 901px) {
  .content {
    grid-column: 2;
  }

  .sidebar {
    bottom: 0;
    left: 0;
    overflow: visible;
    position: fixed;
    width: 280px;
    z-index: 10;
  }

  .sidebar-collapse-toggle {
    align-items: center;
    background: var(--color-surface-0);
    border: 1px solid var(--color-surface-200);
    border-radius: 999px;
    color: var(--color-text-500);
    display: grid;
    height: 34px;
    justify-content: center;
    line-height: 0;
    padding: 0;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    z-index: 3;
  }

  .sidebar-collapse-toggle:hover {
    background: var(--color-surface-100);
    border-color: var(--color-primary-200);
    color: var(--color-primary-500);
  }

  .sidebar-collapse-toggle .ui-icon {
    color: currentColor;
    display: block;
    height: 16px;
    left: 50%;
    position: absolute;
    stroke: currentColor;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition: transform 180ms ease;
    width: 16px;
  }

  .shell--sidebar-collapsed {
    grid-template-columns: 96px 1fr;
  }

  .shell--sidebar-collapsed .sidebar {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    width: 96px;
  }

  .shell--sidebar-collapsed .sidebar .logo {
    justify-content: center;
  }

  .shell--sidebar-collapsed .logo__text {
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    width: 0;
  }

  .shell--sidebar-collapsed .sidebar__nav {
    align-items: center;
    padding-inline-end: 0;
  }

  .shell--sidebar-collapsed .nav-item {
    gap: 0;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    width: 44px;
  }

  .shell--sidebar-collapsed .nav-item__label {
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    width: 0;
  }

  .shell--sidebar-collapsed .nav-item__badge {
    font-size: 10px;
    height: 16px;
    line-height: 1;
    margin-left: 0;
    min-width: 16px;
    padding: 0 4px;
    position: absolute;
    right: -4px;
    top: -4px;
  }

  .shell--sidebar-collapsed .user-card {
    flex-direction: column;
    gap: var(--space-2);
    min-height: 0;
    padding: 10px 8px;
  }

  .shell--sidebar-collapsed .user-card__info {
    display: none;
  }

  .shell--sidebar-collapsed .user-card .icon-button--ghost {
    margin-left: 0;
  }

  .shell--sidebar-collapsed .sidebar-collapse-toggle .ui-icon {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}

.mobile-sidebar-bar {
  display: none;
}

.mobile-logout-label {
  display: none;
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
}

.page-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.page-header > div:first-child {
  min-width: 0;
}

.page-header__tools {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  justify-content: flex-end;
  max-width: 100%;
}

.ds-support-header-tools {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.ds-support-header-tools__label {
  color: var(--color-text-600);
  font-size: var(--text-sm);
  font-weight: 700;
}

.ds-support-header-tools__status {
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-width: 42px;
  padding: 4px 8px;
  text-align: center;
}

.page-external {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: 0;
}

.page-external--content {
  gap: var(--space-6);
}

.page-external--content .page-header {
  margin-bottom: var(--space-6);
}

.page-external--content .settings {
  margin-top: var(--space-2);
}

.card {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.card__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.settings-card__header {
  align-items: flex-start;
  gap: var(--space-4);
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.settings-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.field-error {
  color: var(--color-danger-500);
  font-size: var(--text-xs);
  font-weight: 500;
  min-height: 0;
}

.field-error:empty {
  display: none;
}

.field--error input,
.field--error select {
  border-color: var(--color-danger-500);
  box-shadow: 0 0 0 1px var(--color-danger-500);
}

.field input,
.field select {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-size: var(--text-sm);
  padding: 10px 12px;
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.form-actions {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.form-actions--company {
  margin-top: var(--space-4);
}

.settings-blocked-domains {
  display: block;
}

.card__header.settings-disclosure__header {
  align-items: center;
  margin-bottom: 0;
}

.settings-disclosure__toggle {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-500);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  min-width: 36px;
  padding: 0;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.settings-disclosure__toggle:hover {
  background: var(--color-surface-0);
  border-color: var(--color-primary-200);
  color: var(--color-primary-500);
}

.settings-disclosure__toggle:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.settings-disclosure__chevron {
  color: inherit;
  display: block;
  height: 16px;
  transition: transform 160ms ease;
  width: 16px;
}

.settings-disclosure__toggle[aria-expanded="true"] .settings-disclosure__chevron {
  transform: rotate(180deg);
}

.settings-blocked-domains__content {
  display: grid;
  gap: 6px;
  margin-top: var(--space-3);
}

.settings-blocked-domains__toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}

.settings-blocked-domains__search {
  flex: 1 1 260px;
  max-width: 420px;
}

.settings-blocked-domains__add {
  display: grid;
  gap: 6px;
}

.settings-blocked-domains__add-label {
  min-height: 0;
}

.settings-blocked-domains__add-row {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}

.settings-blocked-domains__add-input {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-size: var(--text-sm);
  padding: 10px 12px;
  width: 100%;
}

.settings-blocked-domains__add-input:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.settings-blocked-domains__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: 2px;
}

.settings-blocked-domains__row {
  align-items: center;
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  background: var(--color-surface-100);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) 36px 36px;
  padding: var(--space-2);
}

.settings-blocked-domains__input {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  color: var(--color-text-900);
  font-size: var(--text-sm);
  padding: 9px 10px;
  width: 100%;
}

.settings-blocked-domains__input:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.settings-blocked-domains__action {
  justify-self: center;
}

.settings-blocked-domains__divider {
  margin: 2px 0;
}

.settings-blocked-domains [data-settings-message="blocked-domains"]:empty {
  display: none;
}

.settings-blocked-domains [data-settings-message="blocked-countries"]:empty {
  display: none;
}

.settings-blocked-domains__pagination {
  margin-top: 2px;
  padding-top: 0;
}

@media (max-width: 720px) {
  .settings-blocked-domains__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-blocked-domains__search {
    max-width: none;
    width: 100%;
  }

  .settings-blocked-domains__add {
    gap: var(--space-2);
  }
}

.form-hint {
  color: var(--color-text-500);
  font-size: var(--text-xs);
}

.field-help {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 500;
}

.email-verify {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.email-verify__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.email-verify__row .meta {
  font-size: var(--text-xs);
}

.email-verify__row .ghost-button {
  padding: 6px 10px;
  font-size: var(--text-xs);
}

.search input {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  font-size: var(--text-sm);
  padding: 10px 16px;
  width: 280px;
}

.search input:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}


.pill {
  background: var(--color-surface-100);
  border-radius: 999px;
  font-size: var(--text-sm);
  max-width: 100%;
  overflow: hidden;
  padding: 8px 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill--light {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.avatar {
  align-items: center;
  background: var(--color-primary-50);
  border-radius: 50%;
  color: var(--color-primary-600);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  height: 36px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 36px;
}

.settings-user__profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.settings-form .settings-card.settings-card--session {
  padding: var(--space-4) var(--space-5);
}

.settings-form .settings-card.settings-card--theme {
  padding: var(--space-4) var(--space-5);
}

.settings-form .settings-card.settings-card--theme .settings-card__header {
  margin-bottom: 0;
}

.settings-form .settings-card.settings-card--session .settings-card__header--session {
  align-items: center;
  margin-bottom: 0;
}

.session-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
}

.session-card__copy h2 {
  margin: 0;
}

.session-card__copy .meta {
  margin: 0;
}

.session-card__controls {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.session-card__controls .select-standard {
  min-width: 148px;
  width: 148px;
}

.session-card__apply {
  box-shadow: var(--shadow-sm);
  min-height: 44px;
  padding: 10px 14px;
}

.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.settings-divider {
  border-top: 1px solid var(--color-surface-200);
  margin: var(--space-5) 0;
  width: 100%;
}

@media (max-width: 760px) {
  .session-card__controls {
    width: 100%;
  }

  .session-card__controls .select-standard {
    min-width: 0;
    width: 100%;
  }

  .session-card__apply {
    min-width: 96px;
  }
}

.theme-inline {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.theme-toggle {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-500);
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
  line-height: 1;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
}

.theme-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  width: 18px;
}

.theme-toggle svg {
  height: 18px;
  width: 18px;
  display: block;
  overflow: visible;
}

.settings-theme__header {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin-bottom: 0;
}

.settings-theme__copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.settings-password__header {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.settings-theme__header .meta,
.settings-password__header .meta {
  margin-top: 0;
}

.password-progress {
  align-items: center;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-4);
  max-width: 1040px;
}

.password-progress__item {
  align-items: center;
  color: var(--color-text-500);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: var(--space-2);
  min-width: 0;
  white-space: nowrap;
}

.password-progress__index {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-500);
  display: inline-flex;
  flex: 0 0 30px;
  height: 30px;
  justify-content: center;
  line-height: 1;
  width: 30px;
}

.password-progress__icon {
  align-items: center;
  display: inline-flex;
  height: 16px;
  justify-content: center;
  width: 16px;
}

.password-progress__icon svg {
  height: 16px;
  width: 16px;
}

.password-progress__line {
  flex: 1 1 auto;
  border-top: 1px solid var(--color-surface-200);
  min-width: 32px;
}

.password-progress__item--active {
  color: var(--color-primary-600);
}

.password-progress__item--active .password-progress__index {
  background: var(--color-primary-50);
  border-color: rgba(20, 184, 166, 0.35);
  color: var(--color-primary-600);
}

.password-progress__item--done {
  color: var(--color-primary-600);
}

.password-progress__item--done .password-progress__index {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--color-primary-600);
}

.password-progress__item--invalid {
  color: var(--color-danger-500);
}

.password-progress__item--invalid .password-progress__index {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--color-danger-500);
}

.password-progress__item--locked {
  color: var(--color-text-400);
}

.settings-password__fields {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1040px;
}

.settings-password__field {
  min-width: 0;
}

.settings-password .password-field {
  gap: 0;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.settings-password input {
  min-height: 44px;
  padding: 10px 46px 10px 12px;
}

.settings-password .toggle-password {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--color-text-600);
  height: 34px;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
}

.settings-password .toggle-password:hover:not(:disabled),
.settings-password .toggle-password:focus-visible {
  background: var(--color-surface-100);
}

.settings-password input:disabled {
  background: var(--color-surface-50);
  color: var(--color-text-400);
  cursor: not-allowed;
}

.settings-password input.input--invalid {
  border-color: rgba(239, 68, 68, 0.65);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.settings-password .toggle-password:disabled {
  color: var(--color-text-300);
  cursor: not-allowed;
}

@media (max-width: 980px) {
  .settings-password__fields {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .password-progress {
    align-items: flex-start;
    gap: var(--space-2);
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .password-progress__line {
    display: none;
  }
}

@media (max-width: 640px) {
  .settings-theme__header {
    align-items: flex-start;
  }
}

.settings-twofactor__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.settings-twofactor__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.settings-twofactor__footer {
  margin-top: var(--space-4);
}

.twofactor-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.twofactor-card {
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  background: var(--color-surface-0);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.qr-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.qr-code {
  width: 140px;
  height: 140px;
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--color-surface-200);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.qr-code::before,
.qr-code::after {
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.qr-code::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 9px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(148, 163, 184, 0.25) 0 8px,
      rgba(148, 163, 184, 0.1) 8px 16px
    );
  filter: blur(1.6px);
}

.qr-code::after {
  content: "QR locked";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--color-surface-200);
  background: var(--color-surface-0);
  color: var(--color-text-700);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;
}

.qr-code.qr-code--locked::before,
.qr-code.qr-code--locked::after {
  opacity: 1;
}

.qr-code svg {
  width: 100%;
  height: 100%;
  display: block;
}

.twofactor-otpauth {
  margin: 0;
  font-size: var(--text-xs);
  word-break: break-word;
}

.twofactor-secret {
  display: block;
  font-family: "SFMono-Regular", "SFMono", "IBM Plex Mono", "Menlo", monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 8px;
  padding: 8px 10px;
  word-break: break-all;
}

[data-2fa-countdown] {
  font-variant-numeric: tabular-nums;
}

.twofactor-code {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.twofactor-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.modal.modal--mfa-stepup {
  --modal-width-min: 480px;
  --modal-width-fluid: 42vw;
  --modal-width-max: 560px;
  --modal-height-max: 520px;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.modal--mfa-stepup .modal__header {
  align-items: flex-start;
  border-bottom: 1px solid var(--color-surface-200);
  gap: var(--space-4);
  padding: var(--space-5);
}

.mfa-stepup-modal__header-copy {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  min-width: 0;
}

.mfa-stepup-modal__header-copy h2 {
  margin: 2px 0 0;
}

.mfa-stepup-modal__icon {
  align-items: center;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-md);
  color: var(--color-primary-500);
  display: inline-flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.mfa-stepup-modal__icon .ui-icon {
  height: 22px;
  width: 22px;
}

.modal.modal--mfa-stepup .modal__body.mfa-stepup-modal__body {
  gap: var(--space-4);
  max-height: min(52vh, 340px);
  padding: var(--space-5) var(--space-6);
}

.modal.modal--mfa-stepup .mfa-stepup-modal__field {
  min-width: 0;
  width: 100%;
}

.modal.modal--mfa-stepup .mfa-stepup-modal__field input {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: var(--color-text-900);
  min-height: 44px;
  padding: 12px 14px;
  width: 100%;
}

.modal.modal--mfa-stepup .mfa-stepup-modal__field input:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.mfa-stepup-modal__body .form-hint {
  color: var(--color-danger-500);
  font-weight: 500;
  min-height: 18px;
}

.mfa-stepup-modal__footer {
  background: var(--color-surface-50);
  border-top: 1px solid var(--color-surface-200);
  padding: var(--space-4) var(--space-5);
}

.modal--mfa-stepup .modal__close--icon {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-500);
  display: inline-flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.modal--mfa-stepup .modal__close--icon:hover {
  background: var(--color-surface-100);
  border-color: var(--color-surface-300);
  color: var(--color-text-700);
}

.modal--mfa-stepup .modal__close--icon .ui-icon {
  height: 16px;
  width: 16px;
}

.backup-codes {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  max-width: 100%;
  min-width: 0;
}

.backup-codes span {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  font-family: "SFMono-Regular", "SFMono", "IBM Plex Mono", "Menlo", monospace;
  font-size: var(--text-xs);
  line-height: 1.35;
  overflow-wrap: anywhere;
  padding: 6px 8px;
  text-align: center;
  word-break: break-word;
}

.twofactor-recovery {
  border-top: 1px dashed var(--color-surface-200);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.twofactor-recovery__grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  font-family: "SFMono-Regular", "SFMono", "IBM Plex Mono", "Menlo", monospace;
  font-size: var(--text-xs);
}

.twofactor-recovery__grid span {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  padding: 6px 8px;
  text-align: center;
}

.twofactor-steps {
  display: grid;
  gap: var(--space-3);
  background: var(--color-surface-100);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.twofactor-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.twofactor-step .status {
  min-width: 54px;
  justify-content: center;
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  border: 1px solid rgba(29, 108, 255, 0.18);
}

.twofactor-step .status.status--success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success-500);
  border-color: rgba(34, 197, 94, 0.3);
}

.twofactor-step .status.status--warning {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  border-color: rgba(29, 108, 255, 0.18);
}

.login-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.twofactor-auth {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.twofactor-auth [data-2fa-auth-mode] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.twofactor-auth__switch {
  align-self: flex-start;
}

.settings-subscription {
  display: block;
}

.subscription-card {
  display: grid;
  gap: var(--space-5);
}

.subscription-card__header {
  align-items: start;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.subscription-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.subscription-card__title {
  font-size: var(--text-xl);
}

.subscription-card__subtitle {
  color: var(--color-text-500);
  font-size: var(--text-sm);
}

.subscription-card__badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.subscription-pill {
  align-items: center;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-700);
  display: inline-flex;
  font-size: var(--text-xs);
  padding: 4px 10px;
}

.subscription-card__header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.subscription-card__summary {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
}

.subscription-card__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-500);
}

.subscription-card__detail strong {
  color: var(--color-text-900);
  font-size: var(--text-lg);
  font-weight: 600;
}

.subscription-card__actions {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-surface-200);
  padding-top: var(--space-4);
}

.subscription-card__actions .ghost-button.danger {
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-danger-500);
  background: rgba(239, 68, 68, 0.08);
  margin-left: auto;
}

.subscription-card__actions .ghost-button.danger:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.55);
}

.subscription-card__note {
  color: var(--color-text-500);
  font-size: var(--text-xs);
}

@media (max-width: 720px) {
  .subscription-card__actions .ghost-button.danger {
    margin-left: 0;
  }
}

.settings-password__actions {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.password-field {
  align-items: center;
}

.password-field input {
  min-height: 44px;
}

.toggle-password {
  height: 40px;
  width: 40px;
  padding: 0;
}

.avatar--ghost {
  background: var(--color-surface-100);
  color: var(--color-text-500);
}

.avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

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

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.page {
  padding: var(--space-8);
}

.hero {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.eyebrow {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1 {
  font-size: var(--text-3xl);
  margin-top: var(--space-2);
}

.page-header h1 {
  font-size: 1.5em;
  line-height: 1.2;
}

.page-header .meta {
  font-size: var(--text-sm);
  line-height: 1.4;
}

@media (max-width: 720px) {
  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-header__tools {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
}

.hero__copy {
  color: var(--color-text-500);
  font-size: var(--text-lg);
  margin-top: var(--space-3);
  max-width: 520px;
}

.hero__copy span {
  display: block;
}

.hero__copy span + span {
  margin-top: var(--space-2);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.primary-button,
.secondary-button {
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 12px 18px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.primary-button[aria-disabled="true"],
.secondary-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.primary-button {
  background: var(--color-primary-500);
  border: none;
  color: #fff;
  box-shadow: var(--shadow-md);
}

.primary-button:hover {
  background: var(--color-primary-600);
}

.primary-button:active {
  box-shadow: var(--shadow-sm);
  transform: translateY(1px);
}

.primary-button--small {
  font-size: var(--text-sm);
  min-height: 44px;
  padding: 12px 18px;
}

.primary-button--light {
  background: var(--color-primary-500);
  color: #fff;
}

.secondary-button {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  color: var(--color-primary-500);
}

.secondary-button--small {
  font-size: var(--text-sm);
  padding: 12px 18px;
  min-height: 44px;
}

.secondary-button:hover {
  background: var(--color-surface-100);
}

.secondary-button:active {
  box-shadow: var(--shadow-sm);
  transform: translateY(1px);
}

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

.secondary-button--danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

.danger-button {
  background: var(--color-danger-500);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 12px 18px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.danger-button:hover {
  background: #dc2626;
}

.danger-button:active {
  box-shadow: var(--shadow-sm);
  transform: translateY(1px);
}

.stats {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--space-6);
}

.stat-card {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.stat-title {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.stat-card h2 {
  font-size: var(--text-2xl);
  margin: var(--space-2) 0;
}

.stat-chip {
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--text-xs);
  padding: 4px 8px;
}

.stat-chip:empty {
  display: none;
}

.stat-chip--success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success-500);
}

.stat-chip--warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning-500);
}

.stat-chip--neutral {
  background: var(--color-surface-100);
  color: var(--color-text-500);
}

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-6);
}

.card {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.card--wide {
  grid-column: span 2;
}

.card__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.meta {
  color: var(--color-text-500);
  font-size: var(--text-sm);
}

.chart {
  align-items: flex-end;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(12, 1fr);
  height: 180px;
}

.chart--placeholder {
  align-items: center;
  background: var(--color-surface-100);
  border-radius: var(--radius-lg);
  display: flex;
  height: 180px;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
}

.bar {
  background: var(--color-surface-200);
  border-radius: var(--radius-sm);
}

.bar--highlight {
  background: var(--color-primary-500);
}

.chart__labels {
  color: var(--color-text-300);
  display: grid;
  font-size: var(--text-xs);
  grid-template-columns: repeat(12, 1fr);
  margin-top: var(--space-3);
  text-align: center;
}

.promo {
  background: linear-gradient(140deg, #1d6cff 0%, #0e49c2 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: space-between;
}

.promo[hidden] {
  display: none;
}

.promo p {
  color: rgba(255, 255, 255, 0.8);
}

.activity {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.activity__row {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 36px 1fr;
}

.table {
  border-collapse: collapse;
  width: 100%;
}

.table th,
.table td {
  border-bottom: 1px solid var(--color-surface-200);
  font-size: var(--text-sm);
  padding: 12px 4px;
  text-align: left;
}

.table-actions {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.table-actions .icon-button {
  height: 40px;
  width: 40px;
}

.table-actions .icon-button svg {
  height: 20px;
  width: 20px;
}

.org-requests__actions-cell {
  min-width: 0;
  text-align: right;
  width: auto;
}

.org-requests__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  min-height: 32px;
  width: 100%;
}

.org-requests__actions .icon-button {
  flex: 0 0 32px;
  height: 32px;
  width: 32px;
}

.organization-requests-table .org-requests__actions [data-icon-label]::after {
  display: none;
}

.organizations-table .org-requests__actions-cell {
  text-align: right;
}

.organizations-table .org-requests__actions {
  justify-content: flex-end;
  width: 100%;
}

.organizations-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 0;
}

.organizations-shell__pinned {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-4);
}

.organizations-toolbar .search,
.organizations-toolbar .search input {
  min-width: 0;
}

.users-toolbar.organizations-toolbar {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(260px, clamp(320px, 36vw, 520px)) minmax(0, 1fr);
  justify-content: stretch;
  overflow: visible;
}

.organizations-toolbar .search {
  min-width: 0;
  width: 100%;
}

.organizations-toolbar .search input {
  box-sizing: border-box;
  min-height: 44px;
  width: 100%;
}

.organizations-toolbar .users-toolbar__filters {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(140px, 150px) minmax(170px, 190px);
  justify-content: end;
  margin-left: 0;
  min-width: 0;
  width: 100%;
}

.organizations-toolbar .users-toolbar__filters select {
  flex: initial;
  min-width: 0;
  width: 100%;
}

.table-card.organizations-table-card {
  min-width: 0;
  overflow: hidden;
}

.organization-requests-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 0;
}

.organization-requests-shell__pinned {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-4);
}

.org-request-policy__open {
  white-space: nowrap;
}

.organization-requests-table-card {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

@media (min-width: 901px) {
  .page:has(.organizations-shell),
  .page:has(.organization-requests-shell) {
    height: 100dvh;
    overflow: hidden;
  }

  .page-external--content:has(.organizations-shell),
  .page-external--content:has(.organization-requests-shell) {
    flex: 1 1 auto;
    min-height: 0;
  }

  .organizations-shell,
  .organization-requests-shell {
    flex: 1 1 auto;
    gap: var(--space-4);
    min-height: 0;
    overflow: hidden;
    padding: 2px var(--space-5) var(--space-4) 0;
  }

  .table-card.table-card--viewport.organizations-table-card,
  .table-card.table-card--viewport.organization-requests-table-card {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-5) var(--space-5) var(--space-4);
  }

  .organizations-table-card > .table,
  .organization-requests-table-card > .table {
    flex: 0 0 auto;
  }

  .organizations-table-card > .table-pagination,
  .organization-requests-table-card > .table-pagination {
    margin-top: auto;
  }

  .organizations-table {
    table-layout: auto;
  }

  .organization-requests-shell .users-toolbar {
    align-items: stretch;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-requests-shell .search,
  .organization-requests-shell .search input {
    min-width: 0;
    width: 100%;
  }

  .organization-requests-shell .users-toolbar__filters {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    justify-content: stretch;
  }

  .organization-requests-shell .users-toolbar__filters select {
    min-width: 0;
    width: 100%;
  }

  .organization-requests-table {
    table-layout: fixed;
    min-width: 0;
    width: 100%;
  }

  .organization-requests-table th,
  .organization-requests-table td {
    overflow-wrap: normal;
    padding: 14px 8px;
    vertical-align: middle;
    word-break: normal;
  }

  .organization-requests-table thead th {
    color: var(--color-text-800);
    font-weight: 700;
    white-space: nowrap;
  }

  .organization-requests-table th:nth-child(1),
  .organization-requests-table td:nth-child(1) {
    width: 16%;
  }

  .organization-requests-table th:nth-child(2),
  .organization-requests-table td:nth-child(2) {
    overflow-wrap: break-word;
    width: 17%;
  }

  .organization-requests-table th:nth-child(3),
  .organization-requests-table td:nth-child(3) {
    width: 13%;
  }

  .organization-requests-table th:nth-child(4),
  .organization-requests-table td:nth-child(4) {
    overflow-wrap: break-word;
    width: 13%;
  }

  .organization-requests-table th:nth-child(5),
  .organization-requests-table td:nth-child(5) {
    width: 15%;
  }

  .organization-requests-table th:nth-child(6),
  .organization-requests-table td:nth-child(6) {
    width: 11%;
  }

  .organization-requests-table th:nth-child(7),
  .organization-requests-table td:nth-child(7) {
    width: 15%;
  }
}

.org-requests__actions-spinner {
  min-height: 36px;
  min-width: 78px;
}

.org-requests__org-cell {
  min-width: 0;
}

.org-requests__org-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.org-requests__status-cell {
  min-width: 0;
}

.org-requests__status-badge {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.org-requests__status-badge-line {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-height: 20px;
}

.org-requests__status-cell .status {
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.org-requests__status-inline-spinner {
  min-height: 16px;
}

.org-requests__name-button {
  background: transparent;
  border: none;
  color: var(--color-text-900);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(15, 23, 42, 0.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.org-requests__name-button:hover {
  color: var(--color-success-500);
  text-decoration-color: rgba(34, 197, 94, 0.5);
}

.empty-state {
  margin-top: var(--space-6);
}

.empty-state__card {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  padding: var(--space-6);
}

.empty-state__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.empty-state__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-6);
}

.empty-card {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.maintenance-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 0;
}

.maintenance-workspace {
  display: grid;
  gap: 0;
  min-height: 0;
}

.maintenance-scroll-surface {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.maintenance-scroll-surface__pinned {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-4);
}

.maintenance-tabs-row {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  margin-bottom: 0;
  padding-bottom: 0;
}

.maintenance-tabs {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.maintenance-refresh-icon {
  background: var(--color-surface-0);
  border-color: var(--color-surface-300);
  color: var(--color-text-600);
  flex: 0 0 auto;
  height: 40px;
  width: 40px;
}

.maintenance-refresh-icon:hover {
  background: var(--color-surface-100);
  border-color: var(--color-surface-300);
  color: var(--color-primary-600);
}

.maintenance-refresh-icon.is-loading {
  color: var(--color-primary-600);
}

.maintenance-refresh-icon.is-loading .ui-icon {
  animation: spinner-rotate 0.8s linear infinite;
}

.maintenance-view {
  display: grid;
  gap: var(--space-5);
}

.maintenance-view--logs:not([hidden]) {
  padding-bottom: var(--space-6);
}

.maintenance-scroll-surface__content {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-4);
}

.maintenance-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

.maintenance-toolbar__copy {
  display: grid;
  gap: 4px;
}

.maintenance-toolbar__copy h3 {
  margin: 0;
}

.maintenance-actions {
  display: flex;
  gap: var(--space-2);
}

.maintenance-jobs-layout {
  align-items: stretch;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.maintenance-jobs-catalog,
.maintenance-jobs-detail {
  min-height: 0;
  min-width: 0;
}

.maintenance-jobs-catalog {
  height: 100%;
  overflow: hidden;
}

.maintenance-jobs-detail {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.maintenance-jobs-detail::-webkit-scrollbar {
  width: 6px;
}

.maintenance-jobs-detail::-webkit-scrollbar-track {
  background: transparent;
}

.maintenance-jobs-detail::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 999px;
}

.maintenance-jobs-detail::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.58);
}

.maintenance-catalog-card,
.maintenance-job-panel,
.maintenance-placeholder,
.maintenance-logs-panel {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
}

.maintenance-catalog-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.maintenance-section-heading {
  align-items: center;
  display: inline-flex;
  gap: var(--space-3);
  min-width: 0;
}

.maintenance-section-heading--compact {
  align-items: flex-start;
}

.maintenance-section-heading > div {
  min-width: 0;
}

.maintenance-section-heading h2,
.maintenance-section-heading h3,
.maintenance-section-heading h4 {
  margin: 0;
}

.maintenance-section-heading .meta {
  margin: 0;
}

.maintenance-section-icon {
  align-items: center;
  background: rgba(37, 99, 235, 0.11);
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: var(--radius-md);
  color: var(--color-primary-600);
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.maintenance-section-icon .ui-icon {
  height: 16px;
  width: 16px;
}

.maintenance-section-icon--muted {
  background: var(--color-surface-100);
  border-color: var(--color-surface-200);
  color: var(--color-text-500);
}

.maintenance-section-icon--tiny {
  border-radius: var(--radius-sm);
  height: 28px;
  width: 28px;
}

.maintenance-section-icon--tiny .ui-icon {
  height: 14px;
  width: 14px;
}

.maintenance-catalog-card__header,
.maintenance-job-panel__section-header {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: flex-start;
}

.maintenance-catalog-card__header {
  border-bottom: 1px solid var(--color-surface-200);
  padding-bottom: var(--space-3);
}

.maintenance-catalog-card__header .maintenance-section-icon {
  display: none;
}

.maintenance-catalog-card__header .maintenance-section-heading {
  gap: var(--space-2);
}

.maintenance-catalog-card__header .maintenance-section-heading .meta {
  display: none;
}

.maintenance-catalog-card__count {
  white-space: nowrap;
}

.maintenance-page .code-pill {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 6px;
  color: var(--color-text-700);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  padding: 4px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-jobs-list {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  justify-items: center;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-3) var(--space-3) 2px;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.maintenance-jobs-list::-webkit-scrollbar {
  width: 6px;
}

.maintenance-jobs-list::-webkit-scrollbar-track {
  background: transparent;
}

.maintenance-jobs-list::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 999px;
}

.maintenance-jobs-list::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.58);
}

.maintenance-catalog-card__pagination {
  border-top: 1px solid var(--color-surface-200);
  box-sizing: border-box;
  gap: var(--space-2);
  margin-top: var(--space-1);
  overflow: hidden;
  padding: var(--space-3) 0 0;
  width: 100%;
}

.maintenance-catalog-card__pagination .table-pagination__controls,
.maintenance-catalog-card__pagination .pagination-pages {
  flex-wrap: nowrap;
  min-width: 0;
}

.maintenance-catalog-card__pagination .table-pagination__controls {
  gap: 6px;
  max-width: 100%;
}

.maintenance-catalog-card__pagination .pagination-pages {
  gap: 4px;
  overflow: hidden;
}

.maintenance-catalog-card__pagination .pagination-button,
.maintenance-catalog-card__pagination .pagination-page {
  min-height: 36px;
  min-width: 42px;
  padding: 0 10px;
}

.maintenance-job-card {
  appearance: none;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 10px;
  padding: 14px 14px 12px;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  width: min(100%, 264px);
}

.maintenance-job-card:hover {
  border-color: var(--color-primary-300);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.maintenance-job-card--active {
  background: linear-gradient(180deg, rgba(230, 244, 243, 0.86), rgba(15, 118, 110, 0.025));
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12), 0 6px 16px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .maintenance-job-card--active {
  background: linear-gradient(180deg, rgba(91, 192, 184, 0.2), rgba(15, 23, 42, 0.92));
  border-color: rgba(91, 192, 184, 0.74);
  box-shadow: inset 0 0 0 1px rgba(91, 192, 184, 0.18), 0 10px 22px rgba(2, 6, 23, 0.42);
}

.maintenance-job-card__identity {
  align-items: flex-start;
  display: inline-flex;
  gap: var(--space-3);
  min-width: 0;
}

.maintenance-job-card__icon {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-500);
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.maintenance-job-card__icon .ui-icon {
  height: 16px;
  width: 16px;
}

.maintenance-job-card--active .maintenance-job-card__icon {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.24);
  color: var(--color-primary-600);
}

.maintenance-job-card__title-wrap {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.maintenance-job-card__title-wrap h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-job-card__latest-empty {
  white-space: nowrap;
}

.maintenance-job-card__header,
.maintenance-job-card__latest,
.maintenance-job-card__footer,
.maintenance-run-form__actions,
.maintenance-placeholder__body {
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: center;
}

.maintenance-job-card__header {
  align-items: flex-start;
  justify-content: flex-start;
}

.maintenance-job-card__run-state {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

.maintenance-job-card__latest {
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}

.maintenance-job-card__latest .status {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
}

.maintenance-job-card__schedule {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  min-width: 0;
}

.maintenance-job-card__footer {
  border-top: 1px solid rgba(227, 234, 244, 0.8);
  color: var(--color-text-500);
  margin-top: 2px;
  padding-top: 8px;
}

.maintenance-inline-icon {
  align-items: center;
  color: var(--color-text-500);
  display: inline-flex;
  flex: 0 0 auto;
}

.maintenance-inline-icon .ui-icon {
  height: 13px;
  width: 13px;
}

.maintenance-job-card__arrow {
  align-items: center;
  color: var(--color-text-300);
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.maintenance-job-card__arrow .ui-icon {
  height: 14px;
  width: 14px;
}

.maintenance-job-card:hover .maintenance-job-card__arrow,
.maintenance-job-card--active .maintenance-job-card__arrow {
  color: var(--color-primary-600);
}

.maintenance-job-card__description,
.maintenance-job-panel__description {
  color: var(--color-text-700);
  line-height: 1.5;
  margin: 0;
}

.maintenance-job-card__description {
  display: -webkit-box;
  font-size: var(--text-sm);
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.maintenance-job-panel {
  align-content: start;
  min-height: 0;
}

.maintenance-job-panel__section {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.maintenance-job-panel__section + .maintenance-job-panel__section {
  margin-top: var(--space-1);
}

.maintenance-job-panel__section-header .maintenance-section-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.maintenance-job-panel__section-header h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-job-panel__section-header .code-pill {
  flex: 0 0 auto;
  max-width: 42%;
}

.maintenance-job-highlights {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.maintenance-job-highlight {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 6px;
  min-height: 74px;
  padding: 10px 12px;
}

.maintenance-job-highlight .eyebrow {
  margin: 0;
}

.maintenance-job-highlight__value {
  color: var(--color-text-900);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  overflow-wrap: anywhere;
}

.maintenance-job-panel__summary pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.maintenance-job-panel__note,
.maintenance-job-panel__empty {
  padding: var(--space-5);
}

.maintenance-run-form {
  display: grid;
  gap: var(--space-4);
}

.maintenance-run-form textarea,
.maintenance-schedule-form textarea,
.maintenance-schedule-form input[type="datetime-local"],
.maintenance-schedule-form input[type="time"] {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-family: inherit;
  font-size: var(--text-sm);
  padding: 10px 12px;
}

.maintenance-run-form textarea:focus,
.maintenance-schedule-form textarea:focus,
.maintenance-schedule-form input[type="datetime-local"]:focus,
.maintenance-schedule-form input[type="time"]:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.field-label-with-help {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.35;
}

.field-label-optional {
  color: var(--color-text-400);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.field-help-icon {
  align-items: center;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 999px;
  color: var(--color-primary-600);
  cursor: help;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  height: 18px;
  justify-content: center;
  line-height: 1;
  width: 18px;
}

.field-help-icon:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.maintenance-run-form__actions {
  flex-wrap: wrap;
}

.maintenance-schedule-list {
  display: grid;
  gap: var(--space-3);
}

.maintenance-schedule-card {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.maintenance-schedule-card__header,
.maintenance-schedule-card__actions,
.maintenance-schedule-preview__times {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

.maintenance-schedule-card__facts {
  margin: 0;
}

.maintenance-schedule-form {
  display: grid;
  gap: var(--space-4);
}

.maintenance-schedule-form__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.maintenance-run-form__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.maintenance-schedule-form__weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.maintenance-schedule-form__weekday {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}

.maintenance-schedule-preview {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.maintenance-schedule-preview__times strong {
  display: block;
}

.maintenance-placeholder {
  min-height: 260px;
  align-content: center;
}

.ds-log-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: visible;
  padding: var(--space-5);
}

.ds-log-view__header {
  align-items: center;
  border-bottom: 1px solid var(--color-surface-200);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding-bottom: var(--space-4);
}

.ds-log-view__header-copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ds-log-view__toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}

.ds-log-view__search-slot,
.ds-log-view__search-control {
  flex: 1 1 320px;
  min-width: 220px;
}

.ds-log-view__search-control input {
  width: 100%;
}

.ds-log-view__inline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ds-log-view__inline-filter {
  display: inline-flex;
}

.ds-log-view__inline-filters select {
  min-height: 40px;
}

.ds-log-view__filter-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-height: 32px;
}

.ds-log-view__table-card {
  border-radius: var(--radius-md);
  padding-left: 0;
  padding-right: 0;
}

.ds-log-view__table tbody tr:hover {
  background: var(--color-surface-50);
}

.ds-log-view__pagination {
  margin-top: 0;
}

.ds-log-view__opened-marker-heading,
.ds-log-view__opened-marker-cell {
  box-sizing: border-box;
  max-width: 16px;
  min-width: 16px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  width: 16px;
}

.ds-log-view__opened-marker {
  background: var(--color-primary-600);
  border-radius: 999px;
  display: inline-block;
  height: 7px;
  width: 7px;
}

.ds-log-view__row-actions {
  text-align: center;
  vertical-align: middle;
  width: 56px;
}

.ds-log-view__row-action-list {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  min-width: 56px;
}

.ds-log-view__row-action {
  color: var(--color-primary-600);
  height: 32px;
  width: 32px;
}

.ds-log-view__row-action .ui-icon {
  height: 17px;
  width: 17px;
}

.modal--maintenance-log.maintenance-log-modal__dialog {
  gap: var(--space-5);
  max-height: min(88vh, 860px);
  max-width: min(1080px, calc(100vw - 32px));
  padding: var(--space-6);
  text-align: left;
  width: min(1080px, calc(100vw - 32px));
}

.maintenance-log-modal__section {
  display: grid;
  gap: var(--space-3);
}

.maintenance-log-modal__section + .maintenance-log-modal__section {
  border-top: 1px solid var(--color-surface-200);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

.maintenance-log-modal__section-header,
.maintenance-log-modal__summary-row,
.maintenance-log-modal__hero,
.maintenance-log-modal__item-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

.maintenance-log-modal__summary-actions {
  align-items: center;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
}

.maintenance-log-modal__summary-action {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  justify-content: center;
  min-height: 44px;
}

.maintenance-log-modal__summary-action-count {
  align-items: center;
  background: var(--color-primary-50);
  border-radius: 999px;
  color: var(--color-primary-600);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 800;
  justify-content: center;
  min-width: 24px;
  padding: 2px 7px;
}

.maintenance-log-modal__hero {
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.96));
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.maintenance-log-modal__hero h3,
.maintenance-log-modal__item-card h4 {
  color: var(--color-text-900);
  margin: 0;
}

.maintenance-log-modal__hero-badges {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.maintenance-log-modal__facts,
.maintenance-log-modal__item-facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.maintenance-log-modal__facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.maintenance-log-modal__facts > div,
.maintenance-log-modal__item-fact {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  min-width: 0;
  padding: 10px 12px;
}

.maintenance-log-modal__facts dt,
.maintenance-log-modal__item-fact dt {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 700;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.maintenance-log-modal__item-fact-label {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.maintenance-log-modal__expand-button {
  border-radius: var(--radius-sm);
  color: var(--color-text-500);
  flex: 0 0 auto;
  height: 28px;
  width: 28px;
}

.maintenance-log-modal__expand-button .ui-icon {
  height: 14px;
  width: 14px;
}

.maintenance-log-modal__expand-button:hover,
.maintenance-log-modal__expand-button:focus-visible {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.maintenance-log-modal__facts dd,
.maintenance-log-modal__item-fact dd {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.maintenance-log-modal__payload pre,
.maintenance-log-modal__items pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.maintenance-log-modal__payload {
  max-height: 280px;
  overflow: auto;
}

.maintenance-log-modal__item-list {
  display: grid;
  gap: var(--space-3);
}

.maintenance-log-modal__item-card {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.maintenance-log-modal__item-card pre,
.maintenance-log-modal__item-fact pre {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 12px;
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.maintenance-log-modal__item-facts {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.maintenance-log-modal__billing-card {
  gap: var(--space-4);
}

.maintenance-log-modal__billing-facts {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 0;
}

.maintenance-log-modal__billing-fact {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  min-width: 0;
  padding: 10px 12px;
}

.maintenance-log-modal__billing-fact dt {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.maintenance-log-modal__billing-fact dd {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.maintenance-log-modal__billing-jobs {
  display: grid;
  gap: var(--space-2);
}

.maintenance-log-modal__billing-job {
  align-items: center;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 10px 12px;
}

.maintenance-log-modal__billing-footer {
  align-items: center;
  border-top: 1px solid var(--color-surface-200);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  padding-top: var(--space-3);
}

.maintenance-log-modal__technical-button {
  min-height: 36px;
}

.maintenance-log-modal__item-pagination {
  margin-top: var(--space-2);
}

.maintenance-log-value-modal {
  z-index: 1010;
}

.maintenance-log-snapshot-modal {
  z-index: 1010;
}

.modal--maintenance-value.maintenance-log-value-modal__dialog {
  --modal-width-min: 760px;
  --modal-width-fluid: 82vw;
  --modal-width-max: 1280px;
  --modal-height-max: 88vh;
  gap: var(--space-5);
  padding: var(--space-6);
  text-align: left;
}

.modal--maintenance-snapshot.maintenance-log-snapshot-modal__dialog {
  --modal-width-min: 760px;
  --modal-width-fluid: 86vw;
  --modal-width-max: 1320px;
  --modal-height-max: 88vh;
  gap: var(--space-5);
  padding: var(--space-6);
  text-align: left;
}

.maintenance-log-value-modal__body {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.maintenance-log-value-modal__pre {
  color: var(--color-text-900);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  min-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.maintenance-log-snapshot-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
}

.maintenance-log-snapshot-modal__toolbar {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-3);
  justify-content: space-between;
}

.maintenance-log-snapshot-modal__search {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  display: inline-flex;
  flex: 1 1 420px;
  gap: var(--space-2);
  max-width: 560px;
  padding: 0 14px;
}

.maintenance-log-snapshot-modal__search .ui-icon {
  color: var(--color-text-500);
  height: 18px;
  width: 18px;
}

.maintenance-log-snapshot-modal__search input {
  background: transparent;
  border: 0;
  border-radius: 999px;
  flex: 1 1 auto;
  min-width: 0;
  outline: 0;
  padding: 10px 0;
  width: 100%;
}

.maintenance-log-snapshot-modal__search input:focus {
  box-shadow: none;
  outline: 0;
}

.maintenance-log-snapshot-modal__search:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
}

.maintenance-log-snapshot-modal__list {
  display: grid;
  gap: var(--space-3);
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--space-2);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.maintenance-log-snapshot-modal__account {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.maintenance-log-snapshot-modal__account summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  list-style: none;
  padding: var(--space-4);
}

.maintenance-log-snapshot-modal__account summary::-webkit-details-marker {
  display: none;
}

.maintenance-log-snapshot-modal__account summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.maintenance-log-snapshot-modal__account summary strong {
  color: var(--color-text-900);
  overflow-wrap: anywhere;
}

.maintenance-log-snapshot-modal__account summary small {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.maintenance-log-snapshot-modal__account summary .ui-icon {
  color: var(--color-text-500);
  flex: 0 0 auto;
  height: 18px;
  transition: transform 160ms ease;
  width: 18px;
}

.maintenance-log-snapshot-modal__account[open] summary .ui-icon {
  transform: rotate(180deg);
}

.maintenance-log-snapshot-modal__facts {
  border-top: 1px solid var(--color-surface-200);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 0;
  padding: var(--space-4);
}

.maintenance-log-snapshot-modal__fact {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  min-width: 0;
  padding: 10px 12px;
}

.maintenance-log-snapshot-modal__fact dt {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 700;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.maintenance-log-snapshot-modal__fact dd {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.maintenance-log-snapshot-modal__fact pre {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 12px;
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.maintenance-loading {
  display: grid;
  min-height: 320px;
  place-items: center;
}

.maintenance-loading--compact {
  min-height: 120px;
}

@media (min-width: 901px) {
  .page:has([data-maintenance-scroll-surface]) {
    height: 100dvh;
    overflow: hidden;
  }

  .page-external--content:has([data-maintenance-scroll-surface]) {
    flex: 1 1 auto;
    min-height: 0;
  }

  .maintenance-page {
    flex: 1 1 auto;
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }

  .maintenance-scroll-surface {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--space-5) var(--space-4) 0;
    scrollbar-color: rgba(100, 116, 139, 0.68) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  .maintenance-scroll-surface__pinned {
    background: var(--color-surface-50);
    border-bottom: 1px solid var(--color-surface-200);
    padding-bottom: var(--space-4);
    position: sticky;
    top: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    z-index: 2;
  }

  .maintenance-scroll-surface--content-scrolled .maintenance-scroll-surface__pinned {
    border-bottom-color: var(--color-surface-200);
    box-shadow: none;
  }

  .maintenance-scroll-surface__content {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: calc(var(--space-2) + 4px);
    transition: padding-top 160ms ease;
  }

  .maintenance-scroll-surface--content-scrolled .maintenance-scroll-surface__content {
    padding-top: var(--space-2);
  }

  .maintenance-scroll-surface::-webkit-scrollbar {
    width: 8px;
  }

  .maintenance-scroll-surface::-webkit-scrollbar-track {
    background: transparent;
  }

  .maintenance-scroll-surface::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.64);
    border-radius: 999px;
  }

  .maintenance-scroll-surface::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.78);
  }

  .maintenance-scroll-surface:has(.maintenance-view--jobs:not([hidden])) {
    overflow: hidden;
    scrollbar-width: auto;
  }

  .maintenance-scroll-surface:has(.maintenance-view--jobs:not([hidden]))::-webkit-scrollbar {
    width: 0;
  }

  .maintenance-view--jobs:not([hidden]) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .maintenance-view--jobs:not([hidden]) .maintenance-jobs-layout {
    flex: 1 1 auto;
    height: clamp(340px, calc(100dvh - 272px), 720px);
    max-height: calc(100dvh - 240px);
    min-height: 0;
  }
}

@media (max-width: 1024px) {
  .maintenance-tabs-row {
    align-items: stretch;
    flex-direction: column;
  }
  .maintenance-refresh-icon {
    align-self: flex-end;
  }
  .maintenance-tabs .tab-button {
    flex: 1 1 160px;
  }
  .maintenance-jobs-layout {
    grid-template-columns: 1fr;
  }
  .maintenance-job-card__header,
  .maintenance-job-card__latest,
  .maintenance-catalog-card__header,
  .maintenance-job-panel__section-header,
  .maintenance-run-form__actions,
  .maintenance-placeholder__body,
  .maintenance-log-modal__section-header,
  .maintenance-log-modal__summary-row,
  .maintenance-log-snapshot-modal__toolbar,
  .maintenance-schedule-card__header,
  .maintenance-schedule-card__actions,
  .maintenance-schedule-preview__times {
    align-items: flex-start;
    flex-direction: column;
  }
  .maintenance-job-highlights {
    grid-template-columns: 1fr;
  }
  .maintenance-log-modal__facts {
    grid-template-columns: 1fr;
  }
  .maintenance-log-snapshot-modal__search {
    flex-basis: auto;
    max-width: none;
    width: 100%;
  }
  .maintenance-log-snapshot-modal__facts {
    grid-template-columns: 1fr;
  }
  .maintenance-catalog-card,
  .maintenance-job-panel,
  .maintenance-logs-panel,
  .maintenance-placeholder {
    padding: var(--space-5);
  }
}


.status {
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--text-xs);
  max-width: 100%;
  overflow: hidden;
  padding: 4px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status--success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success-500);
}

.status--warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning-500);
}

.status--info {
  background: rgba(14, 116, 144, 0.12);
  color: var(--color-info-500);
}

.status--danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger-500);
}

.tier-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 6px 10px;
  text-transform: capitalize;
}

.tier-badge--free {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}

.tier-badge--trial {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.tier-badge--premium {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
}

.tier-badge--enterprise {
  background: rgba(139, 92, 246, 0.16);
  color: #6d28d9;
}

[data-theme="dark"] .tier-badge--free {
  background: rgba(148, 163, 184, 0.24);
  color: #d7dfec;
}

[data-theme="dark"] .tier-badge--trial {
  background: rgba(245, 158, 11, 0.24);
  color: #f9ddad;
}

[data-theme="dark"] .tier-badge--premium {
  background: rgba(16, 185, 129, 0.24);
  color: #a7f3d0;
}

[data-theme="dark"] .tier-badge--enterprise {
  background: rgba(139, 92, 246, 0.3);
  color: #ddd6fe;
}

.status--danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger-500);
}

.section-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.section-header__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.banner {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.banner:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.onboarding-empty {
  margin-bottom: var(--space-6);
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: var(--space-2) 0;
}

.onboarding-empty__card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(255, 255, 255, 0.8));
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 0.8fr);
  align-items: center;
  gap: var(--space-6);
  padding: 56px 64px;
  text-align: left;
  max-width: none;
  width: min(1200px, 96%);
  min-height: 65vh;
  margin: 0 auto;
}

[data-theme="dark"] .onboarding-empty__card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(17, 28, 52, 0.92));
  border-color: rgba(123, 138, 166, 0.36);
}

.onboarding-empty__image {
  max-width: 360px;
  width: 100%;
  height: auto;
  justify-self: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

.onboarding-empty__content {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.onboarding-empty__content h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}

.onboarding-empty__content .meta {
  font-size: var(--text-base);
  color: var(--color-text-600);
}

.onboarding-empty__cta {
  margin-top: var(--space-3);
  padding: 14px 26px;
}

.onboarding-empty__caret {
  margin-left: 6px;
  font-size: var(--text-sm);
}

.banner__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.banner__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.banner__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.warning-card {
  align-items: center;
  background: var(--color-surface-100);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr auto;
  padding: var(--space-4);
}

.warning-card__content h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.warning-card__meta {
  color: var(--color-text-500);
  font-size: var(--text-sm);
}

.warning-card__actions {
  display: flex;
  gap: var(--space-2);
}

.warning-card--critical {
  border-left: 4px solid var(--color-danger-500);
}

.warning-card--warning {
  border-left: 4px solid var(--color-warning-500);
}

.warning-card--info {
  border-left: 4px solid var(--color-info-500);
}

.integrations__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.integration-card {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.integration-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.integration-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.integration-card__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.integration-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.integration-card__actions {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}


.integration-card__meta {
  color: var(--color-text-500);
  font-size: var(--text-sm);
}

.metrics-row {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.inline-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  position: relative;
}

.inline-metric + .inline-metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--color-surface-200);
}

.inline-metric__label {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.inline-metric__value {
  font-size: var(--text-lg);
  font-weight: 600;
}

.sparkline {
  background: var(--color-surface-100);
  border-radius: var(--radius-md);
  padding: 8px 6px;
  height: 56px;
}

.sparkline--primary rect {
  fill: rgba(29, 108, 255, 0.18);
  stroke: var(--color-primary-500);
}

.sparkline--warning rect {
  fill: rgba(245, 158, 11, 0.2);
  stroke: var(--color-warning-500);
}

.sparkline-label {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.sparkline svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sparkline rect {
  fill: var(--color-primary-500);
  stroke: none;
}

.sparkline-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.integration-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  max-height: 1200px;
  opacity: 1;
  transition: max-height 180ms ease, opacity 180ms ease;
}

.integration-card__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.integration-card.is-collapsed .integration-card__body {
  max-height: 0;
  opacity: 0;
}

.collapse-toggle {
  align-items: center;
  background: var(--color-surface-100);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
}

.collapse-toggle::after {
  content: \"▴\";
  font-size: var(--text-lg);
  color: var(--color-text-500);
}

.integration-card.is-collapsed .collapse-toggle::after {
  content: \"▾\";
}


.aggregate-card {
  border: 2px solid var(--color-primary-50);
  background: var(--color-surface-0);
}

.finance-report-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 0;
}

.finance-report-shell__pinned {
  background: var(--color-surface-50);
  border-bottom: 1px solid var(--color-surface-200);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

.finance-report-shell__scroll-region {
  min-height: 0;
}

.finance-section-tabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.finance-section-tab {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-700);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--space-4);
}

.finance-section-tab--active {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}

.finance-summary-grid {
  container-type: inline-size;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 142px), 1fr));
  min-width: 0;
}

.finance-summary-card {
  background: linear-gradient(180deg, var(--color-surface-0) 0%, var(--color-surface-50) 100%);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 68px;
  min-width: 0;
  overflow: hidden;
  padding: 9px 10px 10px;
  position: relative;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  width: 100%;
}

.finance-summary-card::before {
  background: var(--color-surface-300);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.finance-summary-card[data-tone="accounts"]::before {
  background: var(--color-primary-500);
}

.finance-summary-card[data-tone="domains"]::before {
  background: var(--color-success-500);
}

.finance-summary-card[data-tone="revenue"]::before {
  background: var(--color-warning-500);
}

.finance-summary-card:hover {
  border-color: var(--color-surface-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.finance-summary-card__label {
  color: var(--color-text-600);
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-summary-card__value {
  color: var(--color-text-900);
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-summary-card__hint {
  color: var(--color-text-500);
  display: none;
  font-size: var(--text-xs);
  margin: auto 0 0;
}

.finance-report-toolbar .search,
.finance-report-toolbar .search input {
  min-width: min(260px, 100%);
}

.finance-report-toolbar--separated {
  border-top: 1px solid var(--color-surface-200);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
}

.table-card.finance-report-table-card {
  min-width: 0;
  overflow: hidden;
}

.finance-report-table-scroll {
  min-height: 0;
}

.finance-report-table-scroll > .table-pagination {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.finance-issues-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.finance-issues-card__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.finance-issues-card__header h2 {
  margin: 0;
}

.finance-issues-toolbar {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(220px, 1fr) auto;
}

.finance-issues-toolbar .search,
.finance-issues-toolbar .search input {
  min-width: 0;
  width: 100%;
}

.finance-issues-table {
  table-layout: fixed;
}

.finance-issue-modal {
  max-width: 820px;
  padding: var(--space-5);
  text-align: left;
  width: min(820px, calc(100% - 32px));
}

.finance-issue-modal__header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.finance-issue-modal__header h2 {
  margin: 0 0 2px;
}

.finance-issue-modal__body {
  max-height: min(68dvh, 680px);
  overflow: auto;
  padding-right: 2px;
}

.finance-issue-modal__layout {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}

.finance-issue-modal__section {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.finance-issue-modal__section h3 {
  margin: 0 0 var(--space-1);
}

.finance-issue-modal__facts {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--space-3) 0;
}

.finance-issue-modal__facts dt,
.finance-issue-modal__latest-error span,
.finance-issue-modal__note span {
  color: var(--color-text-500);
  font-size: var(--text-xs);
}

.finance-issue-modal__facts dd,
.finance-issue-modal__latest-error p,
.finance-issue-modal__note p {
  color: var(--color-text-900);
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}

.finance-issue-modal__latest-error,
.finance-issue-modal__note {
  display: grid;
  gap: 4px;
  margin: var(--space-3) 0;
}

.finance-issue-modal__resolution-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.finance-issues-evidence {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  color: var(--color-text-700);
  font-size: var(--text-xs);
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: var(--space-3);
  white-space: pre-wrap;
}

.finance-issues-resolution {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.finance-comp-pro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.finance-comp-pro__header {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.finance-comp-pro__header h2 {
  margin: 0;
}

.finance-comp-pro__selection {
  background: var(--color-surface-50);
  border: 1px dashed var(--color-surface-300);
  border-radius: var(--radius-md);
  min-height: 120px;
  padding: var(--space-4);
}

.finance-comp-pro__selected-card {
  align-items: start;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
}

.finance-comp-pro__selected-card h3 {
  margin: var(--space-1) 0;
}

.finance-comp-pro__selected-card dl {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-comp-pro__selected-card dt {
  color: var(--color-text-500);
  font-size: var(--text-xs);
}

.finance-comp-pro__selected-card dd {
  color: var(--color-text-900);
  font-weight: 700;
  margin: 0;
}

.finance-comp-pro__form-shell {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
}

.finance-comp-pro__operations {
  grid-template-columns: minmax(120px, 180px) minmax(180px, 220px) minmax(220px, 1fr) auto;
}

.finance-comp-pro__history-table {
  margin-top: 0;
  padding: var(--space-4);
}

.finance-comp-pro__history {
  display: flex;
  flex-direction: column;
}

.finance-comp-pro__history-header {
  margin-bottom: var(--space-3);
}

.finance-comp-pro__history-header h3 {
  margin: 0 0 2px;
}

.finance-comp-pro__history-toolbar {
  margin-bottom: var(--space-3);
}

.finance-comp-pro__history-table .table-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.finance-comp-pro__history-table td[data-label="Actions"] {
  text-align: right;
}

.page .finance-comp-pro__history-table .ghost-button--compact {
  font-size: var(--text-xs);
  line-height: 1;
  min-height: 22px;
  padding: 3px 9px;
  white-space: nowrap;
}

.org-workspace__renewal-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.page .org-workspace__renewal-actions .ghost-button--compact {
  font-size: var(--text-xs);
  height: 22px;
  line-height: 1;
  min-height: 22px;
  padding: 3px 9px;
  white-space: nowrap;
}

.finance-comp-pro-grant-modal,
.finance-comp-pro-detail-modal,
.finance-comp-pro-revoke-modal {
  max-width: 860px;
  width: min(860px, 100%);
}

.finance-comp-pro-grant-modal__body,
.finance-comp-pro-detail-modal__body,
.finance-comp-pro-revoke-modal__body {
  gap: var(--space-4);
}

.finance-comp-pro-grant-modal .finance-comp-pro__selected-card {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.finance-comp-pro-grant-modal .finance-comp-pro__form-shell {
  margin-top: 0;
}

.finance-comp-pro__revoke-confirmation {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.finance-comp-pro__detail-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.finance-comp-pro__detail-summary {
  align-items: start;
  border-bottom: 1px solid var(--color-surface-200);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: var(--space-3);
}

.finance-comp-pro__detail-summary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.finance-comp-pro__detail-summary strong,
.finance-comp-pro__detail-card dd {
  color: var(--color-text-900);
  font-weight: 800;
}

.finance-comp-pro__detail-summary span:not(.meta) {
  color: var(--color-text-500);
  overflow-wrap: anywhere;
}

.finance-comp-pro__detail-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-comp-pro__detail-card {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.finance-comp-pro__detail-card h4 {
  margin: 0 0 var(--space-3);
}

.finance-comp-pro__detail-card dl {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.finance-comp-pro__detail-card dl > div {
  min-width: 0;
}

.finance-comp-pro__detail-card dt {
  color: var(--color-text-500);
  font-size: var(--text-sm);
  margin-bottom: 2px;
}

.finance-comp-pro__detail-card dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.finance-comp-pro__detail-row--wide {
  grid-column: 1 / -1;
}

.organization-selector-modal {
  max-width: 760px;
  padding-top: var(--space-4);
  width: min(760px, 100%);
}

.organization-selector-modal__header {
  align-items: flex-start;
}

.organization-selector-modal__header h2 {
  margin: 0 0 2px;
}

.organization-selector-modal__toolbar {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 2px 4px;
}

.organization-selector-modal__toolbar .search,
.organization-selector-modal__toolbar .search input {
  min-width: 0;
  width: 100%;
}

.organization-selector-modal__count {
  color: var(--color-text-500);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}

.organization-selector-modal__chips {
  margin-top: calc(var(--space-2) * -1);
}

.organization-selector-modal__filter-drawer {
  z-index: 2;
}

.organization-selector-modal__list {
  align-content: start;
  display: grid;
  gap: 6px;
  grid-auto-rows: minmax(50px, auto);
  min-height: 0;
}

.organization-selector-modal__row {
  align-items: center;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto) 24px;
  min-height: 50px;
  padding: 8px 10px;
}

.organization-selector-modal__row input {
  height: 18px;
  width: 18px;
}

.organization-selector-modal__row-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.organization-selector-modal__row-copy strong,
.organization-selector-modal__row-copy small,
.organization-selector-modal__row-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-selector-modal__row-copy small {
  color: var(--color-text-500);
}

.organization-selector-modal__row-meta {
  color: var(--color-primary-600);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: right;
}

.organization-selector-modal__empty {
  align-self: center;
  justify-self: center;
}

@media (min-width: 901px) {
  .page:has(.finance-report-shell) {
    height: 100dvh;
    overflow: hidden;
  }

  .page-external--content:has(.finance-report-shell) {
    flex: 1 1 auto;
    min-height: 0;
  }

  .finance-report-shell {
    flex: 1 1 auto;
    gap: var(--space-4);
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--space-5) var(--space-4) 0;
  }

  .finance-report-shell__scroll-region {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .table-card.table-card--viewport.finance-report-table-card {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-5) var(--space-5) var(--space-4);
  }

  .finance-report-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--space-5) var(--space-3) 0;
    scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  .finance-report-table-scroll::-webkit-scrollbar {
    width: 6px;
  }

  .finance-report-table-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .finance-report-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4);
    border-radius: 999px;
  }

  .finance-report-table-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.56);
  }

  .finance-report-table {
    table-layout: auto;
  }

  .finance-report-table thead th {
    background: var(--color-surface-0);
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

@media (max-width: 1280px) {
  .finance-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  }

  .finance-summary-card {
    min-height: 66px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .finance-summary-card__label {
    font-size: 10.5px;
  }

  .finance-summary-card__value {
    font-size: 18px;
  }
}

@media (max-width: 960px) {
  .finance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-issue-modal__layout,
  .finance-issue-modal__facts,
  .finance-issues-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-report-toolbar {
    align-items: stretch;
  }

  .finance-comp-pro__header,
  .finance-comp-pro__selected-card,
  .organization-selector-modal__toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-selector-modal__row {
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .organization-selector-modal__row input {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  .organization-selector-modal__row-meta {
    grid-column: 1;
    text-align: left;
  }

  .finance-comp-pro__header {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-report-toolbar .users-toolbar__filters,
  .finance-issues-toolbar .users-toolbar__filters,
  .finance-issues-toolbar .users-toolbar__filters select,
  .finance-report-toolbar .users-toolbar__filters select {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .finance-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-summary-card {
    min-height: 66px;
  }

  .finance-report-toolbar .search,
  .finance-report-toolbar .search input {
    min-width: 0;
    width: 100%;
  }

  .finance-issues-card__header {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-issues-card__header .ghost-button {
    width: 100%;
  }

  .finance-section-tab,
  .finance-comp-pro__header .primary-button,
  .organization-selector-modal__footer button {
    width: 100%;
  }

  .organization-selector-modal__row-meta {
    text-align: left;
  }
}
.page--logs {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.integration-shell {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
}

.integration-shell__header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.integration-shell__title-row {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.integration-shell__actions {
  display: flex;
  gap: var(--space-2);
}

.integration-shell__meta {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.meta-card {
  background: var(--color-surface-50);
  border-radius: var(--radius-md);
  min-width: 0;
  padding: var(--space-4);
}

.meta-card h3 {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.meta-card p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.integration-shell__tabs {
  display: flex;
  gap: var(--space-2);
}

.tab-pill {
  background: var(--color-surface-100);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-text-700);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  max-width: 100%;
  min-height: 44px;
  overflow: hidden;
  padding: 8px 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-pill--active {
  background: var(--color-primary-50);
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
}

.integration-shell__panel {
  background: var(--color-surface-50);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.integration-create {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
}

.integration-create__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.integration-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.integration-form__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.filter-row {
  align-items: flex-end;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.filter-row__primary {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  flex: 1 1 600px;
}

.filter-row__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.filter-label {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.filter-field select {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-size: var(--text-sm);
  min-height: 44px;
  padding: 12px 14px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 36px;
}

.filter-field input {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-size: var(--text-sm);
  min-height: 44px;
  padding: 12px 14px;
}

.filter-field select:focus,
.filter-field input:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.filter-chip {
  background: var(--color-surface-100);
  border: none;
  border-radius: 999px;
  color: var(--color-text-700);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: var(--text-xs);
  padding: 6px 10px;
}

.filter-chip--locked {
  background: #ecfeff;
  border: 1px solid #99f6e4;
  color: #0f766e;
}

.filter-chip button {
  background: transparent;
  border: none;
  color: var(--color-text-500);
  cursor: pointer;
  font-size: var(--text-xs);
}

.table-status {
  align-items: center;
  color: var(--color-text-500);
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.table-status .spinner {
  display: none;
}

.table-status--loading .spinner {
  display: inline-flex;
}

.logs-skeleton td {
  padding: 10px 0;
}

.skeleton-line {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.15), rgba(148, 163, 184, 0.35), rgba(148, 163, 184, 0.15));
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  height: 14px;
  width: 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.filter-drawer {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 420px);
  z-index: 20;
}

.filter-drawer__overlay {
  background: rgba(15, 23, 42, 0.4);
}

.filter-drawer__panel {
  background: var(--color-surface-0);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  overflow-y: auto;
}

.filter-drawer__header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.filter-drawer__header .icon-button {
  align-self: flex-start;
  flex: 0 0 36px;
}

.filter-drawer__content {
  display: grid;
  gap: var(--space-3);
}

.filter-drawer__footer {
  margin-top: auto;
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding-top: var(--space-4);
}

.analytics-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.analytics-card {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.analytics-card__header h3 {
  font-size: var(--text-2xl);
  margin-top: var(--space-2);
}

.analytics-card__note {
  color: var(--color-text-500);
  font-size: var(--text-xs);
}

.analytics-card__chart {
  margin-top: var(--space-3);
}

.analytics-card--list {
  gap: var(--space-2);
}

.analytics-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-700);
  font-size: var(--text-sm);
}

.analytics-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.table-card {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  padding: var(--space-4);
}

.table-card--viewport {
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 62vh, 760px);
}

.table-card--viewport > .table {
  flex: 0 0 auto;
}

.table-card--viewport > .table:has(td.table-empty-cell) {
  flex: 1 1 auto;
}

.table-card--viewport > .table-pagination {
  margin-top: auto;
}

.table-card--viewport > .table-pagination:empty {
  display: none;
}

.table-pagination {
  align-items: center;
  color: var(--color-text-500);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-3) var(--space-2) 0;
}

.table-pagination__controls {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.table-card--viewport .table td.table-empty-cell {
  height: clamp(260px, 38vh, 520px);
  padding-top: 0;
  text-align: center;
  vertical-align: middle;
}

.customer-logs-json {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  font-family: "SFMono-Regular", "SFMono", "IBM Plex Mono", "Menlo", monospace;
  font-size: var(--text-xs);
  line-height: 1.5;
  max-height: 360px;
  overflow: auto;
  padding: var(--space-3);
  white-space: pre-wrap;
  word-break: break-word;
}

.page--customer-logs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.customer-logs-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: visible;
  padding: var(--space-5);
}

.customer-logs-shell__header {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.customer-logs-shell__header-copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.customer-logs-shell__search-row {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-2);
  width: 100%;
}

.customer-logs-shell__search-row .search {
  min-width: 320px;
  width: clamp(320px, 34vw, 520px);
}

.customer-logs-filter-toggle {
  color: #0f766e;
}

.customer-logs-filter-toggle .ui-icon {
  color: inherit;
}

.customer-logs-filter-toggle[data-icon-label]::after {
  top: calc(100% + 8px);
}

.customer-logs-filter-toggle:hover {
  background: rgba(15, 118, 110, 0.12);
  border-color: rgba(15, 118, 110, 0.2);
}

.customer-logs-table-wrap {
  overflow-x: visible;
}

.customer-logs-filter-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: 0;
  min-height: 32px;
}

.customer-logs-filter-chips .filter-chips__list {
  flex: 1 1 auto;
  width: 100%;
}

.customer-logs-filter-chips .filter-chip {
  box-sizing: border-box;
  line-height: 1.2;
  max-width: 100%;
  min-height: 32px;
  white-space: nowrap;
}

.customer-logs-filter-chips .filter-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-logs-filter-chips .filter-chip .ui-icon {
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.customer-logs-filter-chips .filter-clear-button {
  margin-top: 6px;
}

.filter-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 32px;
}

.filter-clear-button {
  background: transparent;
  border: none;
  color: var(--color-primary-600);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0;
}

.filter-clear-button:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.customer-logs-filter-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.customer-logs-header-cell {
  display: flex;
  align-items: center;
}

.customer-logs-sort-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: 6px;
  padding: 0;
}

.customer-logs-sort-button__arrow {
  color: var(--color-text-300);
  flex: 0 0 auto;
  height: 12px;
  transition: transform 0.16s ease, color 0.16s ease;
  width: 12px;
}

.customer-logs-sort-button:hover .customer-logs-sort-button__arrow,
.customer-logs-sort-button:focus-visible .customer-logs-sort-button__arrow,
.customer-logs-sort-button.is-active .customer-logs-sort-button__arrow {
  color: var(--color-primary-600);
}

.customer-logs-sort-button.is-active {
  color: var(--color-primary-600);
}

.customer-logs-sort-button.is-asc .customer-logs-sort-button__arrow {
  transform: rotate(0deg);
}

.customer-logs-sort-button.is-desc .customer-logs-sort-button__arrow {
  transform: rotate(180deg);
}

.customer-logs-sort-button:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.cell-truncate {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.logs-table td .cell-truncate {
  max-width: 100%;
}

.cell-truncate--message {
  display: -webkit-box;
  max-width: none;
  overflow: hidden;
  text-overflow: initial;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.pagination-pages {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.pagination-ellipsis {
  color: var(--color-text-500);
  padding: 0 4px;
}

.pagination-button,
.pagination-page {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-700);
  cursor: pointer;
  font-size: var(--text-sm);
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pagination-button:hover,
.pagination-page:hover {
  background: var(--color-surface-100);
  border-color: var(--color-surface-200);
}

.pagination-page--active {
  background: var(--color-surface-100);
  border-color: var(--color-surface-200);
  color: var(--color-text-900);
}

.pagination-button:disabled,
.pagination-page:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.logs-table-section {
  margin-top: var(--space-6);
}

.logs-table tbody tr {
  cursor: default;
  transition: background 160ms ease;
}

.logs-table tbody tr:hover {
  background: var(--color-surface-50);
}

.logs-table th,
.logs-table td {
  cursor: default;
  white-space: normal;
  vertical-align: top;
}

.logs-table {
  table-layout: fixed;
}

.logs-table th:nth-child(1) {
  width: 172px;
}

.logs-table th:nth-child(2) {
  width: 84px;
}

.logs-table th:nth-child(3) {
  width: 180px;
}

.logs-table th:nth-child(5) {
  width: 170px;
}

.logs-table th:nth-child(6),
.logs-table td:nth-child(6) {
  text-align: center;
  width: 90px;
}

.customer-logs-open-detail {
  margin-inline: auto;
}

.customer-log-modal-overlay {
  z-index: 35;
}

.org-workspace__diagnostic-toolbar {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-2);
}

.org-workspace__diagnostic-log-view > .ds-log-view__header {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.org-workspace__diagnostic-search-row {
  flex: 1 1 auto;
  margin-top: 0;
  min-width: 0;
}

.org-workspace__diagnostic-search-row .search {
  min-width: 280px;
  width: min(100%, 560px);
}

.org-workspace__diagnostic-chips {
  align-items: flex-start;
  margin: var(--space-3) 0 var(--space-4);
  width: 100%;
}

.org-workspace__diagnostic-chips .filter-chips__list {
  flex: 1 1 auto;
  width: 100%;
}

.org-workspace__diagnostic-chips .filter-chip {
  max-width: 100%;
  white-space: nowrap;
}

.org-workspace__diagnostic-chips .filter-clear-button {
  margin-top: 6px;
}

.org-workspace__diagnostic-table-card {
  overflow-x: auto;
}

.org-workspace__diagnostic-table {
  table-layout: fixed;
}

.org-workspace__diagnostic-table th:nth-child(1),
.org-workspace__diagnostic-table td:nth-child(1) {
  width: 16px;
}

.org-workspace__diagnostic-table th:nth-child(2),
.org-workspace__diagnostic-table td:nth-child(2) {
  width: 15%;
}

.org-workspace__diagnostic-table th:nth-child(3),
.org-workspace__diagnostic-table td:nth-child(3) {
  width: 8%;
}

.org-workspace__diagnostic-table th:nth-child(4),
.org-workspace__diagnostic-table td:nth-child(4) {
  width: 24%;
}

.org-workspace__diagnostic-table th:nth-child(5),
.org-workspace__diagnostic-table td:nth-child(5) {
  width: 29%;
}

.org-workspace__diagnostic-table th:nth-child(6),
.org-workspace__diagnostic-table td:nth-child(6) {
  width: 14%;
}

.org-workspace__diagnostic-table th:nth-child(7),
.org-workspace__diagnostic-table td:nth-child(7) {
  width: 56px;
}

.org-workspace__customer-data-panel {
  display: grid;
  gap: var(--space-4);
}

.org-workspace__customer-data-tabs {
  border-bottom: 1px solid var(--color-surface-200);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.tab-button--compact {
  font-size: var(--text-sm);
  min-height: 34px;
  padding: 7px 12px;
}

.org-workspace__customer-data-toolbar {
  align-items: flex-end;
  margin-top: 0;
}

.org-workspace__customer-data-policy-picker {
  min-width: 220px;
}

.org-workspace__customer-data-chips {
  margin: 0 0 var(--space-2);
}

.org-workspace__customer-data-table-card {
  overflow-x: auto;
}

.org-workspace__customer-data-table th,
.org-workspace__customer-data-table td {
  white-space: normal;
  vertical-align: top;
}

.modal--customer-log {
  --modal-width-min: 860px;
  --modal-width-fluid: 78vw;
  --modal-width-max: 1240px;
  --modal-height-max: 860px;
  text-align: left;
}

.customer-log-modal__header {
  align-items: flex-start;
}

.customer-log-modal__body {
  display: grid;
  gap: var(--space-4);
}

.customer-log-modal__section {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.customer-log-modal__section h3 {
  margin: 0;
}

.customer-log-modal__summary {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.customer-log-modal__summary div {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: 6px;
  min-height: 68px;
  padding: 10px 12px;
}

.customer-log-modal__summary dt {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.customer-log-modal__summary dd {
  color: var(--color-text-900);
  font-size: var(--text-sm);
}
}

.chip {
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  text-transform: capitalize;
}

.chip--success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success-500);
}

.chip--warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning-500);
}

.chip--danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger-500);
}

.chip--neutral {
  background: var(--color-surface-100);
  color: var(--color-text-500);
}

.sparkline--compact {
  height: 44px;
  padding: 6px;
}

.sparkline--danger rect {
  fill: rgba(239, 68, 68, 0.2);
  stroke: var(--color-danger-500);
}

.drawer {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  z-index: 10;
}

.drawer__overlay {
  background: rgba(15, 23, 42, 0.4);
}

.drawer__panel {
  background: var(--color-surface-0);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  border-radius: 0;
  padding: var(--space-6);
  overflow-y: auto;
}

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.drawer__content {
  background: var(--color-surface-0);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.drawer-section {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.drawer-section h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.drawer-section dl {
  display: grid;
  gap: var(--space-2);
}

.drawer-section dl div {
  display: grid;
  gap: var(--space-1);
}

.drawer-section dt {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.drawer-section dd {
  font-size: var(--text-sm);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: var(--color-text-900);
  font-size: var(--text-sm);
  padding: 12px 14px;
}

.form-field input,
.form-field select {
  min-height: 44px;
}

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 36px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.form-field textarea {
  resize: vertical;
}

.form-error {
  color: var(--color-danger-500);
  font-size: var(--text-xs);
  font-weight: 500;
  min-height: 16px;
}

.form-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-danger-500);
  padding: var(--space-3);
}

.form-banner--info {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.24);
  color: #075985;
}

.page-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  gap: var(--space-2);
  color: var(--color-text-600);
  text-align: center;
}

.spinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 3px solid rgba(148, 163, 184, 0.35);
  border-top-color: var(--color-text-900);
  animation: spinner-rotate 0.9s linear infinite;
}

.spinner--lg {
  height: 36px;
  width: 36px;
}

.spinner--sm {
  height: 16px;
  width: 16px;
  border-width: 2px;
}

.table-spinner {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}

.content-spinner {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 180px;
}

.inline-spinner {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

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

.success-banner {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: var(--radius-md);
  color: var(--color-success-500);
  padding: var(--space-3);
}

.toast-stack {
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: fixed;
  right: 24px;
  z-index: 1200;
  pointer-events: none;
}

.toast {
  align-items: flex-start;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto 1fr auto;
  min-width: 240px;
  max-width: min(360px, 90vw);
  padding: 14px 16px;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
  pointer-events: auto;
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.toast.is-hiding {
  opacity: 0;
  transform: translateY(10px);
}

.toast__icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  height: 24px;
  width: 24px;
}

.toast__icon .ui-icon {
  height: 20px;
  width: 20px;
  color: currentColor;
}

.toast--success .toast__icon {
  color: var(--color-success-500);
}

.toast--error .toast__icon {
  color: var(--color-danger-500);
}

.toast__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.toast__title {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  font-weight: 600;
}

.toast__message {
  color: var(--color-text-500);
  font-size: var(--text-xs);
}

.toast__close {
  background: transparent;
  border: none;
  color: var(--color-text-500);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.toast__close:hover {
  color: var(--color-text-700);
}

.overview-placeholder {
  margin-top: var(--space-6);
}

.overview-placeholder__card {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

body.modal-open,
html.modal-open {
  overflow: hidden;
}

.modal-overlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-5);
  position: fixed;
  z-index: 1000;
}

.modal {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: min(90vh, 720px);
  max-width: 640px;
  padding: var(--space-5);
  width: min(100%, 640px);
}

.modal__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.modal__close {
  background: transparent;
  border: none;
  color: var(--color-text-500);
  cursor: pointer;
  font-size: var(--text-sm);
}

.modal__close:hover {
  color: var(--color-text-700);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--space-2);
  scrollbar-gutter: stable;
}

.modal__footer {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.modal--policy {
  text-align: left;
  padding: var(--space-4);
}

.modal--policy .modal__body {
  gap: var(--space-5);
}

.token-panel {
  align-items: center;
  background: var(--color-surface-50);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  padding: var(--space-3);
  gap: var(--space-3);
}

.token-panel code {
  font-size: var(--text-xs);
  word-break: break-all;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: var(--color-text-900);
  font-size: var(--text-sm);
  padding: 12px 14px;
}

.form-field input,
.form-field select {
  min-height: 44px;
}

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 36px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.form-field textarea {
  resize: vertical;
}

.form-error {
  color: var(--color-danger-500);
  font-size: var(--text-xs);
  font-weight: 500;
  min-height: 16px;
}

.form-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-danger-500);
  padding: var(--space-3);
}

.success-banner {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: var(--radius-md);
  color: var(--color-success-500);
  padding: var(--space-3);
}

.overview-placeholder {
  margin-top: var(--space-6);
}

.overview-placeholder__card {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.modal-overlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-5);
  position: fixed;
  z-index: 1000;
}

.modal {
  background: var(--color-surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: min(90vh, 720px);
  max-width: 640px;
  padding: var(--space-5);
  width: min(100%, 640px);
}

.modal__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.modal__close {
  background: transparent;
  border: none;
  color: var(--color-text-500);
  cursor: pointer;
  font-size: var(--text-sm);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--space-2);
  scrollbar-gutter: stable;
}

.modal__footer {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  .modal {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .modal__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .modal__footer button {
    width: 100%;
  }
}

.token-panel {
  align-items: center;
  background: var(--color-surface-50);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  padding: var(--space-3);
  gap: var(--space-3);
}

.token-panel code {
  font-size: var(--text-xs);
  word-break: break-all;
}
@media (max-width: 700px) {
  .integrations__grid {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .sidebar-open {
    overflow: hidden;
  }

  .shell {
    grid-template-columns: 1fr;
    padding: 0;
    position: relative;
  }

  .mobile-sidebar-bar {
    align-items: center;
    background: var(--color-surface-0);
    border-bottom: 1px solid var(--color-surface-200);
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 64px;
    padding: 0 var(--space-4);
    position: sticky;
    top: 0;
    z-index: 12;
  }

  .mobile-sidebar-brand {
    align-items: center;
    display: inline-flex;
    gap: var(--space-3);
    min-width: 0;
  }

  .mobile-sidebar-brand .logo__mark {
    height: 36px;
    width: 36px;
    font-size: var(--text-xs);
  }

  .mobile-sidebar-brand .logo__text {
    font-size: var(--text-md);
    white-space: nowrap;
  }

  .mobile-sidebar-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid var(--color-surface-200);
    border-radius: 999px;
    color: var(--color-text-700);
    display: inline-flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
  }

  .mobile-sidebar-toggle__icon {
    align-items: center;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    width: 24px;
  }

  .mobile-sidebar-toggle__icon .ui-icon {
    color: var(--color-text-700);
    height: 22px;
    stroke: currentColor;
    width: 22px;
  }

  .mobile-sidebar-toggle__icon .mobile-sidebar-toggle__icon-open {
    display: block;
  }

  .mobile-sidebar-toggle__icon .mobile-sidebar-toggle__icon-close {
    display: none;
  }

  .shell--sidebar-open .mobile-sidebar-toggle__icon .mobile-sidebar-toggle__icon-open {
    display: none;
  }

  .shell--sidebar-open .mobile-sidebar-toggle__icon .mobile-sidebar-toggle__icon-close {
    display: block;
  }

  .mobile-sidebar-toggle__label {
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .sidebar-backdrop {
    background: rgba(15, 23, 42, 0.48);
    border: 0;
    inset: 0;
    position: fixed;
    z-index: 18;
  }

  .sidebar {
    align-items: stretch;
    background: var(--color-surface-50);
    border-right: 1px solid var(--color-surface-200);
    border-bottom: none;
    box-shadow: var(--shadow-lg);
    border-radius: 0;
    height: 100vh;
    left: 0;
    max-width: 320px;
    overflow-y: auto;
    padding: var(--space-4);
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    width: min(86vw, 320px);
    z-index: 20;
  }

  .shell--sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    flex: 1 1 auto;
    gap: var(--space-2);
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 1px;
    padding-inline-end: var(--space-2);
    scrollbar-gutter: stable;
  }

  .sidebar__footer {
    background: var(--color-surface-50);
    margin-top: auto;
    margin-left: 0;
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    padding-top: 1px;
    position: sticky;
    bottom: var(--space-2);
  }

  .sidebar__footer::before {
    display: none;
  }

  .user-card {
    align-items: center;
    background: var(--color-surface-0);
    border: 1px solid var(--color-surface-200);
    gap: var(--space-2);
    grid-template-columns: auto 1fr;
    display: grid;
    padding: 10px 12px;
  }

  .user-card .avatar {
    height: 40px;
    width: 40px;
  }

  .user-card__info {
    min-width: 0;
  }

  .user-card__name,
  .user-card__role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-card .icon-button--ghost {
    align-items: center;
    background: var(--color-surface-50);
    border: 1px solid var(--color-surface-200);
    border-radius: var(--radius-md);
    color: var(--color-text-700);
    display: inline-flex;
    gap: var(--space-2);
    grid-column: 1 / -1;
    min-height: 44px;
    justify-content: center;
    margin-left: 0;
    margin-top: var(--space-2);
    padding: 0 10px;
    width: 100%;
  }

  .user-card .icon-button--ghost::after {
    display: none;
  }

  .user-card .icon-button--ghost .mobile-logout-label {
    display: inline;
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .user-card [data-icon-label]::after {
    display: none;
  }

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

@media (max-width: 700px) {
  .sidebar {
    align-items: stretch;
    border-radius: 0;
    box-shadow: var(--shadow-lg);
  }

  .sidebar__nav {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .nav-item {
    width: 100%;
    text-align: left;
  }

  .sidebar__footer {
    margin-left: 0;
    width: 100%;
  }

  .user-card {
    width: 100%;
  }

  .page {
    padding: var(--space-4);
  }

  .banner {
    padding: var(--space-4);
  }

  .onboarding-empty__card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-6) var(--space-4);
  }

  .onboarding-empty__image {
    max-width: 240px;
  }

  .onboarding-empty__content {
    align-items: center;
  }

  .warning-card {
    grid-template-columns: 1fr;
  }

  .warning-card__actions {
    justify-content: flex-start;
  }

  .banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .metric {
    flex-direction: column;
    align-items: flex-start;
  }

  .metrics-row {
    border-radius: var(--radius-md);
    grid-template-columns: 1fr 1fr;
  }

  .inline-metric {
    padding: 10px 12px;
  }

  .inline-metric + .inline-metric::before {
    display: none;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .card--wide {
    grid-column: span 1;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .integration-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .integration-hero__actions {
    align-items: flex-start;
    width: 100%;
  }

  .tab-bar {
    width: 100%;
    overflow-x: auto;
  }

  .drawer {
    grid-template-columns: 1fr;
  }

  .drawer__panel {
    height: 75vh;
    margin-top: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }

  .filter-row {
    align-items: stretch;
  }

  .filter-row__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .filter-drawer {
    grid-template-columns: 1fr;
  }

  .filter-drawer__panel {
    height: 75vh;
    margin-top: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

.policies {
  display: grid;
  gap: var(--space-5);
}

.policies-table {
  table-layout: fixed;
}

.policies-table th:nth-child(1),
.policies-table td:nth-child(1) {
  width: 22%;
}

.policies-table th:nth-child(2),
.policies-table td:nth-child(2) {
  width: 10%;
}

.policies-table th:nth-child(3),
.policies-table td:nth-child(3) {
  width: 13%;
}

.policies-table th:nth-child(4),
.policies-table td:nth-child(4) {
  width: 10%;
}

.policies-table th:nth-child(5),
.policies-table td:nth-child(5) {
  width: 25%;
}

.policies-table th:nth-child(6),
.policies-table td:nth-child(6) {
  width: 12%;
  white-space: nowrap;
}

.policies-table th:nth-child(7),
.policies-table td:nth-child(7) {
  width: 8%;
}

.policies-table th:last-child,
.policies-table td:last-child {
  text-align: center;
}

.policies-table .table-actions {
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

.policies-table td:nth-child(5) {
  max-width: 360px;
}

.policies-table td:nth-child(1),
.policies-table td:nth-child(5) {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

.policy-scope {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.policy-scope__option {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  font-weight: 500;
}

.policy-scope__option.is-disabled {
  color: var(--color-text-400);
}

.policy-integrations {
  background: transparent;
  border: none;
  border-radius: 0;
  display: grid;
  gap: var(--space-2);
  max-height: 200px;
  overflow: auto;
  padding: 0;
}

.policy-integration {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding: 4px 0;
}

.policy-groups {
  display: grid;
  gap: var(--space-4);
}

.policy-group {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-100);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.policy-group__header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

.policy-group__conditions {
  display: grid;
  gap: var(--space-4);
}

.policy-condition {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(120px, 0.9fr) minmax(160px, 1.1fr) minmax(200px, 1.6fr) auto;
  min-width: 0;
}

.policy-condition__remove {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-danger-500);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  justify-self: end;
  align-self: center;
  padding: 0;
  width: 32px;
}

.policy-condition__remove:hover {
  background: rgba(239, 68, 68, 0.1);
}

.policy-condition__remove svg {
  height: 16px;
  width: 16px;
}

.policy-condition__remove .ui-icon {
  color: inherit;
}

.policy-condition select,
.policy-condition input {
  width: 100%;
}

.policy-condition select,
.policy-condition input[type="text"] {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: var(--color-text-900);
  font-size: var(--text-sm);
  min-height: 44px;
  padding: 12px 14px;
}

.policy-condition select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 36px;
}

.policy-condition select:focus,
.policy-condition input[type="text"]:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.policy-condition__browsers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.policy-checkbox {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--text-xs);
}

.policy-checkbox input[type="checkbox"],
.policy-integration input[type="checkbox"],
.policy-scope__option input[type="radio"] {
  appearance: none;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  height: 18px;
  line-height: 1;
  margin: 0;
  min-height: 18px;
  min-width: 18px;
  padding: 0;
  position: relative;
  flex: 0 0 18px;
  width: 18px;
}

.policy-scope__option input[type="radio"] {
  border-radius: 999px;
}

.policy-checkbox input[type="checkbox"]::after,
.policy-integration input[type="checkbox"]::after,
.policy-scope__option input[type="radio"]::after {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  height: 8px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 5px;
}

.policy-checkbox input[type="checkbox"]:checked,
.policy-integration input[type="checkbox"]:checked,
.policy-scope__option input[type="radio"]:checked {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.policy-checkbox input[type="checkbox"]:checked::after,
.policy-integration input[type="checkbox"]:checked::after,
.policy-scope__option input[type="radio"]:checked::after {
  opacity: 1;
}

.policy-checkbox input[type="checkbox"]:focus {
  box-shadow: inset 0 0 0 1px var(--color-surface-0), 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.policy-integration input[type="checkbox"]:focus,
.policy-scope__option input[type="radio"]:focus {
  box-shadow: inset 0 0 0 1px var(--color-surface-0), 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.policy-condition__tag {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(96px, 0.8fr) minmax(160px, 1.4fr);
  min-width: 0;
}

.policy-condition__tag input,
.policy-condition__tag select {
  min-width: 0;
}

.policy-condition .ghost-button--compact {
  justify-self: end;
  white-space: nowrap;
}

.modal--policy .modal__body {
  overflow-x: hidden;
}

.policy-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.policy-form__section {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-100);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.policy-form__section-header {
  display: grid;
  gap: var(--space-2);
}

.policy-form__section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.policy-form__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.policy-form__stack {
  display: grid;
  gap: var(--space-4);
}

.policy-form__stack--compact {
  gap: var(--space-2);
}

.policy-form__section .form-field > label {
  margin-bottom: var(--space-1);
}

.policy-scope-divider {
  margin: 0;
}

.policy-scope-divider--compact {
  margin: 0;
}

.modal--policy .modal__body {
  padding-right: var(--space-4);
}

.policy-form__actions {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  flex-wrap: wrap;
}

.policy-form__actions .form-error {
  margin-left: auto;
}

.policy-scope-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-4);
  color: var(--color-text-600);
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .policy-condition {
    grid-template-columns: 1fr;
  }

  .policy-condition__tag {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .policy-form__grid {
    grid-template-columns: 1fr;
  }

  .policy-form__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .policy-form__actions .form-error {
    margin-left: 0;
  }
}

.page .primary-button,
.page .secondary-button,
.page .ghost-button,
.page .danger-button,
.filter-drawer .primary-button,
.filter-drawer .secondary-button,
.filter-drawer .ghost-button,
.filter-drawer .danger-button,
.drawer .primary-button,
.drawer .secondary-button,
.drawer .ghost-button,
.drawer .danger-button {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
}

.page .primary-button,
.filter-drawer .primary-button,
.drawer .primary-button {
  box-shadow: none;
}

.page .primary-button:hover,
.filter-drawer .primary-button:hover,
.drawer .primary-button:hover {
  box-shadow: var(--shadow-sm);
}

.page .primary-button:active,
.filter-drawer .primary-button:active,
.drawer .primary-button:active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transform: none;
}

.page .secondary-button,
.filter-drawer .secondary-button,
.drawer .secondary-button {
  color: var(--color-primary-500);
}

.page .secondary-button:active,
.filter-drawer .secondary-button:active,
.drawer .secondary-button:active {
  box-shadow: inset 0 0 0 1px var(--color-surface-200);
  transform: none;
}

.page .ghost-button:active,
.filter-drawer .ghost-button:active,
.drawer .ghost-button:active {
  box-shadow: inset 0 0 0 1px var(--color-surface-200);
}

.page .danger-button:active,
.filter-drawer .danger-button:active,
.drawer .danger-button:active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transform: none;
}

.page .field input,
.page .field select {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-size: var(--text-sm);
  min-height: 44px;
  padding: 12px 14px;
}

.page .field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 36px;
}

.page .field input:focus,
.page .field select:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.users-toolbar {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.users {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auditing {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.audit-cell {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.audit-cell__icon {
  display: inline-flex;
}

.audit-cell__icon .ui-icon {
  color: var(--color-primary-500);
  height: 16px;
  opacity: 0.7;
  width: 16px;
}

.users-toolbar__filters {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.users-toolbar__filters > [data-ds-audit-filter="type"] {
  height: 44px;
  min-height: 44px;
}

.users-toolbar__filters > [data-ds-audit-export] {
  height: 42px;
  min-height: 42px;
  padding-bottom: 0;
  padding-top: 0;
}

.ds-audit-export-button {
  background: var(--color-primary-500);
}

.ds-audit-export-button:hover {
  background: var(--color-primary-600);
}

.users-toolbar select {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  min-height: 44px;
  padding: 10px 14px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 36px;
}

.users-toolbar select:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.select-standard {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-size: var(--text-sm);
  min-height: 44px;
  padding: 10px 14px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 36px;
}

.select-standard:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.users-table td {
  vertical-align: middle;
}

.users-table th,
.users-table td {
  padding: 16px 12px;
}

.users-table th:last-child,
.users-table td:last-child {
  padding-right: 20px;
  text-align: right;
}

.users-table .table-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.user-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.users-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.users-primary__body {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-between;
}

.users-primary__rules {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 520px;
}

.user-form__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-surface-100);
  border-radius: var(--radius-lg);
  background: var(--color-surface-50);
}

.user-form__section + .user-form__section {
  margin-top: var(--space-2);
}

.user-form__section--plain {
  border: none;
  background: transparent;
  padding: var(--space-3) 0;
}

.user-form__section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.user-form__section-header--inline {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--space-4);
}

.user-form__section-header--inline button {
  white-space: nowrap;
  flex: 0 0 auto;
}

.user-form__section-header--inline > div {
  flex: 1 1 auto;
  min-width: 0;
}

.user-form__section-title {
  font-size: var(--text-lg);
}

.user-form__divider {
  border-bottom: 1px solid var(--color-surface-100);
  margin: var(--space-2) 0;
}

.user-status-inline {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.user-status-toggle {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.user-status-toggle__label {
  font-weight: 600;
}

.toggle {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  position: relative;
}

.toggle input {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}

.toggle__track {
  background: var(--color-surface-200);
  border-radius: 999px;
  height: 24px;
  position: relative;
  transition: background 0.2s ease;
  width: 44px;
}

.toggle__track::after {
  background: var(--color-surface-0);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  content: "";
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 0.2s ease;
  width: 18px;
}

.toggle input:checked + .toggle__track {
  background: var(--color-primary-500);
}

.toggle input:checked + .toggle__track::after {
  transform: translateX(20px);
}

.toggle input:disabled + .toggle__track {
  background: var(--color-surface-200);
  cursor: not-allowed;
  opacity: 0.6;
}

.user-form__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.user-form__grid--profile {
  row-gap: calc(var(--space-1) / 2);
  column-gap: var(--space-4);
}

.user-type {
  display: grid;
  gap: var(--space-2);
}

.user-type__option {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.user-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.user-role-action {
  min-width: 140px;
}

.user-role-checklist {
  display: grid;
  gap: var(--space-2);
}

.user-role-option {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 11px 12px;
}

.user-role-option input[type="checkbox"] {
  accent-color: var(--color-primary-500);
  height: 18px;
  margin: 0;
  width: 18px;
}

.user-role-option__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-role-option__content strong {
  color: var(--color-text-900);
  font-size: var(--text-sm);
}

.user-role-option__content small {
  color: var(--color-text-500);
  font-size: var(--text-xs);
}

.user-role-option em {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 700;
  padding: 3px 8px;
}

.user-role-option--disabled {
  background: var(--color-surface-50);
  color: var(--color-text-500);
}

.status-readonly {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: var(--text-sm);
  color: var(--color-text-700);
}

.user-edit-page {
  --user-edit-header-sticky-top: 0px;
  --user-edit-sticky-gap: var(--space-4);
  --user-edit-profile-sticky-top: calc(60px + var(--user-edit-sticky-gap));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: calc(100dvh - var(--space-8) - var(--space-8));
  overflow: visible;
}

.user-edit-header {
  align-items: center;
  background: var(--color-surface-50);
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-2) 0;
  position: sticky;
  top: var(--user-edit-header-sticky-top);
  z-index: 8;
}

.user-edit-header::after {
  background: var(--color-surface-50);
  content: "";
  height: var(--user-edit-sticky-gap);
  inset: 100% 0 auto;
  pointer-events: none;
  position: absolute;
}

.user-edit-header__title {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  min-width: 0;
}

.user-edit-header__title h2 {
  margin: 0;
}

.user-edit-header__actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.user-edit-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
}

.user-edit-form {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}

.user-edit-section {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.user-edit-section--profile {
  position: sticky;
  top: var(--user-edit-profile-sticky-top);
  z-index: 7;
}

.user-edit-section--profile-collapsed {
  gap: 0;
  padding: var(--space-3) var(--space-4);
}

.user-edit-section--permissions {
  position: relative;
  z-index: 1;
}

.user-edit-profile-summary {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.user-edit-profile-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.user-edit-profile-summary strong {
  color: var(--color-text-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-edit-profile-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.user-edit-profile-details[hidden],
.user-edit-profile-summary[hidden] {
  display: none;
}

.user-edit-profile-actions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-3);
}

.user-edit-section__header {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.user-edit-section__header h3 {
  margin: 0;
}

.user-permission-tools {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.user-permission-tools--below-admin {
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
}

.user-permission-search input {
  width: 240px;
}

.user-permission-filter {
  align-items: center;
  color: var(--color-text-600);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: var(--space-2);
  white-space: nowrap;
}

.user-permission-filter input,
.user-permission-admin input {
  accent-color: var(--color-primary-500);
  height: 18px;
  margin: 0;
  width: 18px;
}

.user-permission-admin {
  align-items: flex-start;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 18px minmax(0, 1fr);
  margin: var(--space-4) 0;
  padding: 12px;
}

.user-permission-admin[hidden] {
  display: none;
}

.user-permission-admin:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
}

.user-permission-admin:has(input:disabled) {
  background: var(--color-surface-50);
  cursor: not-allowed;
}

.user-permission-admin span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-permission-admin strong {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.user-permission-admin small {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.user-permission-list {
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0;
  background: var(--color-surface-50);
  overflow: hidden;
}

.user-permission-row {
  align-items: flex-start;
  background: var(--color-surface-0);
  border-bottom: 1px solid var(--color-surface-200);
  cursor: pointer;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 64px;
  padding: 12px;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.user-permission-row:last-child {
  border-bottom: 0;
}

.user-permission-row:hover {
  background: rgba(20, 184, 166, 0.05);
}

.user-permission-row:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
}

.user-permission-row input[type="checkbox"] {
  accent-color: var(--color-primary-500);
  height: 18px;
  margin: 1px 0 0;
  width: 18px;
}

.user-permission-row__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.user-permission-row__content strong {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.user-permission-row__content small {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.user-permission-row__path {
  color: var(--color-text-600);
  font-weight: 700;
}

.user-permission-row--disabled {
  background: var(--color-surface-50);
  cursor: not-allowed;
}

.user-permission-row--admin-effective {
  background: rgba(20, 184, 166, 0.05);
}

.user-permission-empty {
  align-items: center;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-500);
  display: flex;
  font-size: var(--text-sm);
  justify-content: center;
  margin: 0;
  min-height: 72px;
  padding: var(--space-4);
}

.user-permission-empty[hidden] {
  display: none;
}

.user-edit-loading[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .user-edit-page {
    height: auto;
    overflow: visible;
  }

  .user-edit-header,
  .user-edit-section--profile {
    position: static;
  }

  .user-edit-header,
  .user-edit-section__header {
    align-items: stretch;
    flex-direction: column;
  }

  .user-edit-header__actions {
    width: 100%;
  }

  .user-edit-header__actions .primary-button,
  .user-edit-header__actions .secondary-button {
    flex: 1 1 0;
  }

  .user-edit-scroll {
    overflow: visible;
    padding-right: 0;
  }

  .user-permission-tools {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .user-permission-search input {
    width: 100%;
  }

  .user-permission-row {
    min-height: 72px;
  }
}

.modal--role {
  max-width: 920px;
  text-align: left;
}

.role-modal__body {
  display: grid;
  gap: var(--space-5);
}

.role-modal__section {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-100);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.role-modal__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.role-modal__section--manage {
  padding-bottom: var(--space-3);
}

.role-modal__section--manage .meta {
  margin-top: 2px;
}

.role-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.role-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  overflow: visible;
  background: var(--color-surface-0);
}

.role-list__row {
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: var(--space-3);
  text-align: left;
  width: 100%;
}

.role-list__row:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.role-list__row:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.role-list__row + .role-list__row {
  border-top: 1px solid var(--color-surface-100);
}

.role-list__row--active {
  background: var(--color-surface-0);
}

.role-list__name {
  font-weight: 600;
}

.role-list__actions {
  display: inline-flex;
  gap: var(--space-2);
}

.role-list__actions .icon-button {
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-500);
  height: 36px;
  width: 36px;
  padding: 0;
  justify-content: center;
}

.role-list__actions .icon-button:hover {
  background: var(--color-surface-100);
}

.role-action--edit,
.action--edit {
  color: var(--color-primary-500);
}

.role-action--edit .ui-icon,
.action--edit .ui-icon {
  color: var(--color-primary-500);
}

.role-action--edit:hover,
.action--edit:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-50);
}

.action--edit-blue,
.action--edit-blue .ui-icon {
  color: #1d6cff;
}

.action--edit-blue:hover {
  background: rgba(29, 108, 255, 0.12);
  border-color: rgba(29, 108, 255, 0.12);
}

.action--view {
  color: #14b8a6;
}

.action--view .ui-icon {
  color: #14b8a6;
}

.action--view:hover {
  background: rgba(20, 184, 166, 0.14);
  border-color: rgba(20, 184, 166, 0.2);
}

.action--back {
  color: #64748b;
}

.action--back .ui-icon {
  color: #64748b;
}

.action--back:hover {
  background: rgba(100, 116, 139, 0.12);
  border-color: rgba(100, 116, 139, 0.2);
}

.action--support {
  color: #0f766e;
}

.action--support .ui-icon {
  color: #0f766e;
}

.action--support:hover {
  background: rgba(15, 118, 110, 0.14);
  border-color: rgba(15, 118, 110, 0.2);
}

.action--database {
  color: var(--color-text-700);
}

.action--database .ui-icon {
  color: currentColor;
}

.action--database:hover {
  background: var(--color-surface-100);
  border-color: var(--color-surface-300);
}

.action--approve {
  color: var(--color-success-500);
}

.action--approve .ui-icon {
  color: var(--color-success-500);
}

.action--approve:hover {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.12);
}

.action--primary {
  color: var(--color-primary-500);
}

.action--primary .ui-icon {
  color: var(--color-primary-500);
}

.action--primary:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
}

.role-action--delete,
.action--delete {
  color: var(--color-danger-500);
}

.role-action--delete .ui-icon,
.action--delete .ui-icon {
  color: var(--color-danger-500);
}

.role-action--delete:hover,
.action--delete:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.12);
}

.role-action--duplicate,
.action--duplicate {
  color: var(--color-success-500);
}

.role-action--duplicate .ui-icon,
.action--duplicate .ui-icon {
  color: var(--color-success-500);
}

.role-action--duplicate:hover,
.action--duplicate:hover {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.12);
}

[data-icon-label] {
  position: relative;
}

[data-icon-label]::after {
  --icon-label-y: 2px;
  content: attr(data-icon-label);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text-900);
  color: var(--color-surface-0);
  font-size: var(--text-xs);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform-origin: center;
  z-index: 1600;
}

[data-icon-label]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(var(--icon-label-y));
}

.role-editor-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.role-scope-summary {
  align-items: flex-start;
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-left: 4px solid var(--color-primary-500);
  border-radius: 8px;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}

.role-scope-summary__label {
  color: var(--color-text-500);
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.role-scope-summary strong {
  color: var(--color-text-900);
  display: block;
  line-height: 1.35;
  margin-top: 2px;
}

.role-scope-summary .meta {
  margin: 0;
  max-width: 420px;
}

.permission-actions {
  display: flex;
  justify-content: flex-end;
}

.role-permissions {
  display: grid;
  gap: var(--space-3);
}

.permission-matrix {
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.permission-row {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(64px, 0.7fr));
  justify-items: start;
  padding: var(--space-3) 0;
}

.permission-row:not(.permission-row--header) {
  border-top: 1px solid var(--color-surface-100);
}

.permission-row--header {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  padding: var(--space-2) 0 var(--space-3);
}

.permission-column-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.permission-column-toggle {
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 999px;
  color: var(--color-primary-600);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  min-height: 22px;
  min-width: 44px;
  padding: 5px 9px;
  text-transform: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
  white-space: nowrap;
}

.permission-column-toggle:hover {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

.permission-column-toggle:disabled {
  background: var(--color-surface-100);
  border-color: var(--color-surface-200);
  color: var(--color-text-400);
  cursor: not-allowed;
  opacity: 0.65;
  text-decoration: none;
}

.permission-row > span {
  text-align: left;
}

.permission-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.permission-row .policy-checkbox {
  justify-content: flex-start;
  justify-self: start;
}

.permission-row .policy-checkbox input[type="checkbox"][disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.support-permissions {
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.08) 0%, rgba(20, 184, 166, 0.03) 100%);
  padding: var(--space-4);
}

.support-permissions__header {
  display: grid;
  gap: 4px;
  margin-bottom: var(--space-3);
}

.support-permissions__header h4 {
  margin: 0;
}

.support-permissions__grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-permission-card {
  align-items: flex-start;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: grid;
  gap: 6px;
  grid-template-columns: 18px minmax(0, 1fr);
  padding: 12px;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.support-permission-card:hover {
  border-color: rgba(15, 118, 110, 0.35);
  background: rgba(20, 184, 166, 0.05);
}

.support-permission-card:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-100);
}

.support-permission-card input[type="checkbox"] {
  margin-top: 1px;
}

.support-permission-card__title {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
}

.support-permission-card__desc {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  grid-column: 2 / -1;
  line-height: 1.35;
}

@media (max-width: 700px) {
  .modal--role {
    max-height: calc(100vh - 20px);
    width: min(100%, 420px);
  }

  .modal--role .modal__body {
    overflow-x: hidden;
    padding-right: 0;
  }

  .modal--role .role-modal__body {
    gap: var(--space-3);
  }

  .modal--role .role-modal__section {
    padding: var(--space-3);
  }

  .modal--role .role-modal__section--manage {
    display: none;
  }

  .modal--role .role-list {
    max-height: 170px;
    overflow-y: auto;
  }

  .modal--role .role-list__row {
    align-items: flex-start;
    gap: var(--space-2);
    padding: 10px 12px;
  }

  .modal--role .role-list__name {
    flex: 1 1 auto;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .modal--role .role-list__actions {
    flex: 0 0 auto;
  }

  .modal--role .role-list__actions .icon-button {
    height: 34px;
    width: 34px;
  }

  .modal--role .role-scope-summary {
    flex-direction: column;
  }

  .modal--role .permission-actions {
    justify-content: flex-start;
  }

  .modal--role .permission-actions__button {
    min-height: 40px;
    padding: 8px 12px;
  }

  .modal--role .permission-matrix {
    gap: var(--space-2);
    overflow-x: hidden;
    padding: var(--space-3);
  }

  .modal--role .permission-row {
    gap: var(--space-2);
    grid-template-columns: repeat(4, minmax(34px, 1fr));
    justify-items: center;
    padding: 10px 0;
  }

  .modal--role .permission-row .permission-label {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .modal--role .permission-row--header {
    grid-template-columns: repeat(4, minmax(34px, 1fr));
    padding-top: 0;
  }

  .modal--role .permission-row--header span:first-child {
    display: none;
  }

  .modal--role .permission-row--header span {
    font-size: 10px;
    text-align: center;
    width: 100%;
  }

  .modal--role .permission-row--header .permission-column-header {
    align-items: center;
    gap: 2px;
  }

  .modal--role .permission-row--header .permission-column-toggle {
    font-size: 9px;
    min-height: 20px;
    min-width: 38px;
    padding: 4px 6px;
  }

  .modal--role .permission-row .policy-checkbox {
    justify-content: center;
    justify-self: center;
  }

  .modal--role .support-permissions {
    padding: var(--space-3);
  }

  .modal--role .support-permissions__grid {
    grid-template-columns: 1fr;
  }

  .modal--role .support-permission-card {
    padding: 10px 12px;
  }

  .modal--role .permission-extras {
    margin-top: var(--space-3);
  }

  .modal--role .permission-extras__grid {
    grid-template-columns: 1fr;
  }
}

.permission-extras {
  margin-top: var(--space-4);
}

.permission-extras__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.permission-extras__grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.permission-extras__specific {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.permission-extras__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.permission-extras__divider {
  border-top: 1px solid var(--color-surface-100);
  margin-top: var(--space-2);
}

.multi-select {
  position: relative;
}

.multi-select.is-open {
  padding-bottom: 280px;
}

.multi-select__trigger {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  cursor: pointer;
  display: flex;
  font-size: var(--text-sm);
  justify-content: space-between;
  padding: 12px 16px;
  width: 100%;
}

.multi-select__trigger::after {
  content: "";
  border: solid var(--color-text-400);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
}

.multi-select__menu {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin-top: var(--space-2);
  max-height: 260px;
  overflow: auto;
  padding: var(--space-3);
  position: absolute;
  width: 100%;
  z-index: 20;
  display: none;
}

.multi-select__menu.is-open {
  display: block;
}

.multi-select__list {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

.multi-select__list label {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-700);
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.multi-select__list input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.multi-select__footer {
  align-items: center;
  border-top: 1px solid var(--color-surface-200);
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-3);
}

.modal--user {
  max-width: 900px;
  text-align: left;
}

.modal--user .modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-right: var(--space-2);
}

.modal--user .user-form__section {
  gap: var(--space-3);
  padding: var(--space-3);
}

.modal--user .user-form__section + .user-form__section {
  margin-top: var(--space-1);
}

.modal--user .user-form__grid {
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.modal--user .user-form__grid--profile {
  row-gap: var(--space-2);
  padding: var(--space-2) 0;
}

.modal--user .user-form__section-title {
  font-size: var(--text-md);
}

.modal--user .user-role-checklist {
  gap: var(--space-2);
}

.modal--user .user-role-action {
  min-width: 120px;
  padding: 10px 14px;
}

.modal--user .primary-button,
.modal--user .secondary-button,
.modal--user .ghost-button,
.modal--user .danger-button {
  padding: 10px 14px;
  font-size: var(--text-xs);
}

.modal--user .modal__body {
  gap: var(--space-4);
}

.modal--user .modal__footer {
  padding-top: var(--space-3);
}

.modal--transfer {
  max-width: 520px;
  min-height: 220px;
}

.modal--confirm {
  gap: var(--space-4);
  max-width: 640px;
  min-height: 0;
  text-align: left;
}

.modal--confirm .modal__header {
  align-items: flex-start;
}

.modal--confirm .modal__body {
  flex: 0 0 auto;
  max-height: min(52vh, 340px);
  overflow-y: auto;
  padding-right: 0;
}

.modal--confirm .modal__footer {
  margin-top: var(--space-1);
}

.confirm-modal__header-copy {
  align-items: center;
  display: flex;
  flex: 1;
  gap: var(--space-3);
  min-width: 0;
}

.confirm-modal__header-icon {
  align-items: center;
  border-radius: 12px;
  display: inline-flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.modal--confirm-primary .confirm-modal__header-icon {
  background: linear-gradient(180deg, var(--color-primary-50) 0%, color-mix(in oklab, var(--color-primary-50) 55%, white) 100%);
  border: 1px solid var(--color-primary-200);
  color: var(--color-primary-600);
}

.modal--confirm-danger .confirm-modal__header-icon {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #b91c1c;
}

.confirm-modal__header-icon .ui-icon {
  height: 18px;
  width: 18px;
}

.confirm-modal__heading {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.confirm-modal__heading h2 {
  margin: 0;
}

.confirm-modal__heading .confirm-modal__subtitle {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  line-height: 1.55;
  margin: 0;
  max-width: none;
  padding-top: 0;
  width: 100%;
}

.confirm-modal__divider {
  border-top: 1px solid var(--color-surface-200);
}

.confirm-modal__body {
  gap: var(--space-3);
}

.confirm-modal__body .confirm-modal__message {
  color: var(--color-text-700);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}

.confirm-modal__highlight {
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-700);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0;
  padding: var(--space-3);
}

.modal--confirm-primary .confirm-modal__highlight {
  background: rgba(15, 118, 110, 0.08);
  border-color: rgba(15, 118, 110, 0.2);
}

.modal--confirm-danger .confirm-modal__highlight {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.22);
  color: #991b1b;
}

.modal--org-reject {
  max-width: 640px;
  min-height: 0;
  gap: var(--space-5);
  text-align: left;
}

.modal__close--icon {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  color: var(--color-text-500);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.modal__close--icon:hover {
  background: var(--color-surface-100);
  border-color: var(--color-surface-300);
  color: var(--color-text-700);
}

.modal__close--icon:focus-visible {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-50);
  outline: none;
}

.modal__close--icon .ui-icon {
  height: 16px;
  width: 16px;
}

.modal--db-access {
  gap: var(--space-4);
  max-width: 920px;
  min-height: 0;
  text-align: left;
  width: min(100%, 920px);
}

.modal--db-access-confirm {
  max-width: 980px;
  width: min(100%, 980px);
}

.db-access-modal__header {
  align-items: flex-start;
}

.db-access-modal__header-copy {
  align-items: center;
  display: flex;
  flex: 1;
  gap: var(--space-3);
  min-width: 0;
}

.db-access-modal__header-icon {
  align-items: center;
  background: linear-gradient(180deg, var(--color-primary-50) 0%, color-mix(in oklab, var(--color-primary-50) 55%, white) 100%);
  border: 1px solid var(--color-primary-200);
  border-radius: 12px;
  color: var(--color-primary-600);
  display: inline-flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.db-access-modal__header-icon .ui-icon {
  height: 18px;
  width: 18px;
}

.db-access-modal__heading {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.db-access-modal__heading h2 {
  margin: 0;
}

.db-access-modal__subtitle {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  line-height: 1.55;
  margin: 0;
  max-width: none;
  padding-top: 0;
}

.db-access-modal__body {
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  padding-top: var(--space-2);
}

.db-access-modal__body--confirm {
  justify-content: center;
}

.db-access-modal__footer {
  border-top: 1px solid var(--color-surface-200);
  padding-top: var(--space-3);
}

.db-access-confirmation-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.db-access-confirmation-field {
  margin: 0;
  min-width: 0;
}

.db-access-confirmation-field .select-standard {
  width: 100%;
}

.modal--org-approve {
  gap: var(--space-4);
}

.modal--org-approve .modal__header {
  align-items: flex-start;
}

.modal--org-approve .modal__close {
  flex-shrink: 0;
  margin-left: var(--space-3);
}

.org-approve-modal__header-copy {
  align-items: flex-start;
  display: flex;
  flex: 1;
  gap: var(--space-3);
  min-width: 0;
}

.org-approve-modal__header-icon {
  align-items: center;
  background: color-mix(in oklab, var(--color-primary-50) 72%, white);
  border: 1px solid var(--color-primary-200);
  border-radius: 12px;
  color: var(--color-primary-600);
  display: inline-flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.org-approve-modal__header-icon .ui-icon {
  height: 18px;
  width: 18px;
}

.org-request-info__header-copy {
  align-items: center;
  display: flex;
  flex: 1;
  gap: var(--space-3);
  min-width: 0;
}

.org-request-info__header-icon {
  align-items: center;
  background: linear-gradient(180deg, var(--color-primary-50) 0%, color-mix(in oklab, var(--color-primary-50) 55%, white) 100%);
  border: 1px solid var(--color-primary-200);
  border-radius: 12px;
  color: var(--color-primary-600);
  display: inline-flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.org-request-info__header-icon .ui-icon {
  height: 18px;
  width: 18px;
}

.org-request-info__subtitle {
  border-top: 1px solid var(--color-surface-200);
  margin: 0;
  max-width: 52ch;
  padding-top: var(--space-2);
}

.modal--org-request-policy {
  --modal-width-min: 760px;
  --modal-width-fluid: 72vw;
  --modal-width-max: 1120px;
  --modal-height-max: 880px;
}

.org-request-policy__subtitle {
  border-top: 1px solid var(--color-surface-200);
  margin: 0;
  max-width: 48ch;
  padding-top: var(--space-2);
}

.org-request-policy__body {
  display: grid;
  gap: var(--space-3);
}

.org-request-policy__tabs {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: inline-grid;
  gap: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px;
  width: min(100%, 420px);
}

.org-request-policy__tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--color-text-600);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  min-height: 36px;
  padding: 0 var(--space-3);
  text-align: center;
}

.org-request-policy__tab:hover,
.org-request-policy__tab:focus-visible {
  color: var(--color-text-900);
}

.org-request-policy__tab:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.org-request-policy__tab--active {
  background: var(--color-surface-0);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-900);
}

.org-request-policy__panels {
  min-width: 0;
}

.org-request-policy__section {
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.org-request-policy__section-header {
  align-items: start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.org-request-policy__section-header h3 {
  color: var(--color-text-900);
  font-size: var(--text-base);
  margin: 0;
}

.org-request-policy__section [data-policy-message]:empty {
  display: none;
}

.org-reject-modal__heading {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  text-align: left;
}

.org-approve-modal__heading h2 {
  margin: 0;
}

.org-approve-modal__subtitle {
  color: var(--color-text-600);
  line-height: 1.45;
  margin: 0;
  max-width: 48ch;
  padding-top: 0;
}

.org-approve-modal__subtitle strong {
  color: var(--color-text-900);
  font-weight: 800;
}

.org-reject-modal__body {
  gap: var(--space-5);
  padding-bottom: var(--space-3);
  padding-top: var(--space-2);
  padding-right: var(--space-2);
}

.org-request-info__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.org-request-info__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.org-request-info__section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.org-request-info__section-head h3 {
  color: var(--color-text-900);
  font-size: var(--text-md);
  margin: 0;
}

.org-request-info__kpi-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.org-request-info__kpi-card {
  background: linear-gradient(180deg, var(--color-surface-0) 0%, var(--color-surface-50) 100%);
  border: 1px solid var(--color-surface-200);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 108px;
  overflow: hidden;
  padding: 12px;
  position: relative;
}

.org-request-info__kpi-card::before {
  background: var(--color-surface-300);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.org-request-info__kpi-card[data-tone="status"]::before {
  background: var(--color-primary-500);
}

.org-request-info__kpi-card[data-tone="decision"]::before {
  background: var(--color-warning-500);
}

.org-request-info__kpi-card[data-tone="storage"]::before {
  background: var(--color-success-500);
}

.org-request-info__kpi-card[data-tone="confidence"]::before {
  background: #0ea5e9;
}

.org-request-info__kpi-label {
  color: var(--color-text-600);
  font-size: var(--text-xs);
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.org-request-info__kpi-value {
  color: var(--color-text-900);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.org-request-info__kpi-hint {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  margin: auto 0 0;
}

.org-approve-modal__body {
  justify-content: center;
  padding-bottom: var(--space-2);
}

.org-approve-modal__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 auto;
  width: min(100%, 900px);
}

.org-approve-modal__field {
  margin: 0;
}

.org-approve-modal__choices {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.org-approve-modal__choice {
  align-items: flex-start;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-700);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 108px;
  padding: var(--space-4);
  text-align: left;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.org-approve-modal__choice .meta {
  margin: 0;
}

.org-approve-modal__choice-title {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  font-weight: 700;
}

.org-approve-modal__choice:hover {
  background: color-mix(in oklab, var(--color-primary-50) 60%, white);
  border-color: var(--color-primary-200);
}

.org-approve-modal__choice.is-active {
  background: color-mix(in oklab, var(--color-primary-50) 70%, white);
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 1px var(--color-primary-500);
}

.org-approve-modal__choice:focus-visible {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-50), inset 0 0 0 1px var(--color-primary-500);
  outline: none;
}

.org-reject-modal__field {
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  background: var(--color-surface-50);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.org-reject-modal__label {
  color: var(--color-text-900);
  font-size: var(--text-md);
  font-weight: 700;
}

.org-reject-modal__hint {
  color: var(--color-text-500);
  font-size: var(--text-xs);
}

.org-reject-modal__textarea {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  color: var(--color-text-900);
  font-size: var(--text-sm);
  line-height: 1.45;
  min-height: 104px;
  padding: 12px 14px;
  resize: vertical;
  width: 100%;
}

.org-reject-modal__textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-50);
  outline: none;
}

.org-status-modal__select {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  color: var(--color-text-900);
  font-size: var(--text-sm);
  min-height: 42px;
  padding: 10px 12px;
}

.org-status-modal__select:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-50);
  outline: none;
}

.org-info-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.org-request-info__profile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.org-info-item {
  background: linear-gradient(180deg, var(--color-surface-0) 0%, color-mix(in oklab, var(--color-surface-50) 72%, white) 100%);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 74px;
  padding: 10px 12px;
}

.org-info-item strong {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.db-access-countdown {
  color: var(--color-text-600);
  font-size: var(--text-xs);
}

.org-info-item--wide {
  grid-column: 1 / -1;
}

.org-info-divider {
  border-top: 1px solid var(--color-surface-200);
  margin: var(--space-2) 0;
}

.org-request-ai__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.org-request-ai__card {
  background: linear-gradient(180deg, var(--color-surface-0) 0%, color-mix(in oklab, var(--color-surface-50) 70%, white) 100%);
  border: 1px solid var(--color-surface-200);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  padding: 12px 14px;
}

.org-request-ai__card--wide {
  grid-column: 1 / -1;
}

.org-request-ai__card--state {
  border-color: color-mix(in oklab, var(--color-warning-500) 28%, var(--color-surface-200));
}

.org-request-ai__card h4 {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  margin: 0;
}

.org-request-ai__card p {
  color: var(--color-text-700);
  font-size: var(--text-sm);
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.org-request-ai__card ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 18px;
}

.org-request-ai__card li {
  color: var(--color-text-700);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.org-request-ai__list-empty {
  color: var(--color-text-500);
  list-style: none;
  margin-left: -18px;
}

.org-plan-panel {
  background: linear-gradient(180deg, var(--color-surface-0) 0%, var(--color-surface-50) 100%);
  border: 1px solid var(--color-surface-300);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.org-plan-panel__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.org-plan-panel__header h3 {
  color: var(--color-text-900);
  font-size: var(--text-lg);
  margin: 0;
}

.org-plan-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.org-plan-item {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 88px;
  padding: 12px 14px;
}

.org-plan-item__value {
  align-items: center;
  display: flex;
  min-height: 38px;
}

.org-plan-tier-select {
  width: 100%;
  min-height: 40px;
  background: var(--color-surface-0);
}

.org-plan-panel__actions {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: flex-start;
}

.org-plan-panel__actions--storage {
  margin-top: var(--space-1);
}

.org-plan-panel__actions .primary-button {
  min-width: 132px;
}

.org-plan-panel__actions [data-org-plan-feedback] {
  min-height: 18px;
}

.org-plan-panel__actions [data-org-storage-feedback] {
  min-height: 18px;
}

.org-storage-panel {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.org-storage-panel__header {
  display: grid;
  gap: var(--space-1);
}

.org-storage-panel__header h3 {
  color: var(--color-text-900);
  font-size: var(--text-md);
  margin: 0;
}

.org-storage-panel__current {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.org-storage-panel__current strong {
  background: color-mix(in oklab, var(--color-primary-500) 12%, white);
  border: 1px solid color-mix(in oklab, var(--color-primary-500) 32%, white);
  border-radius: 999px;
  color: var(--color-primary-700);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 6px 10px;
}

.org-storage-panel__select {
  margin: 0;
  min-height: 0;
}

.org-storage-panel__select [data-org-storage-description] {
  line-height: 1.45;
}

.org-reject-modal__field .select-standard {
  width: 100%;
}

.org-decision-meta {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.org-decision-meta__item {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 64px;
  padding: 10px 12px;
}

.org-decision-meta__item strong {
  font-size: var(--text-sm);
  font-weight: 700;
}

.org-reject-modal__read {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 10px;
  color: var(--color-text-900);
  font-size: var(--text-sm);
  line-height: 1.5;
  min-height: 104px;
  overflow-wrap: anywhere;
  padding: 12px 14px;
  white-space: pre-wrap;
}

.org-reject-modal__footer {
  border-top: 1px solid var(--color-surface-200);
  padding-top: var(--space-4);
}

@media (max-width: 520px) {
  .modal--org-reject .modal__header {
    justify-content: center;
    position: relative;
  }

  .modal--org-reject [data-org-reject-close] {
    position: absolute;
    right: 0;
    top: 0;
  }

  .modal--org-reject [data-org-approve-close] {
    position: absolute;
    right: 0;
    top: 0;
  }

  .modal--org-reject .org-reject-modal__heading {
    text-align: center;
  }

  .modal--org-approve .modal__header {
    justify-content: space-between;
  }

  .modal--org-approve .org-reject-modal__heading {
    text-align: left;
  }

  .org-approve-modal__header-copy {
    align-items: flex-start;
  }

  .org-approve-modal__choices {
    grid-template-columns: 1fr;
  }

  .db-access-modal__header-copy {
    align-items: flex-start;
  }

  .db-access-confirmation-grid {
    grid-template-columns: 1fr;
  }

  .org-request-info__kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .org-info-grid {
    grid-template-columns: 1fr;
  }

  .org-request-info__profile-grid {
    grid-template-columns: 1fr;
  }

  .org-request-ai__grid {
    grid-template-columns: 1fr;
  }

  .org-plan-grid {
    grid-template-columns: 1fr;
  }

  .org-plan-panel__actions {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
  }

  .org-plan-panel__actions .primary-button,
  .org-plan-panel__actions .secondary-button {
    width: 100%;
  }

  .org-decision-meta {
    grid-template-columns: 1fr;
  }
}

.transfer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-1) 0;
}

.transfer-body--center {
  justify-content: center;
  text-align: center;
}

.help-center__header {
  align-items: center;
  margin-bottom: 0;
  padding-bottom: var(--space-5);
}

.help-center {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.help-center__header .section-header__actions {
  margin-left: var(--space-6);
}

.help-center__tabs {
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  margin-bottom: 0;
  margin-top: 0;
}

.help-center__actions .search input {
  width: 300px;
}

.help-center__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

.help-center__actions select {
  min-height: 42px;
  min-width: 180px;
}

.help-center--ds {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.help-center--ds[data-help-center-admin] {
  gap: 0;
  min-height: 0;
}

.help-center--ds .help-center__header {
  margin-bottom: 0;
  padding-bottom: 0;
}

.help-center--ds[data-help-center-admin] .help-center__header {
  flex: 0 0 auto;
  padding-bottom: var(--space-4);
}

.help-center--ds[data-help-center-admin] .help-center__toolbar {
  flex: 0 0 auto;
  margin-bottom: var(--space-4);
}

.help-center--ds[data-help-center-admin] .form-banner {
  flex: 0 0 auto;
  margin: var(--space-3) 0 0;
}

.help-center__toolbar .search input {
  width: 300px;
}

.help-center__toolbar .users-toolbar__filters select {
  min-width: 180px;
}

.ds-support-scroll-surface .help-center__toolbar {
  align-items: center;
  display: grid;
  gap: clamp(8px, 1vw, 16px);
  grid-template-columns: minmax(180px, clamp(220px, 23vw, 300px)) minmax(0, 1fr);
}

.ds-support-scroll-surface .help-center__toolbar .search {
  min-width: 0;
}

.ds-support-scroll-surface .help-center__toolbar .search input {
  box-sizing: border-box;
  font-size: clamp(12px, 0.82vw, 13px);
  min-height: clamp(38px, 3vw, 44px);
  min-width: 0;
  overflow: hidden;
  padding: 9px clamp(10px, 1vw, 16px);
  text-overflow: ellipsis;
  width: 100%;
}

.ds-support-scroll-surface .users-toolbar__filters {
  align-items: stretch;
  display: grid;
  flex-wrap: nowrap;
  gap: clamp(6px, 0.75vw, 12px);
  grid-template-columns: minmax(96px, 1fr) minmax(112px, 1fr) minmax(112px, 1fr) minmax(96px, 0.9fr);
  min-width: 0;
}

.ds-support-scroll-surface .users-toolbar__filters .select-standard {
  box-sizing: border-box;
  font-size: clamp(12px, 0.82vw, 13px);
  min-height: clamp(38px, 3vw, 44px);
  min-width: 0;
  overflow: hidden;
  padding: 8px clamp(24px, 2.4vw, 36px) 8px clamp(9px, 0.9vw, 14px);
  text-overflow: ellipsis;
  width: 100%;
}

@media (max-width: 1180px) {
  .ds-support-scroll-surface .help-center__toolbar {
    grid-template-columns: minmax(145px, 0.62fr) minmax(0, 2fr);
  }
}

@media (max-width: 760px) {
  .ds-support-scroll-surface .help-center__toolbar {
    grid-template-columns: 1fr;
  }

  .ds-support-scroll-surface .users-toolbar__filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .ds-support-scroll-surface .users-toolbar__filters {
    grid-template-columns: 1fr;
  }
}

.help-center__header .meta {
  max-width: 420px;
}

.help-center__layout {
  align-items: start;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  margin-top: var(--space-2);
}

.help-center--ds[data-help-center-admin] .help-center__tabs {
  border-bottom: 1px solid var(--color-surface-200);
  flex: 0 0 auto;
  padding-bottom: var(--space-3);
  position: relative;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  z-index: 1;
}

.help-center--ds[data-help-center-admin].help-center--content-scrolled .help-center__tabs {
  border-bottom-color: var(--color-surface-200);
  box-shadow: none;
}

.help-center--ds[data-help-center-admin] .help-center__layout {
  flex: 1 1 auto;
  align-items: stretch;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 4px var(--space-5) var(--space-4) 0;
  transition: margin-top 160ms ease, padding-top 160ms ease;
}

.help-center--ds[data-help-center-admin].help-center--content-scrolled .help-center__layout {
  margin-top: 0;
  padding-top: 0;
}

.help-center--ds[data-help-center-admin] .help-center__list-panel {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: var(--space-5);
  width: 100%;
}

.help-center--ds[data-help-center-admin] .help-center__list-header {
  min-width: 0;
}

.help-center--ds[data-help-center-admin] .help-center__pill {
  display: none;
}

.help-center--ds[data-help-center-admin] .help-center__list {
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  width: 100%;
}

.help-center--ds[data-help-center-admin] .help-center__list::-webkit-scrollbar {
  width: 6px;
}

.help-center--ds[data-help-center-admin] .help-center__list::-webkit-scrollbar-track {
  background: transparent;
}

.help-center--ds[data-help-center-admin] .help-center__list::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 999px;
}

.help-center--ds[data-help-center-admin] .help-center__list::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.58);
}

.help-center--ds[data-help-center-admin] .help-center__list .help-article {
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.help-center--ds[data-help-center-admin] .help-center__pagination {
  box-sizing: border-box;
  gap: var(--space-2);
  justify-content: flex-start;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.help-center--ds[data-help-center-admin] .help-center__list .help-article > p.meta {
  display: -webkit-box;
  line-height: 1.4;
  margin: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.help-center--ds[data-help-center-admin] .help-center__list .help-article h4 {
  font-size: var(--text-md);
  line-height: 1.3;
}

.help-center--ds[data-help-center-admin] .help-center__list .help-article__meta {
  gap: 6px;
  margin-bottom: 0;
}

.help-center--ds[data-help-center-admin] .help-center__list .help-article__meta .pill,
.help-center--ds[data-help-center-admin] .help-center__list .help-article__meta .status {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
}

.help-center--ds[data-help-center-admin] .help-center__list .help-article__footer {
  align-items: center;
  border-top: 1px solid rgba(227, 234, 244, 0.8);
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 2px;
  padding-top: 8px;
}

.help-center--ds[data-help-center-admin] .help-center__list .help-article__footer-meta {
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
}

.help-center--ds[data-help-center-admin] .help-center__list .help-article__chevron {
  flex: 0 0 auto;
  margin-left: auto;
}

.help-center--ds[data-help-center-admin] .help-center__pagination .table-pagination__controls,
.help-center--ds[data-help-center-admin] .help-center__pagination .pagination-pages {
  flex-wrap: nowrap;
}

.help-center--ds[data-help-center-admin] .help-center__pagination .table-pagination__meta {
  flex: 1 0 100%;
  min-width: 0;
}

.help-center--ds[data-help-center-admin] .help-center__pagination .table-pagination__controls {
  display: grid;
  gap: 6px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.help-center--ds[data-help-center-admin] .help-center__pagination .pagination-pages {
  justify-content: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.help-center--ds[data-help-center-admin] .help-center__pagination .pagination-button {
  min-height: 40px;
  min-width: 52px;
  padding: 7px 9px;
}

.help-center--ds[data-help-center-admin] .help-center__pagination .pagination-page {
  min-height: 40px;
  min-width: 36px;
  padding: 7px 9px;
}

.help-center--ds[data-help-center-admin] .help-center__pagination .pagination-ellipsis {
  padding: 0 1px;
}

@media (min-width: 901px) {
  .page:has([data-help-center-admin]) {
    height: 100dvh;
    overflow: hidden;
  }

  .page-external--content:has([data-help-center-admin]) {
    flex: 1 1 auto;
    min-height: 0;
  }

  .help-center--ds[data-help-center-admin] {
    flex: 1 1 auto;
    overflow: hidden;
  }
}

.ds-support-scroll-surface {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.ds-support-scroll-surface__pinned {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-3);
}

.ds-support-scroll-surface__pinned .help-center__toolbar {
  margin-bottom: 0;
}

.ds-support-scroll-surface__pinned .form-banner {
  margin: 0;
}

.ds-support-scroll-surface__content {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-4);
}

.ds-support-scroll-surface__content .ds-support__layout {
  margin-top: 0;
}

@media (min-width: 901px) {
  .page:has([data-ds-support-scroll-surface]) {
    height: 100dvh;
    overflow: hidden;
  }

  .page-external--content:has([data-ds-support-scroll-surface]) {
    flex: 1 1 auto;
    min-height: 0;
  }

  .ds-support-scroll-surface {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 2px var(--space-5) var(--space-4) 0;
  }

  .ds-support-scroll-surface__pinned {
    background: var(--color-surface-50);
    border-bottom: 1px solid var(--color-surface-200);
    padding-bottom: var(--space-4);
    position: sticky;
    top: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    z-index: 2;
  }

  .ds-support-scroll-surface--content-scrolled .ds-support-scroll-surface__pinned {
    border-bottom-color: var(--color-surface-200);
    box-shadow: none;
  }

  .ds-support-scroll-surface__content {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: calc(var(--space-2) + 4px);
    transition: padding-top 160ms ease;
  }

  .ds-support-scroll-surface--content-scrolled .ds-support-scroll-surface__content {
    padding-top: 0;
  }
}

.ds-support__layout {
  align-items: stretch;
  grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns 180ms ease;
}

.ds-support__layout--list-collapsed {
  grid-template-columns: 72px minmax(0, 1fr);
}

.help-center__list-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-6);
}

.ds-support__list-panel {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: none;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  padding: var(--space-5);
  position: relative;
  width: 100%;
}

.ds-support-list-toggle {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  color: var(--color-text-500);
  display: grid;
  height: 32px;
  justify-content: center;
  line-height: 0;
  padding: 0;
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  width: 32px;
  z-index: 4;
}

.ds-support-list-toggle:hover {
  background: var(--color-surface-100);
  border-color: var(--color-primary-200);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  color: var(--color-primary-500);
  transform: translateY(-50%) translateX(-1px);
}

.ds-support-list-toggle:focus-visible {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16), 0 10px 22px rgba(15, 23, 42, 0.12);
  outline: none;
}

.ds-support-list-toggle .ui-icon {
  color: currentColor;
  display: block;
  height: 15px;
  left: 50%;
  position: absolute;
  stroke: currentColor;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: transform 180ms ease;
  width: 15px;
}

.ds-support__layout--list-collapsed .ds-support-list-toggle .ui-icon {
  transform: translate(-50%, -50%) rotate(180deg);
}

.help-center__list-header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-surface-200);
}

.ds-support-status-buckets {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin-top: 0.35rem;
  min-width: 0;
  overflow: hidden;
}

.ds-support-status-bucket {
  align-items: center;
  appearance: none;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 999px;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 1 auto;
  font: inherit;
  font-size: 0.72rem;
  gap: 0.22rem;
  justify-content: center;
  line-height: 1.1;
  min-height: 1.7rem;
  min-width: 0;
  outline: 0;
  padding: 0.22rem 0.42rem;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
  white-space: nowrap;
}

.ds-support-status-bucket strong {
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 700;
}

.ds-support-status-bucket--active {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
  color: var(--color-primary);
}

.ds-support-status-bucket:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.help-center__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ds-support__list {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 8px 10px 2px;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  width: 100%;
}

.ds-support__list::-webkit-scrollbar {
  width: 6px;
}

.ds-support__list::-webkit-scrollbar-track {
  background: transparent;
}

.ds-support__list::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 999px;
}

.ds-support__list::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.58);
}

.ds-support__list .help-article {
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.ds-support__list .help-article:hover,
.ds-support__list .help-article:focus-visible {
  z-index: 1;
}

.ds-support__list .help-article h4,
.ds-support__list .help-article .meta,
.ds-support__list .help-article__date,
.ds-support__list .help-article__read {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ds-support-empty-card {
  align-items: center;
  justify-content: center;
  min-height: 132px;
  text-align: center;
}

.ds-support-empty-card__expanded {
  margin: 0;
}

.ds-support-empty-card__collapsed {
  display: none;
}

.ds-support__pagination {
  box-sizing: border-box;
  border-top: 1px solid var(--color-surface-200);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  padding: var(--space-3) var(--space-2) var(--space-2);
  gap: var(--space-3);
  width: 100%;
}

.ds-support__pagination .table-pagination__controls {
  align-items: center;
  box-sizing: border-box;
  column-gap: var(--space-2);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  justify-content: flex-start;
  width: 100%;
}

.ds-support__pagination .pagination-pages {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.ds-support__pagination .pagination-button,
.ds-support__pagination .pagination-page {
  flex: 0 0 auto;
}

.ds-support__detail-loading {
  min-height: 240px;
}

.ds-support__list .ds-support-card {
  align-items: stretch;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  gap: 10px;
  padding: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.ds-support__list .ds-support-card:hover,
.ds-support__list .ds-support-card:focus-visible {
  background: var(--color-surface-0);
  border-color: var(--color-primary-200);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transform: none;
}

.ds-support-card.help-article--active {
  background: linear-gradient(180deg, rgba(230, 244, 243, 0.86) 0%, rgba(15, 118, 110, 0.025) 100%);
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

[data-theme="dark"] .ds-support-card.help-article--active {
  background: linear-gradient(180deg, rgba(91, 192, 184, 0.2) 0%, rgba(15, 23, 42, 0.92) 100%);
  border-color: rgba(91, 192, 184, 0.74);
  box-shadow: inset 0 0 0 1px rgba(91, 192, 184, 0.16), 0 10px 22px rgba(2, 6, 23, 0.42);
}

.ds-support-card__header {
  align-items: start;
  box-sizing: border-box;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: space-between;
  width: 100%;
}

.ds-support-card__header .status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  margin-top: 1px;
  padding: 4px 8px;
}

.ds-support-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ds-support-card__title-wrap h4 {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.ds-support-card__compact-id {
  display: none;
}

.ds-support-card__company {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  line-height: 1.3;
}

.ds-support-card__meta {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.ds-support-card__tag {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  min-height: 22px;
  min-width: 0;
  overflow: hidden;
  padding: 4px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-support-card__tag--topic {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  color: var(--color-text-700);
  justify-self: start;
  max-width: 112px;
}

.ds-support-card__tag--department {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
  color: #1d4ed8;
  max-width: 128px;
}

.ds-support-card__tag--ai {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
  color: #15803d;
}

.ds-support-card__tag--human,
.ds-support-card__tag--attention {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.24);
  color: #dc2626;
}

.ds-support-card__tag--attention {
  max-width: 112px;
}

.ds-support-card__preview {
  color: var(--color-text-700);
  display: -webkit-box;
  font-size: var(--text-sm);
  line-height: 1.4;
  margin: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-support-card__owner {
  align-items: center;
  background: rgba(100, 116, 139, 0.08);
  border: 1px solid var(--color-surface-200);
  border-radius: 6px;
  color: var(--color-text-700);
  display: inline-flex;
  flex: 0 1 auto;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  max-width: 128px;
  min-width: 0;
  overflow: hidden;
  padding: 4px 7px;
}

.ds-support-card__owner--assigned {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: #15803d;
}

.ds-support-card__owner-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-article__footer.ds-support-card__footer {
  align-items: center;
  border-top: 1px solid rgba(227, 234, 244, 0.8);
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  justify-content: flex-start;
  margin-top: 2px;
  padding-top: 8px;
  width: 100%;
}

.ds-support-card__messages {
  color: var(--color-text-700);
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}

.ds-support-card__footer .help-article__date {
  white-space: nowrap;
}

.ds-support-card__arrow {
  align-items: center;
  color: var(--color-text-300);
  display: inline-flex;
  justify-content: center;
  margin-left: 2px;
  flex: 0 0 auto;
  width: 20px;
}

.ds-support-card__arrow-icon {
  height: 16px;
  width: 16px;
}

.ds-support-card:hover .ds-support-card__arrow,
.ds-support-card.help-article--active .ds-support-card__arrow {
  color: var(--color-primary-500);
}

.help-center__pill {
  font-size: var(--text-xs);
  font-weight: 600;
}

.help-center__detail {
  min-height: 420px;
  padding: var(--space-6);
}

.help-center--ds[data-help-center-admin] .help-center__detail {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.help-center--ds[data-help-center-admin] .help-center__detail::-webkit-scrollbar {
  width: 6px;
}

.help-center--ds[data-help-center-admin] .help-center__detail::-webkit-scrollbar-track {
  background: transparent;
}

.help-center--ds[data-help-center-admin] .help-center__detail::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 999px;
}

.help-center--ds[data-help-center-admin] .help-center__detail::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.58);
}

.ds-support__detail {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.ds-support__detail [data-icon-label]::after {
  content: "";
  padding-left: 0;
  padding-right: 0;
  width: 0;
}

.ds-support__detail [data-icon-label]:hover::after {
  content: attr(data-icon-label);
  padding-left: 8px;
  padding-right: 8px;
  width: auto;
}

.ds-support__detail::-webkit-scrollbar {
  width: 6px;
}

.ds-support__detail::-webkit-scrollbar-track {
  background: transparent;
}

.ds-support__detail::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 999px;
}

.ds-support__detail::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.58);
}

.ds-support__layout--list-collapsed .ds-support__list-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: var(--space-4) var(--space-2);
}

.ds-support__layout--list-transitioning .ds-support__list-panel {
  overflow: hidden;
}

.ds-support__layout--list-collapsed .help-center__list-header {
  display: none;
}

.ds-support__layout--list-collapsed .ds-support__list {
  align-items: center;
  box-sizing: border-box;
  flex: 1 1 auto;
  gap: var(--space-2);
  justify-content: flex-start;
  max-width: none;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding: 0;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  width: 100%;
}

.ds-support__layout--list-collapsed .ds-support__list::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.ds-support__layout--list-collapsed .ds-support__pagination {
  align-items: center;
  border-top: 0;
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  justify-content: center;
  margin-top: auto;
  overflow: visible;
  padding: var(--space-2) 0 0;
}

.ds-support__layout--list-collapsed .ds-support__pagination > span,
.ds-support__layout--list-collapsed .ds-support__pagination .pagination-pages {
  display: none;
}

.ds-support__layout--list-collapsed .ds-support__pagination .table-pagination__controls {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  justify-content: center;
  max-width: 100%;
  width: 56px;
}

.ds-support__layout--list-collapsed .ds-support__pagination .pagination-button {
  align-items: center;
  border-radius: 999px;
  color: var(--color-text-500);
  display: inline-flex;
  flex: 0 0 26px;
  font-size: 0;
  height: 26px;
  justify-content: center;
  line-height: 0;
  min-height: 26px;
  min-width: 26px;
  padding: 0;
  position: relative;
  width: 26px;
}

.ds-support__layout--list-collapsed .ds-support__pagination .pagination-button:hover:not(:disabled),
.ds-support__layout--list-collapsed .ds-support__pagination .pagination-button:focus-visible {
  border-color: var(--color-primary-200);
  color: var(--color-primary-500);
}

.ds-support__layout--list-collapsed .ds-support__pagination .pagination-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
  outline: none;
}

.ds-support__layout--list-collapsed .ds-support__pagination .pagination-button::before {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  box-sizing: border-box;
  content: "";
  display: block;
  height: 6px;
  position: relative;
  width: 6px;
}

.ds-support__layout--list-collapsed .ds-support__pagination .pagination-button[data-ds-page-prev]::before {
  transform: translateX(1px) rotate(-135deg);
}

.ds-support__layout--list-collapsed .ds-support__pagination .pagination-button[data-ds-page-next]::before {
  transform: translateX(-1px) rotate(45deg);
}

.ds-support__layout--list-collapsed .ds-support-card {
  align-items: center;
  aspect-ratio: 1 / 1;
  border-color: var(--color-surface-200);
  border-radius: 50%;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  max-height: 44px;
  max-width: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
  width: 44px;
}

.ds-support__layout--list-collapsed .ds-support-card__header {
  align-items: center;
  display: flex;
  justify-content: center;
}

.ds-support__layout--list-collapsed .ds-support-card__title-wrap {
  align-items: center;
}

.ds-support__layout--list-collapsed .ds-support-card__title-wrap h4,
.ds-support__layout--list-collapsed .ds-support-card__company,
.ds-support__layout--list-collapsed .ds-support-card__header .status,
.ds-support__layout--list-collapsed .ds-support-card__meta,
.ds-support__layout--list-collapsed .ds-support-card__preview,
.ds-support__layout--list-collapsed .ds-support-card__footer,
.ds-support__layout--list-transitioning .ds-support-card__title-wrap h4,
.ds-support__layout--list-transitioning .ds-support-card__company,
.ds-support__layout--list-transitioning .ds-support-card__header .status,
.ds-support__layout--list-transitioning .ds-support-card__meta,
.ds-support__layout--list-transitioning .ds-support-card__preview,
.ds-support__layout--list-transitioning .ds-support-card__footer {
  display: none;
}

.ds-support__layout--list-collapsed .ds-support-card__compact-id,
.ds-support__layout--list-transitioning .ds-support-card__compact-id {
  color: var(--color-text-700);
  display: block;
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1;
  max-width: 34px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-support__layout--list-collapsed .ds-support-card:hover,
.ds-support__layout--list-collapsed .ds-support-card:focus-visible {
  background: var(--color-surface-100);
  border-color: var(--color-primary-300);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.ds-support__layout--list-collapsed .ds-support-card.help-article--active {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  box-shadow: none;
}

.ds-support__layout--list-collapsed .ds-support-card.help-article--active .ds-support-card__compact-id {
  color: #fff;
}

.ds-support__layout--list-transitioning .ds-support-card {
  overflow: hidden;
}

.ds-support__layout--list-collapsed .ds-support-empty-card,
.ds-support__layout--list-collapsed .ds-support-loading-card,
.ds-support__layout--list-transitioning .ds-support-empty-card,
.ds-support__layout--list-transitioning .ds-support-loading-card {
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  max-height: 44px;
  max-width: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  width: 44px;
}

.ds-support__layout--list-collapsed .ds-support-loading-card__spinner,
.ds-support__layout--list-transitioning .ds-support-loading-card__spinner {
  align-items: center;
  display: grid;
  height: 100%;
  justify-content: center;
  min-height: 0;
  padding: 0;
  place-items: center;
  width: 100%;
}

.ds-support__layout--list-collapsed .ds-support-loading-card .spinner,
.ds-support__layout--list-transitioning .ds-support-loading-card .spinner {
  height: 18px;
  width: 18px;
}

.ds-support__layout--list-collapsed .ds-support-empty-card__expanded,
.ds-support__layout--list-transitioning .ds-support-empty-card__expanded {
  display: none;
}

.ds-support__layout--list-collapsed .ds-support-empty-card__collapsed,
.ds-support__layout--list-transitioning .ds-support-empty-card__collapsed {
  color: var(--color-text-700);
  display: block;
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.issue-tracker {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.issue-tracker-scroll-surface {
  min-height: 0;
}

.issue-tracker-scroll-surface__pinned {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-3);
}

.issue-tracker-scroll-surface__pinned .form-banner {
  margin: 0;
}

.issue-tracker-scroll-surface__content {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-4);
}

.issue-tracker__toolbar {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(220px, 0.8fr) minmax(340px, 1fr) auto;
  padding: var(--space-4);
}

.issue-tracker__search {
  min-width: 0;
  position: relative;
}

.issue-tracker__search input {
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-size: var(--text-sm);
  height: 44px;
  line-height: 1.4;
  padding: 0 14px 0 44px;
  width: 100%;
}

.issue-tracker__search input::-webkit-search-cancel-button,
.issue-tracker__search input::-webkit-search-decoration,
.issue-tracker__search input::-webkit-search-results-button,
.issue-tracker__search input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.issue-tracker__search input::placeholder {
  color: var(--color-text-500);
}

.issue-tracker__search input:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.issue-tracker__search-icon {
  align-items: center;
  color: var(--color-text-500);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  left: 14px;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 18px;
  z-index: 1;
}

.issue-tracker__search-icon .ui-icon {
  height: 18px;
  width: 18px;
}

.issue-tracker__filters {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-3);
}

.issue-tracker__filters .select-standard {
  min-width: 180px;
}

.issue-tracker__stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(68px, 1fr));
  min-width: 0;
}

.issue-tracker-stat {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  min-height: 44px;
  padding: 7px 10px;
}

.issue-tracker-stat span {
  color: var(--color-text-500);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.issue-tracker-stat strong {
  color: var(--color-text-900);
  font-size: var(--text-lg);
  line-height: 1;
}

.issue-tracker__layout {
  align-items: stretch;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  margin-top: 0;
  min-height: 0;
  overflow: hidden;
}

.issue-tracker__list-panel,
.issue-tracker__detail {
  min-width: 0;
  padding: var(--space-6);
}

.issue-tracker__list-panel {
  display: grid;
  gap: var(--space-3);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.issue-tracker__panel-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--color-surface-200);
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--space-3);
}

.issue-tracker__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-2) 4px 0;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.issue-tracker__list::-webkit-scrollbar {
  width: 6px;
}

.issue-tracker__list::-webkit-scrollbar-track {
  background: transparent;
}

.issue-tracker__list::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 999px;
}

.issue-tracker__list::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.58);
}

.issue-card {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  gap: 10px;
  padding: 14px 14px 12px;
  text-align: left;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  width: 100%;
}

.issue-card:hover,
.issue-card:focus-visible {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.issue-card--active {
  background: linear-gradient(180deg, rgba(230, 244, 243, 0.86), rgba(15, 118, 110, 0.025));
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

[data-theme="dark"] .issue-card--active {
  background: linear-gradient(180deg, rgba(91, 192, 184, 0.2), rgba(15, 23, 42, 0.92));
  border-color: rgba(91, 192, 184, 0.74);
  box-shadow: inset 0 0 0 1px rgba(91, 192, 184, 0.16), 0 10px 22px rgba(2, 6, 23, 0.42);
}

.issue-card--empty {
  cursor: default;
}

.issue-card__header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.issue-card__header .status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
}

.issue-card__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.issue-card__title strong,
.issue-card__title .meta,
.issue-card__preview,
.issue-card__footer span {
  overflow-wrap: anywhere;
}

.issue-card__preview {
  color: var(--color-text-700);
  display: -webkit-box;
  font-size: var(--text-sm);
  line-height: 1.4;
  margin: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.issue-card__footer {
  border-top: 1px solid rgba(227, 234, 244, 0.8);
  color: var(--color-text-500);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  font-weight: 600;
  gap: var(--space-2);
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 8px;
}

.issue-tracker__pagination {
  border-top: 1px solid var(--color-surface-200);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: var(--space-3) var(--space-2) var(--space-2);
  width: 100%;
}

.issue-tracker__pagination .table-pagination__controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  width: 100%;
}

.issue-tracker__pagination .pagination-pages {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

.issue-tracker__detail {
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  scrollbar-width: thin;
}

.issue-tracker__detail::-webkit-scrollbar {
  width: 6px;
}

.issue-tracker__detail::-webkit-scrollbar-track {
  background: transparent;
}

.issue-tracker__detail::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 999px;
}

.issue-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 0;
}

.issue-detail__header {
  align-items: flex-start;
  border-bottom: 1px solid var(--color-surface-200);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  padding-bottom: var(--space-4);
}

.issue-detail__header h2 {
  font-size: var(--text-xl);
  line-height: 1.25;
}

.issue-detail__metrics {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.issue-detail__metric {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
}

.issue-detail__metric span {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 700;
}

.issue-detail__metric strong {
  color: var(--color-text-900);
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

.issue-detail__sections {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.issue-detail__section {
  border-top: 1px solid var(--color-surface-200);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-3);
}

.issue-detail__section h3 {
  color: var(--color-text-900);
  font-size: var(--text-sm);
}

.issue-detail__section p {
  color: var(--color-text-700);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0;
  overflow-wrap: anywhere;
}

.issue-detail__form {
  border-top: 1px solid var(--color-surface-200);
  padding-top: var(--space-5);
}

.issue-codex-canvas {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.issue-codex-canvas__header {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.issue-codex-canvas__header h3 {
  color: var(--color-text-900);
  font-size: var(--text-md);
  margin: 0;
}

.issue-codex-canvas__textarea {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--text-sm);
  line-height: 1.55;
  min-height: 520px;
  padding: var(--space-4);
  resize: vertical;
  width: 100%;
}

.issue-codex-canvas__textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.issue-detail__field textarea {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
}

.issue-detail__field textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.issue-tracker__empty,
.issue-tracker__loading {
  align-items: center;
  color: var(--color-text-500);
  display: flex;
  justify-content: center;
  min-height: 320px;
  text-align: center;
}

@media (min-width: 901px) {
  .page:has([data-issue-tracker-scroll-surface]) {
    height: 100dvh;
    overflow: hidden;
  }

  .page-external--content:has([data-issue-tracker-scroll-surface]) {
    flex: 1 1 auto;
    min-height: 0;
  }

  .issue-tracker-page {
    flex: 1 1 auto;
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }

  .issue-tracker-scroll-surface {
    flex: 1 1 auto;
    gap: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--space-5) var(--space-4) 0;
  }

  .issue-tracker-scroll-surface__pinned {
    background: var(--color-surface-50);
    border-bottom: 1px solid var(--color-surface-200);
    padding-bottom: var(--space-4);
    position: sticky;
    top: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    z-index: 2;
  }

  .issue-tracker-scroll-surface--content-scrolled .issue-tracker-scroll-surface__pinned {
    border-bottom-color: var(--color-surface-200);
    box-shadow: none;
  }

  .issue-tracker-scroll-surface__content {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: calc(var(--space-2) + 4px);
    transition: padding-top 160ms ease;
  }

  .issue-tracker-scroll-surface--content-scrolled .issue-tracker-scroll-surface__content {
    padding-top: 0;
  }
  .issue-tracker-scroll-surface__content .issue-tracker__layout {
    height: 100%;
  }
}

.ds-support__detail.ds-support__detail--fullscreen {
  --ds-ticket-fullscreen-pad: clamp(16px, 2.5vw, 28px);
  border-radius: 0;
  border-width: 0;
  height: 100vh;
  inset: 0;
  margin: 0;
  max-width: none;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0 var(--ds-ticket-fullscreen-pad) var(--ds-ticket-fullscreen-pad);
  position: fixed;
  z-index: 1200;
}

.ds-support__detail.ds-support__detail--fullscreen .ds-ticket--embedded {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.ds-support__detail.ds-support__detail--fullscreen .ds-ticket__sticky-row {
  background: var(--color-surface-0);
  border-bottom: 1px solid var(--color-surface-200);
  flex: 0 0 auto;
  margin: 0;
  padding: var(--ds-ticket-fullscreen-pad) 0 var(--space-3);
  position: sticky;
  top: 0;
  z-index: 9;
}

.ds-support__detail.ds-support__detail--fullscreen .ds-ticket__workbench {
  border-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-top: var(--space-3);
}

.ds-support__detail.ds-support__detail--fullscreen .ds-ticket-chat {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.ds-support__detail.ds-support__detail--fullscreen .ds-ticket-chat::-webkit-scrollbar {
  width: 6px;
}

.ds-support__detail.ds-support__detail--fullscreen .ds-ticket-chat::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.42);
  border-radius: 999px;
}

.ds-support__detail.ds-support__detail--fullscreen .ds-ticket-chat::-webkit-scrollbar-track {
  background: transparent;
}

body.ds-ticket-fullscreen,
html.ds-ticket-fullscreen {
  overflow: hidden;
}

body.ds-ticket-fullscreen .modal-overlay,
html.ds-ticket-fullscreen .modal-overlay {
  z-index: 1300;
}

body.ds-ticket-fullscreen .ds-ticket__header-actions [data-icon-label]::after,
html.ds-ticket-fullscreen .ds-ticket__header-actions [data-icon-label]::after {
  top: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 1600;
}

body.ds-ticket-fullscreen .ds-ticket__header-actions [data-icon-label]:hover::after,
html.ds-ticket-fullscreen .ds-ticket__header-actions [data-icon-label]:hover::after {
  transform: translateX(-50%) translateY(var(--icon-label-y));
}

.ds-policy-investigation {
  border-top: 1px solid var(--color-surface-200);
  padding-top: var(--space-4);
}

.ds-policy-investigation__shell {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.ds-policy-investigation__header h3 {
  margin: 0 0 4px;
}

.ds-policy-investigation__selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ds-policy-investigation__integration {
  align-items: flex-start;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  text-align: left;
}

.ds-policy-investigation__integration--active {
  background: var(--color-primary-50);
  border-color: var(--color-primary-500);
}

.ds-policy-investigation__loading,
.ds-policy-investigation__empty {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px dashed var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  min-height: 120px;
  padding: var(--space-4);
  text-align: center;
}

.ds-policy-investigation__error {
  margin: 0;
}

.ds-policy-investigation__visibility-warning,
.org-workspace__customer-visibility-warning {
  margin: 0;
}

.ds-policy-investigation__summary {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.ds-policy-investigation__summary-card {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3);
}

.ds-policy-investigation__panels {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-policy-investigation__panel {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.ds-policy-investigation__panel h3 {
  margin: 0 0 4px;
}

.ds-policy-investigation__panel--logs {
  margin-top: 0;
}

.ds-policy-investigation__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ds-policy-investigation__item {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.ds-policy-investigation__item-header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.ds-policy-investigation__item-meta,
.ds-policy-investigation__log-policy-name {
  margin: 0;
}

.ds-policy-investigation__log-policy-name {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  font-weight: 700;
}

.ds-policy-investigation__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ds-policy-investigation__code-chip {
  background: rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-pill);
  color: var(--color-text-700);
  display: inline-flex;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-xs);
  padding: 6px 10px;
}

.org-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.org-workspace--loading {
  min-height: 320px;
}

.org-workspace__hero {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-5);
}

.org-workspace__hero-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3);
}

.org-workspace__hero-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.org-workspace__hero-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.org-workspace__hero-title-row h2 {
  margin: 0;
}

.org-workspace__hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.org-workspace__hero-actions--icon {
  flex-wrap: nowrap;
}

.org-workspace__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.org-workspace__info-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.org-workspace__info-card,
.org-workspace__panel {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.org-workspace__info-card h3,
.org-workspace__panel h3 {
  margin: 0;
}

.org-workspace__panel-header {
  border-bottom: 1px solid var(--color-surface-200);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-3);
}

.org-workspace__panel-header .meta {
  margin: 0;
}

.org-workspace__kv {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.org-workspace__kv div {
  align-items: baseline;
  border-bottom: 1px solid var(--color-surface-100);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.1fr);
  padding-bottom: var(--space-2);
}

.org-workspace__kv div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.org-workspace__kv dt {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.org-workspace__kv dd {
  color: var(--color-text-900);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0;
}

.org-workspace__operations {
  align-items: end;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
}

.org-workspace__operations--account {
  grid-template-columns: minmax(220px, 360px) minmax(220px, 260px) auto;
}

.org-workspace__operations--account [data-org-workspace-save-storage] {
  justify-self: start;
}

.org-workspace__operations--logs {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(180px, auto) auto;
}

.org-workspace__operations--logs-create {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.org-workspace__logs-create-fields {
  align-items: end;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(220px, 280px) minmax(280px, 1fr);
}

.org-workspace__logs-create-footer {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.org-workspace__logs-create-actions {
  display: flex;
  justify-content: flex-end;
}

.org-workspace__logs-create-actions .secondary-button {
  min-width: 220px;
}

.org-workspace__route-toggle {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  margin: 0;
  min-height: 36px;
}

.org-workspace__route-toggle .org-workspace__help {
  margin-left: 2px;
}

.org-workspace__route-toggle-text {
  color: var(--color-text-600);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
}

.org-workspace__form-shell {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.org-workspace__section-divider {
  border-top: 1px solid var(--color-surface-200);
  margin: var(--space-2) 0 var(--space-1);
  width: 100%;
}

.org-workspace__history-table {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  box-shadow: var(--shadow-sm);
}

.org-workspace__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.org-workspace__field span {
  color: var(--color-text-600);
  font-size: var(--text-sm);
  font-weight: 600;
}

.org-workspace__field-label {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.org-workspace__title-with-help {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.org-workspace__help {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-300);
  border-radius: 999px;
  color: var(--color-text-600);
  cursor: help;
  box-sizing: border-box;
  display: inline-grid;
  font-size: 10px;
  font-weight: 700;
  flex: 0 0 16px;
  height: 16px;
  justify-content: center;
  line-height: 1;
  margin-left: 3px;
  min-height: 16px;
  min-width: 16px;
  padding: 0;
  place-items: center;
  position: relative;
  text-transform: none;
  vertical-align: middle;
  width: 16px;
}

.org-workspace__help-mark {
  display: block;
  line-height: 1;
  transform: translateY(-0.25px);
}

.org-workspace__help::after {
  background: var(--color-text-900);
  border-radius: var(--radius-sm);
  color: var(--color-surface-0);
  content: attr(data-tooltip);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  max-width: 320px;
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  white-space: normal;
  width: max-content;
  z-index: 8;
}

.org-workspace__help:hover::after,
.org-workspace__help:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.org-workspace__row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.org-workspace__row-actions .icon-button {
  height: 32px;
  width: 32px;
}

.org-workspace__instance-action--active,
.org-workspace__instance-action--active:disabled {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
  color: var(--color-success-500);
  opacity: 1;
}

.org-workspace__instance-action--active .ui-icon {
  color: var(--color-success-500);
}

.org-workspace__field input,
.org-workspace__field textarea {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  font: inherit;
  min-height: 44px;
  padding: 12px 14px;
}

.org-workspace__field .select-standard {
  width: 100%;
}

.org-workspace__field .status {
  align-self: flex-start;
}

.org-workspace__field textarea {
  min-height: 96px;
  resize: vertical;
}

.org-workspace__field--wide {
  grid-column: span 2;
}

.org-workspace__field--status {
  min-width: 180px;
}

.org-workspace__field--checkbox {
  align-items: center;
  flex-direction: row;
  gap: var(--space-2);
  min-height: 44px;
}

.org-workspace__field--checkbox input {
  min-height: 0;
  padding: 0;
  width: 16px;
}

.org-workspace__field--checkbox span {
  font-size: var(--text-xs);
  text-transform: none;
}

.org-workspace__runtime-badge {
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  min-height: 32px;
  padding: 6px 12px;
}

.org-workspace__runtime-meta {
  background: var(--color-surface-50);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.org-workspace__runtime-meta-row {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
}

.org-workspace__runtime-meta-label {
  align-items: center;
  color: var(--color-text-500);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  gap: 4px;
  letter-spacing: 0.01em;
  min-width: 96px;
  padding-top: 6px;
  text-transform: uppercase;
}

.org-workspace__runtime-meta-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.org-workspace__runtime-meta-pill {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-pill, 999px);
  color: var(--color-text-700);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 600;
  gap: var(--space-1);
  line-height: 1.25;
  padding: 6px 10px;
  white-space: nowrap;
}

.org-workspace__runtime-meta-pill strong {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.org-workspace__runtime-error {
  margin-top: var(--space-1);
}

.org-workspace__panel--policies {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.help-article {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  width: 100%;
}

.help-article:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.help-article--active {
  background: var(--color-primary-50);
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-sm);
}

.help-article--empty {
  cursor: default;
}

.help-article--empty:hover {
  box-shadow: none;
  transform: none;
}

.help-article__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-start;
  margin-bottom: var(--space-2);
}

.help-article h4 {
  font-size: var(--text-lg);
  line-height: 1.45;
}

.help-article__meta--detail {
  gap: var(--space-3);
  justify-content: flex-start;
}

.help-article h4,
.help-article__content h2,
.help-article__content h4 {
  margin: 0;
}

.help-article__content h2 {
  font-size: var(--text-xl);
  line-height: 1.35;
}

.help-article__content h2 + .help-article__intro {
  margin-top: var(--space-2);
}

.help-article__tag {
  font-size: var(--text-xs);
  font-weight: 600;
}

.help-article__footer {
  align-items: center;
  color: var(--color-text-500);
  display: flex;
  font-size: var(--text-xs);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.help-article__footer-meta {
  display: flex;
  gap: var(--space-3);
}

.help-article__date {
  color: var(--color-text-500);
}

.help-article__chevron {
  color: var(--color-text-300);
  font-size: var(--text-md);
}

.help-article__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.help-article__content-header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.help-article__actions {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.help-article__content--edit {
  gap: var(--space-4);
}

.help-article__edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.help-article__edit-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-article__edit-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.help-article__edit-field--wide {
  grid-column: 1 / -1;
}

.help-article__edit-field > span {
  color: var(--color-text-700);
  font-size: var(--text-xs);
  font-weight: 700;
}

.help-article__edit-field input,
.help-article__edit-field textarea {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  color: var(--color-text-900);
  font-family: inherit;
  font-size: var(--text-sm);
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

.help-article__edit-field textarea {
  line-height: 1.5;
  resize: vertical;
}

.help-article__edit-field input:focus,
.help-article__edit-field textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: inset 0 0 0 2px var(--color-primary-200);
  outline: none;
}

.help-article__edit-field .select-standard {
  width: 100%;
}

.help-article__edit-actions {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.help-article__published {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.help-article__edit-buttons {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.help-article__intro {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.help-article__section h4 {
  margin-bottom: var(--space-2);
}

.help-article__steps,
.help-article__tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: 18px;
  line-height: 1.6;
}

.help-article__related {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-surface-200);
}

.help-article__related-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.help-article__related-links .ghost-button {
  align-self: flex-start;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  color: var(--color-primary-600);
  padding: 8px 12px;
  font-size: var(--text-xs);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

.help-ticket-row__top {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.help-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.help-attachment-chip {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-pill);
  color: var(--color-text-500);
  display: inline-flex;
  flex-direction: column;
  font-size: var(--text-xs);
  gap: 2px;
  padding: 8px 12px;
}

.help-message {
  display: flex;
  width: 100%;
}

.help-message--customer {
  justify-content: flex-end;
}

.help-message--ds {
  justify-content: flex-start;
}

.help-message__bubble {
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(70ch, 82%);
  min-width: 0;
  padding: 12px 14px;
}

.help-message--customer .help-message__bubble {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.24);
}

.help-message--ds .help-message__bubble {
  background: var(--color-surface-0);
  border-color: rgba(148, 163, 184, 0.34);
}

.help-message__header {
  align-items: baseline;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.help-message__header strong {
  font-size: var(--text-sm);
  font-weight: 600;
}

.help-message__header .meta {
  color: var(--color-text-500);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.help-message__text {
  color: var(--color-text-700);
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.ds-support-timeline-message {
  cursor: pointer;
  outline: none;
}

.help-message__bubble.ds-support-timeline-message:focus-visible,
.help-message__bubble.ds-support-timeline-message:hover,
.help-message__bubble.ds-support-timeline-message--source {
  border-color: rgba(245, 158, 11, 0.58);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18);
}

.ds-support-event-note__body.ds-support-timeline-message {
  border-radius: var(--radius-sm);
}

.ds-support-event-note__body.ds-support-timeline-message:focus-visible,
.ds-support-event-note__body.ds-support-timeline-message:hover,
.ds-support-event-note__body.ds-support-timeline-message--source {
  background: rgba(250, 204, 21, 0.12);
  border-radius: var(--radius-sm);
  box-shadow: inset 3px 0 0 rgba(234, 179, 8, 0.86);
}

.help-message__bubble.ds-support-timeline-message--target,
.ds-support-event-note__body.ds-support-timeline-message--target {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.22);
}

.ds-support-message-text--collapsed {
  max-height: 11.5rem;
  overflow: hidden;
}

.ds-support-message-toggle {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--color-primary-700);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0;
}

.ds-support-message-toggle:hover {
  text-decoration: underline;
}

.help-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.help-message-attachment {
  background: var(--color-surface-0);
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: var(--radius-md);
  color: inherit;
  display: flex;
  gap: var(--space-3);
  max-width: min(360px, 100%);
  min-width: 260px;
  overflow: hidden;
  padding: var(--space-3);
  text-decoration: none;
}

.help-message-attachment__media {
  align-items: center;
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.help-message-attachment__fallback {
  color: var(--color-text-600);
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  text-align: center;
}

.help-message-attachment__meta {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  padding: 0;
}

.help-message-attachment__meta strong {
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-message-attachment__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: 4px;
}

.help-message-attachment__actions .ghost-button,
.help-message-attachment__actions .secondary-button {
  box-shadow: none;
  min-height: 32px;
  padding: 6px 10px;
}

.ds-ticket {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.ds-ticket--embedded {
  gap: var(--space-3);
  padding: 0;
}

.ds-ticket__sticky-row {
  display: block;
}

.ds-ticket__header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.ds-ticket__header-main {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.ds-ticket__title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ds-ticket__header-actions {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.ds-ticket__header-actions .icon-button {
  min-height: 40px;
  min-width: 40px;
}

.ds-ticket__header h2 {
  font-size: var(--text-xl);
  line-height: 1.18;
  margin: 0;
}

.ds-ticket__header-meta {
  align-items: center;
  color: var(--color-text-500);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  gap: 5px var(--space-3);
  line-height: 1.25;
}

.ds-ticket__header-meta strong {
  color: var(--color-text-700);
  font-weight: 700;
}

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

.ds-ticket__chip {
  align-items: center;
  background: linear-gradient(180deg, #fff 0%, var(--color-surface-100) 100%);
  border: 1px solid var(--color-surface-200);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 1px 2px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  color: var(--color-text-700);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  max-width: 180px;
  min-height: 26px;
  min-width: 0;
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-ticket__chip--topic {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border-color: rgba(37, 99, 235, 0.22);
  color: #1d4ed8;
}

.ds-ticket__chip--department {
  background: linear-gradient(180deg, #ecfdf5 0%, #ccfbf1 100%);
  border-color: rgba(15, 118, 110, 0.24);
  color: #0f766e;
}

.ds-ticket__chip--ai,
.ds-ticket__chip--success {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: rgba(34, 197, 94, 0.28);
  color: #15803d;
}

.ds-ticket__chip--human,
.ds-ticket__chip--info {
  background: linear-gradient(180deg, #ecfeff 0%, #cffafe 100%);
  border-color: rgba(14, 116, 144, 0.24);
  color: #0e7490;
}

.ds-ticket__chip--warning {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border-color: rgba(245, 158, 11, 0.34);
  color: #b45309;
}

.ds-ticket__chip--danger {
  background: linear-gradient(180deg, #fff1f2 0%, #fee2e2 100%);
  border-color: rgba(239, 68, 68, 0.28);
  color: #dc2626;
}

.ds-ticket__chip--metric,
.ds-ticket__chip--muted {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: rgba(100, 116, 139, 0.22);
  color: #334155;
}

.ds-ticket__chip--owner {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  border-color: rgba(234, 88, 12, 0.24);
  color: #9a3412;
}

.ds-ticket__title-row .ds-ticket__chip {
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
}

.ds-ticket__title-row .ds-ticket__chip--warning {
  border-color: rgba(245, 158, 11, 0.52);
}

.ds-ticket__title-row .ds-ticket__chip--topic {
  border-color: rgba(37, 99, 235, 0.48);
}

.ds-ticket__title-row .ds-ticket__chip--owner {
  border-color: rgba(234, 88, 12, 0.48);
}

.ds-ticket__title-row .ds-ticket__chip--department {
  border-color: rgba(15, 118, 110, 0.48);
}

.ds-ticket__title-row .ds-ticket__chip--human,
.ds-ticket__title-row .ds-ticket__chip--info {
  border-color: rgba(14, 116, 144, 0.48);
}

.ds-ticket__title-row .ds-ticket__chip--danger {
  border-color: rgba(239, 68, 68, 0.48);
}

.ds-ticket__title-row .ds-ticket__chip--muted {
  border-color: rgba(100, 116, 139, 0.48);
}

.ds-ticket__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ds-ticket__workbench {
  border-top: 1px solid var(--color-surface-200);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  min-width: 0;
  padding-top: var(--space-4);
}

@container (max-width: 720px) {
  .ds-ticket__workbench {
    grid-template-columns: 1fr;
  }
}

.ds-support-message__badge {
  margin-left: var(--space-1);
}

.ds-support__claim-state {
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  margin: 0;
  padding: 8px 10px;
}

.ds-support__claim-state--success {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: #166534;
}

.ds-support__claim-state--info {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
  color: #1d4ed8;
}

.ds-support__claim-state--danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #b91c1c;
}

.ds-ticket-chat__header {
  align-items: flex-start;
  display: flex;
  min-height: 44px;
  min-width: 0;
  width: 100%;
}

.ds-ticket-chat__header--notice {
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  text-align: center;
}

.ds-support__reply-unavailable {
  color: #dc2626;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.ds-support__action-bar {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}

.ds-support__claim-action {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  justify-content: flex-start;
  min-width: 0;
  flex-wrap: wrap;
}

.ds-support__claim-action .primary-button,
.ds-support__claim-action .secondary-button,
.ds-support__claim-action .ghost-button {
  flex: 0 1 24%;
  max-width: 210px;
  min-width: 124px;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  white-space: nowrap;
}

.ds-support__claim-action .primary-button {
  flex-basis: 24%;
}

.ds-support__claim-action .secondary-button {
  flex-basis: 28%;
}

.ds-support__claim-action .ghost-button {
  flex-basis: 26%;
}

.ds-support__claim-action .ds-support__organization-info-button {
  align-items: center;
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
  color: var(--color-primary-600);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 700;
  gap: var(--space-2);
  justify-content: center;
  max-width: none;
  min-height: 44px;
  min-width: 156px;
}

.ds-support__organization-info-button .ui-icon {
  color: currentColor;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.ds-support__claim-action .ds-support__organization-info-button:hover {
  background: rgba(15, 118, 110, 0.12);
  border-color: rgba(15, 118, 110, 0.28);
  color: var(--color-primary-600);
}

.ds-support__claim-action .ds-support__organization-info-button:active {
  background: rgba(15, 118, 110, 0.18);
}

.ds-ticket-status-select {
  flex: 0 1 148px;
  height: 44px;
  max-width: 160px;
  min-height: 44px;
  min-width: 132px;
  padding-bottom: 0;
  padding-top: 0;
}

.ds-support-status-menu {
  display: inline-flex;
  position: relative;
}

.ds-support-status-menu__toggle {
  align-items: center;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  gap: 6px;
  line-height: 1;
  max-width: none;
}

.ds-support-status-menu__toggle.ds-ticket__chip {
  box-shadow: none;
}

.ds-support-status-menu__toggle:disabled {
  cursor: default;
  opacity: 0.72;
}

.ds-support-status-menu__toggle .ui-icon {
  color: currentColor;
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.ds-support-status-menu__list {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
  left: 0;
  min-width: 11rem;
  padding: 4px;
  position: absolute;
  top: calc(100% + 4px);
  z-index: 20;
}

.ds-support-status-menu__item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-700);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: var(--space-2);
  justify-content: space-between;
  min-height: 32px;
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}

.ds-support-status-menu__item:hover:not(:disabled) {
  background: var(--color-surface-100);
}

.ds-support-status-menu__item:disabled {
  color: var(--color-text-400);
  cursor: default;
}

.ds-support-status-menu__item strong {
  color: var(--color-text-400);
  font-size: var(--text-xs);
}

.ds-support-owner-menu {
  display: inline-flex;
  position: relative;
}

.ds-support-owner-menu__chip {
  align-items: center;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  justify-content: center;
  line-height: 1;
  min-height: 24px;
}

.ds-support-owner-menu__chip:disabled {
  cursor: default;
  opacity: 0.72;
}

.ds-support-owner-menu__chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-support-owner-menu__chip .ui-icon {
  color: currentColor;
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.ds-support-owner-menu__list {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
  left: 0;
  min-width: 13rem;
  padding: 4px;
  position: absolute;
  top: calc(100% + 4px);
  z-index: 21;
}

.ds-support-owner-menu__list--assign {
  min-width: 18rem;
}

.ds-support-owner-menu__item,
.ds-support-owner-menu__user {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-700);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: var(--space-2);
  justify-content: space-between;
  min-height: 32px;
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}

.ds-support-owner-menu__item:hover:not(:disabled),
.ds-support-owner-menu__user:hover:not(:disabled) {
  background: var(--color-surface-100);
}

.ds-support-owner-menu__item--danger {
  color: #b91c1c;
}

.ds-support-owner-menu__item--back {
  justify-content: flex-start;
}

.ds-support-owner-menu__item--back .ui-icon {
  color: currentColor;
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.ds-support-owner-menu__search {
  height: 36px;
  min-height: 36px;
  padding-left: 14px;
}

.ds-support-owner-menu__users {
  display: grid;
  gap: 2px;
  max-height: 220px;
  overflow: auto;
}

.ds-support-owner-menu__user {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.ds-support-owner-menu__user span,
.ds-support-owner-menu__empty {
  color: var(--color-text-500);
  font-size: var(--text-xs);
}

.ds-support-owner-menu__empty {
  padding: 8px;
}

.ds-support-event-note {
  align-items: flex-start;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--color-text-600);
  display: grid;
  gap: 10px;
  grid-template-columns: 24px minmax(0, 1fr);
  max-width: 100%;
  padding: 3px 0;
}

.ds-support-event-note__icon {
  align-items: center;
  background: #fff7e6;
  border: 1px solid #f3d48b;
  border-radius: 999px;
  color: #a16207;
  display: flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.ds-support-event-note--assignment .ds-support-event-note__icon {
  background: #eaf2ff;
  border-color: #bed4ff;
  color: #1d4ed8;
}

.ds-support-event-note--status .ds-support-event-note__icon {
  background: #e6f5f2;
  border-color: #9adbd1;
  color: #0f766e;
}

.ds-support-event-note--handover .ds-support-event-note__icon {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #0f766e;
}

.ds-support-event-note--problem-type .ds-support-event-note__icon {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.ds-support-event-note__body {
  min-width: 0;
  padding: 6px 12px 7px;
}

.ds-support-event-note__header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.ds-support-event-note__header strong {
  color: var(--color-text-700);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-support-event-note__header .meta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ds-support-event-note__body p {
  color: var(--color-text-600);
  font-size: var(--text-sm);
  margin: 2px 0 0;
  white-space: pre-wrap;
}

.ds-support-event-note__message {
  color: var(--color-text-700);
}

.ds-support__icon-actions {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.ds-support__icon-actions .icon-button {
  min-height: 44px;
  min-width: 44px;
}

.ds-support-route-menu,
.ds-support-problem-type-menu,
.ds-support-handover-menu {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  position: relative;
}

.ds-support-route-menu__chip,
.ds-support-problem-type-menu__chip,
.ds-support-handover-menu__chip {
  align-items: center;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  justify-content: center;
  line-height: 1;
  min-height: 24px;
  white-space: nowrap;
}

.ds-support-route-menu__chip:disabled,
.ds-support-problem-type-menu__chip:disabled,
.ds-support-handover-menu__chip:disabled {
  cursor: default;
  opacity: 0.72;
}

.ds-support-route-menu__chip--static,
.ds-support-problem-type-menu__chip--static,
.ds-support-handover-menu__chip--static {
  border: 1px solid var(--color-surface-200);
  cursor: default;
}

.ds-support-route-menu__chip span,
.ds-support-problem-type-menu__chip span,
.ds-support-handover-menu__chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-support-route-menu__chip .ui-icon,
.ds-support-problem-type-menu__chip .ui-icon,
.ds-support-handover-menu__chip .ui-icon {
  color: currentColor;
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.ds-support-route-menu__list,
.ds-support-problem-type-menu__list,
.ds-support-handover-menu__list {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
  left: 0;
  min-width: 15rem;
  padding: 4px;
  position: absolute;
  top: calc(100% + 4px);
  z-index: 22;
}

.ds-support-route-menu__item,
.ds-support-problem-type-menu__item,
.ds-support-handover-menu__item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-700);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: var(--space-2);
  min-height: 32px;
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}

.ds-support-route-menu__item:hover:not(:disabled),
.ds-support-problem-type-menu__item:hover:not(:disabled),
.ds-support-handover-menu__item:hover:not(:disabled) {
  background: var(--color-surface-100);
}

.ds-support-route-menu__item:disabled,
.ds-support-problem-type-menu__item:disabled,
.ds-support-handover-menu__item:disabled {
  color: var(--color-text-400);
  cursor: default;
}

.ds-support-problem-type-menu__item {
  justify-content: space-between;
}

.ds-support-problem-type-menu__item strong {
  color: var(--color-text-400);
  font-size: var(--text-xs);
}

.ds-support__reply-note {
  margin: 0;
}

.ds-support__reply-note--locked {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: var(--radius-sm);
  color: #9a3412;
  padding: 10px 12px;
}

.ds-ticket-chat {
  --ds-ticket-chat-default-min-height: clamp(280px, 38vh, 460px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ds-ticket-chat__messages {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: calc(var(--radius-md) + 2px);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: var(--space-3);
  min-height: var(--ds-ticket-chat-default-min-height);
  max-height: none;
  overflow: visible;
  padding: var(--space-3);
  position: relative;
}

.ds-support-timeline-marker {
  background: #facc15;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(254, 240, 138, 0.72);
  height: 3px;
  left: var(--space-2);
  pointer-events: none;
  position: absolute;
  right: var(--space-2);
  top: 0;
  z-index: 3;
}

.ds-ticket-chat__reply {
  background: var(--color-surface-100);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

.ds-ticket-chat__reply label {
  color: var(--color-text-500);
  display: flex;
  flex-direction: column;
  font-size: var(--text-sm);
  gap: var(--space-2);
}

.ds-ticket-chat__reply label > span {
  color: var(--color-text-600);
  font-weight: 600;
}

.ds-ticket-chat__reply textarea,
.ds-ticket-chat__reply input[type="file"] {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200);
  border-radius: var(--radius-md);
  font: inherit;
  padding: 10px 12px;
}

.ds-ticket-chat__reply textarea {
  min-height: 108px;
  resize: vertical;
}

.ds-support__text-input {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-200) !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
}

.ds-ticket-chat__reply textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
  outline: none;
}

.ds-ticket-chat--internal {
  margin-top: 0;
}

.ds-support__internal-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-height: 44px;
}

.ds-support__internal-header-row {
  align-items: baseline;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.ds-support__internal-header h3 {
  margin: 0;
}

.confirm-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: 0;
  text-align: left;
}

.ds-ticket-chat__reply-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .ds-ticket-chat {
    --ds-ticket-chat-default-min-height: clamp(220px, 42vh, 320px);
  }

  .ds-ticket-chat__messages {
    max-height: none;
    padding: var(--space-2);
  }

  .help-message__bubble {
    max-width: 96%;
  }
}

@media (max-width: 900px) {
  .table-card--viewport {
    min-height: auto;
  }

  .table-card.organizations-table-card,
  .table-card.organization-requests-table-card {
    overflow: visible;
  }

  .organizations-toolbar .search,
  .organizations-toolbar .search input {
    min-width: 0;
    width: 100%;
  }

  .users-toolbar.organizations-toolbar {
    grid-template-columns: 1fr;
  }

  .organizations-toolbar .users-toolbar__filters {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-left: 0;
    width: 100%;
  }

  .organizations-toolbar .users-toolbar__filters select {
    flex: initial;
  }

  .organization-requests-shell .users-toolbar {
    align-items: stretch;
  }

  .organization-requests-shell .users-toolbar__filters {
    display: grid;
    grid-template-columns: 1fr;
  }

  .organization-requests-shell .users-toolbar__filters select {
    width: 100%;
  }

  .customer-logs-shell__header {
    align-items: flex-start;
  }

  .customer-logs-shell__search-row {
    align-items: stretch;
    justify-content: flex-start;
  }

  .customer-logs-shell__search-row .search,
  .customer-logs-shell__search-row .search input {
    min-width: 0;
    width: 100%;
  }

  .customer-logs-filter-toggle {
    align-self: flex-end;
  }

  .customer-logs-filter-grid {
    grid-template-columns: 1fr;
  }

  .table-card {
    overflow-x: visible;
  }

  .table.table--responsive {
    border-collapse: separate;
  }

  .table.table--responsive thead {
    display: none;
  }

  .table.table--responsive tbody {
    display: grid;
    gap: var(--space-3);
  }

  .table.table--responsive tr {
    background: var(--color-surface-0);
    border: 1px solid var(--color-surface-200);
    border-radius: var(--radius-md);
    display: grid;
    gap: 0;
    padding: var(--space-3);
  }

  .table.table--responsive td {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-surface-100);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
    min-height: 44px;
    padding: 10px 0;
    width: 100%;
  }

  .table.table--responsive td.table-empty-cell {
    align-items: center;
    height: auto;
    justify-content: center;
    padding-top: var(--space-4);
    text-align: center;
  }

  .table.table--responsive td::before {
    color: var(--color-text-500);
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  .table.table--responsive td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .table.table--responsive td:first-child {
    padding-top: 0;
  }

  .table.table--responsive td[data-label="Actions"]::before,
  .table.table--responsive td[data-label=""]::before {
    content: "";
  }

  .table.table--responsive td[data-label="Actions"],
  .table.table--responsive td[data-label=""] {
    justify-content: center;
  }

  .modal--customer-log {
    --modal-width-min: 0px;
    --modal-width-fluid: 100vw;
    --modal-width-max: 100vw;
    --modal-height-max: calc(100vh - 20px);
  }

  .customer-log-modal__summary {
    grid-template-columns: 1fr;
  }

  .table.table--responsive td[colspan] {
    align-items: center;
    border-bottom: none;
    justify-content: center;
    padding: var(--space-4) 0;
  }

  .table.table--responsive td[colspan]::before {
    content: "";
  }

  .table.table--responsive .table-actions {
    justify-content: flex-end;
    width: 100%;
  }

  .table.table--responsive .table-actions .icon-button {
    min-height: 44px;
    min-width: 44px;
  }

  .integration-shell__header {
    flex-direction: column;
  }

  .integration-shell__actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .integration-shell__actions .secondary-button {
    flex: 1 1 180px;
  }
}

.help-article__related-links .ghost-button:hover {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}

.help-article__empty {
  align-items: center;
  color: var(--color-text-500);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
  min-height: 320px;
  text-align: center;
}

@media (max-width: 900px) {
  .users-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .permission-row {
    grid-template-columns: minmax(140px, 1.2fr) repeat(4, minmax(70px, 1fr));
  }

  .help-center__layout {
    grid-template-columns: 1fr;
  }

  .ds-support__layout {
    grid-template-columns: 1fr;
  }

  .ds-support__layout--list-collapsed {
    grid-template-columns: 1fr;
  }

  .ds-support-list-toggle {
    display: none;
  }

  .issue-tracker__toolbar {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .issue-tracker__filters {
    align-items: stretch;
    flex-direction: column;
  }

  .issue-tracker__filters .secondary-button,
  .issue-tracker__filters .select-standard {
    width: 100%;
  }

  .issue-tracker__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .issue-tracker__layout,
  .issue-detail__sections,
  .issue-detail__metrics {
    grid-template-columns: 1fr;
  }

  .issue-tracker__list-panel,
  .issue-tracker__detail {
    min-height: 0;
  }

  .issue-tracker__list-panel {
    max-height: none;
  }

  .help-center__detail {
    min-height: auto;
    order: -1;
  }

  .ds-support__detail {
    min-height: auto;
  }

  .help-center__list-panel {
    margin-top: 0;
  }

  .ds-support__list-panel {
    max-height: none;
    min-height: 0;
  }

  .ds-support__list {
    min-height: 0;
    height: 100%;
    max-height: none;
  }

  .help-center__actions {
    justify-content: flex-start;
  }

  .help-center__actions .primary-button {
    width: 100%;
  }

  .help-center__toolbar .search input,
  .help-center__toolbar .users-toolbar__filters select {
    width: 100%;
  }

  .ds-support-header-tools__label {
    display: none;
  }

  .help-article__content-header {
    flex-direction: column;
    align-items: stretch;
  }

  .help-article__actions {
    justify-content: flex-start;
  }

  .help-article__edit-grid {
    grid-template-columns: 1fr;
  }

  .help-article__edit-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .help-article__edit-buttons {
    width: 100%;
  }

  .help-article__edit-buttons .secondary-button,
  .help-article__edit-buttons .primary-button {
    flex: 1 1 140px;
  }

  .ds-ticket {
    padding: var(--space-4);
  }

  .ds-ticket__header {
    flex-direction: column;
  }

  .ds-ticket__header-actions {
    align-self: flex-end;
  }

  .ds-ticket__chip {
    max-width: 100%;
  }

  .ds-ticket__workbench {
    border-top: 1px solid var(--color-surface-200);
    grid-template-columns: 1fr;
  }

  .ds-ticket-chat__header {
    align-items: stretch;
  }

  .ds-policy-investigation__panels {
    grid-template-columns: 1fr;
  }

  .ds-ticket__actions .secondary-button {
    width: 100%;
  }

  .ds-support__action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .ds-support__claim-action {
    justify-content: stretch;
    width: 100%;
  }

  .ds-support__claim-action .primary-button,
  .ds-support__claim-action .secondary-button,
  .ds-support__claim-action .ghost-button {
    flex: 1 1 140px;
    max-width: none;
    width: 100%;
  }

  .ds-ticket-status-select {
    flex: 1 1 160px;
    max-width: none;
    width: 100%;
  }

  .ds-support__icon-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .ds-support-route-menu,
  .ds-support-route-menu__chip,
  .ds-support-problem-type-menu,
  .ds-support-problem-type-menu__chip,
  .ds-support-handover-menu,
  .ds-support-handover-menu__chip {
    width: 100%;
  }

  .org-workspace__hero {
    flex-direction: column;
  }

  .org-workspace__hero-actions {
    justify-content: flex-start;
  }

  .org-workspace__info-grid,
  .org-workspace__operations,
  .org-workspace__operations--account,
  .org-workspace__operations--logs,
  .org-workspace__operations--logs-create,
  .org-workspace__kv div {
    grid-template-columns: 1fr;
  }

  .org-workspace__operations--logs-create {
    align-items: stretch;
  }

  .org-workspace__logs-create-fields {
    grid-template-columns: 1fr;
  }

  .org-workspace__logs-create-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .org-workspace__logs-create-actions .secondary-button {
    min-width: 0;
    width: 100%;
  }

  .org-workspace__runtime-meta-row {
    flex-direction: column;
    gap: var(--space-2);
  }

  .org-workspace__runtime-meta-label {
    min-width: 0;
    padding-top: 0;
  }

  .org-workspace__runtime-meta-pill {
    white-space: normal;
  }

  .users-primary .card__header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .users-primary [data-transfer-admin] {
    font-size: var(--text-sm);
    min-height: 40px;
    padding: 8px 12px;
    white-space: nowrap;
    width: auto;
  }

  .table.table--responsive .table-actions {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-2);
    justify-content: center;
  }

  .users-table th:last-child,
  .users-table td:last-child {
    text-align: center;
  }

  .nav-item {
    align-items: center;
    display: flex;
    line-height: 1.2;
    min-height: 44px;
  }
}

/* Global modal sizing: content-fit by default with viewport-safe max bounds. */
:root {
  --modal-screen-gap: clamp(12px, 2vw, 32px);
}

.modal {
  --modal-width-min: 720px;
  --modal-width-fluid: 74vw;
  --modal-width-max: 1560px;
  --modal-height-max: 980px;
  --modal-available-width: calc(100vw - (var(--modal-screen-gap) * 2));
  --modal-available-height: calc(100vh - (var(--modal-screen-gap) * 2));
  --modal-target-width: clamp(var(--modal-width-min), var(--modal-width-fluid), var(--modal-width-max));
  max-width: min(var(--modal-available-width), var(--modal-width-max)) !important;
  width: min(var(--modal-available-width), var(--modal-target-width)) !important;
  min-height: 0 !important;
  max-height: min(var(--modal-available-height), var(--modal-height-max)) !important;
}

.modal.modal--user,
.modal.modal--role {
  --modal-width-min: 900px;
  --modal-width-fluid: 84vw;
  --modal-width-max: 1760px;
  --modal-height-max: 1160px;
}

.modal.modal--transfer,
.modal.modal--org-request-info,
.modal.modal--org-reject,
.modal.modal--org-reject-view,
.modal.modal--org-status {
  --modal-width-min: 700px;
  --modal-width-fluid: 72vw;
  --modal-width-max: 1300px;
  --modal-height-max: 860px;
}

.modal.modal--confirm {
  --modal-width-min: 560px;
  --modal-width-fluid: 62vw;
  --modal-width-max: 920px;
  --modal-height-max: 620px;
}

.modal.modal--org-request-info {
  --modal-width-min: 900px;
  --modal-width-fluid: 82vw;
  --modal-width-max: 1500px;
  --modal-height-max: 980px;
}

.modal.modal--org-request-policy {
  --modal-width-min: 760px;
  --modal-width-fluid: 72vw;
  --modal-width-max: 1120px;
  --modal-height-max: 880px;
}

@media (max-width: 900px) {
  .modal {
    --modal-screen-gap: 12px;
  }
}

@media (max-width: 640px) {
  .modal {
    --modal-screen-gap: 10px;
    --modal-width-min: 0px;
    --modal-width-fluid: 100vw;
    --modal-width-max: 100vw;
    --modal-height-max: calc(100vh - (var(--modal-screen-gap) * 2));
  }
}