.connection-card,
.pending-panel,
.custom-panel,
.workspace-topbar,
.panel,
.trace-root {
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-3);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.84) inset,
    0 12px 34px rgba(17, 24, 21, 0.055);
}

.workspace-topbar {
  display: flex;
  gap: var(--rs-space-4);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  margin-bottom: var(--rs-space-3);
  padding: 0.75rem 0.875rem;
  border-color: rgba(17, 24, 21, 0.1);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
}

.topbar-copy {
  min-width: 0;
}

.topbar-copy h2 {
  margin: var(--rs-space-1) 0 0;
  color: var(--rs-color-text);
  font-size: 1rem;
  line-height: var(--rs-line-height-heading);
}

.topbar-copy p:last-child {
  max-width: 42rem;
  margin: 0.1875rem 0 0;
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-sm);
  line-height: var(--rs-line-height-ui);
}

.topbar-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--rs-space-2);
  justify-content: end;
}

.topbar-primary-action {
  min-height: var(--rs-control-height-md);
  min-width: 9.5rem;
  padding: var(--rs-space-2) var(--rs-space-4);
  box-shadow: 0 0 0 1px rgba(232, 105, 60, 0.18), 0 10px 22px rgba(232, 105, 60, 0.12);
}

.topbar-primary-action:disabled {
  border-color: var(--rs-color-border);
  background: var(--rs-color-surface-raised);
  color: var(--rs-color-text-muted);
  opacity: 1;
  box-shadow: none;
}

.connection-card {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2);
  width: fit-content;
  padding: var(--rs-space-2) var(--rs-space-3);
  border-color: var(--rs-color-success-border);
  background: var(--rs-color-success-soft);
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-sm);
}

.connection-dot,
.action-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-success);
  box-shadow: 0 0 0 4px var(--rs-color-success-soft);
}

.guide-card {
  display: grid;
  gap: var(--rs-space-4);
  min-width: 0;
  padding: var(--rs-space-5);
  border: 1px solid var(--rs-color-border-subtle);
  border-radius: var(--rs-radius-3);
  background:
    linear-gradient(180deg, var(--rs-color-light-sheen), transparent),
    rgba(255, 255, 255, 0.035);
}

.guide-steps {
  display: grid;
  gap: var(--rs-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: var(--rs-space-3);
  row-gap: var(--rs-space-1);
  align-items: start;
}

.guide-steps li span {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-bg-soft);
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-xs);
  font-weight: var(--rs-font-weight-semibold);
}

.guide-steps strong {
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-sm);
  line-height: var(--rs-line-height-ui);
}

.guide-steps small {
  grid-column: 2;
  color: var(--rs-color-text-subtle);
  font-size: var(--rs-font-size-xs);
  line-height: var(--rs-line-height-ui);
}

.flow-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 var(--rs-space-3);
  padding: 0;
  list-style: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.flow-rail li {
  position: relative;
  min-width: 0;
  min-height: 2rem;
  padding: 0.375rem 0.625rem 0.375rem 1.5rem;
  border: 1px solid rgba(232, 95, 50, 0.24);
  border-radius: var(--rs-radius-pill);
  background: rgba(255, 255, 255, 0.72);
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-xs);
  font-weight: var(--rs-font-weight-semibold);
  line-height: var(--rs-line-height-ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(17, 24, 21, 0.035);
}

.flow-rail li::before {
  content: "";
  position: absolute;
  left: 0.5625rem;
  top: 50%;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-accent);
  transform: translateY(-50%);
}

.choice-section {
  display: grid;
  gap: var(--rs-space-3);
  min-width: 0;
}

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

.choice-heading h2 {
  margin: var(--rs-space-1) 0 0;
  font-size: 2rem;
  line-height: var(--rs-line-height-heading);
}

.choice-heading p {
  max-width: 22rem;
  margin: 0;
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-sm);
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  min-width: 0;
}

.persona-card {
  position: relative;
  display: grid;
  gap: var(--rs-space-2);
  min-height: 14.25rem;
  padding: 0.9375rem 1rem;
  border: 1px solid rgba(17, 24, 21, 0.1);
  border-radius: var(--rs-radius-3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 250, 0.94)),
    var(--rs-color-surface);
  color: var(--rs-color-text);
  text-align: left;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 32px rgba(17, 24, 21, 0.06);
  transition: transform var(--rs-duration-fast) var(--rs-ease-standard),
    border-color var(--rs-duration-fast) var(--rs-ease-standard),
    background var(--rs-duration-fast) var(--rs-ease-standard),
    box-shadow var(--rs-duration-fast) var(--rs-ease-standard);
}

.persona-card:hover {
  transform: translateY(-3px);
  border-color: rgba(232, 95, 50, 0.34);
  background: var(--rs-color-surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 46px rgba(17, 24, 21, 0.095);
}

.persona-card.is-selected {
  border-color: var(--rs-color-accent-border);
  background:
    linear-gradient(180deg, var(--rs-state-active-bg), transparent),
    var(--rs-color-surface);
  box-shadow: 0 0 0 1px var(--rs-color-accent-border);
}

.persona-card h2 {
  margin: var(--rs-space-2) 0 0;
  font-size: 1.125rem;
  line-height: var(--rs-line-height-heading);
}

.persona-content {
  display: grid;
  min-width: 0;
}

.persona-card-head {
  display: flex;
  gap: var(--rs-space-2);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.test-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.375rem;
  padding: 0 0.5625rem;
  border: 1px solid rgba(232, 95, 50, 0.28);
  border-radius: var(--rs-radius-pill);
  background: rgba(232, 95, 50, 0.08);
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-xs);
  font-weight: var(--rs-font-weight-bold);
}

.case-code {
  color: var(--rs-color-text-subtle);
  font-size: var(--rs-font-size-xs);
  font-weight: var(--rs-font-weight-bold);
}

.persona-role,
.persona-focus,
.persona-readiness,
.persona-scenario {
  margin: 0.25rem 0 0;
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-sm);
}

.persona-scenario {
  color: var(--rs-color-text);
  font-weight: var(--rs-font-weight-semibold);
}

.persona-case-data {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 0.75rem;
  margin: 0.625rem 0 0;
}

.persona-case-data div {
  display: grid;
  gap: 0.125rem;
}

.persona-case-data dt {
  color: var(--rs-color-text-subtle);
  font-size: var(--rs-font-size-2xs);
  font-weight: var(--rs-font-weight-bold);
  text-transform: uppercase;
}

.persona-case-data dd {
  margin: 0;
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-sm);
  line-height: var(--rs-line-height-ui);
}

.persona-case-data-compact {
  display: none;
}

.persona-case-data-compact dd {
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-xs);
}

.persona-focus {
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-sm);
  font-weight: var(--rs-font-weight-medium);
}

.persona-readiness {
  color: var(--rs-color-text-subtle);
}

.persona-card::after {
  content: "Run exploratory case";
  justify-self: start;
  align-self: end;
  width: 100%;
  min-height: 2rem;
  margin-top: 0.5rem;
  padding: 0.375rem var(--rs-space-2);
  border: 1px solid rgba(17, 24, 21, 0.1);
  border-radius: var(--rs-radius-2);
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-sm);
  font-weight: var(--rs-font-weight-semibold);
  text-align: center;
  background: var(--rs-color-surface-raised);
}

.persona-card[data-persona-id="ana"]::after {
  content: "Run validated case";
}

.persona-card.is-selected::after {
  border-color: var(--rs-color-accent-border);
  background: var(--rs-color-accent-soft);
  color: var(--rs-color-text);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.persona-card .chip {
  min-height: 1.375rem;
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
}

.chip-accent {
  border-color: var(--rs-color-accent-border);
  background: var(--rs-color-accent-soft);
  color: var(--rs-color-text);
}

.custom-panel {
  margin-top: var(--rs-space-4);
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.026);
}

.custom-summary,
.panel-heading {
  display: flex;
  gap: var(--rs-space-4);
  align-items: center;
  justify-content: space-between;
}

.custom-summary {
  padding: var(--rs-space-4);
  cursor: pointer;
  list-style: none;
}

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

.custom-summary h2,
.panel-heading h2 {
  margin: var(--rs-space-1) 0 0;
  font-size: var(--rs-font-size-lg);
  line-height: var(--rs-line-height-heading);
}

.summary-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--rs-control-height-sm);
  padding: var(--rs-space-1) var(--rs-space-3);
  border: 1px solid var(--rs-color-border-subtle);
  border-radius: var(--rs-radius-pill);
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-xs);
  font-weight: var(--rs-font-weight-semibold);
}

.custom-panel[open] .summary-action {
  border-color: var(--rs-color-accent-border);
  background: var(--rs-color-accent-soft);
  color: var(--rs-color-text);
}

.summary-close {
  display: none;
}

.custom-panel[open] .summary-open {
  display: none;
}

.custom-panel[open] .summary-close {
  display: inline;
}

.custom-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: var(--rs-space-4);
  padding: 0 var(--rs-space-4) var(--rs-space-4);
}

.custom-guidance {
  grid-column: 1 / -1;
  max-width: 56rem;
  margin: 0;
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-sm);
  line-height: var(--rs-line-height-body);
}

.custom-form label {
  display: grid;
  gap: var(--rs-space-2);
  min-width: 0;
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-sm);
}

.custom-form input,
.custom-form textarea,
.custom-form input[type="file"] {
  width: 100%;
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-3);
  background: color-mix(in srgb, var(--rs-color-bg) 78%, var(--rs-color-surface-inverse));
  color: var(--rs-color-text);
  padding: var(--rs-space-3);
  resize: vertical;
}

.custom-form input {
  min-height: var(--rs-control-height-lg);
}

.custom-form textarea {
  min-height: 5rem;
}

.manager-input-field,
.attachment-field {
  grid-column: 1 / -1;
}

.attachment-field small {
  color: var(--rs-color-text-subtle);
  font-size: var(--rs-font-size-xs);
  line-height: var(--rs-line-height-ui);
}

.custom-form input::placeholder,
.custom-form textarea::placeholder {
  color: var(--rs-color-text-subtle);
}

.action-row {
  display: flex;
  gap: var(--rs-space-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--rs-space-5);
  padding: var(--rs-space-4);
  border: 1px solid var(--rs-color-border-subtle);
  border-radius: var(--rs-radius-3);
  background: rgba(255, 255, 255, 0.035);
}

.selection-note {
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-sm);
  font-weight: var(--rs-font-weight-medium);
}

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rs-space-3);
  min-height: var(--rs-control-height-lg);
  min-width: 13rem;
  padding: var(--rs-space-3) var(--rs-space-5);
  border: 1px solid var(--rs-color-accent-border);
  border-radius: var(--rs-radius-3);
  background: linear-gradient(180deg, var(--rs-color-accent), var(--rs-color-accent-strong));
  color: var(--rs-color-brand-ink);
  font-weight: var(--rs-font-weight-bold);
  box-shadow: var(--rs-shadow-accent);
}

.primary-action:not(:disabled):hover {
  transform: translateY(-1px);
}

.primary-action:disabled {
  opacity: var(--rs-state-disabled-opacity);
  box-shadow: none;
}

.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rs-control-height-md);
  padding: var(--rs-space-2) var(--rs-space-4);
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-3);
  background: var(--rs-color-surface);
  color: var(--rs-color-text);
  font-weight: var(--rs-font-weight-semibold);
}

.secondary-action:not(:disabled):hover {
  border-color: var(--rs-color-border-strong);
  background: var(--rs-state-hover-bg);
}

.secondary-action:disabled {
  opacity: var(--rs-state-disabled-opacity);
}

.primary-action.is-running .action-dot {
  background: var(--rs-color-warning);
  box-shadow: 0 0 0 4px var(--rs-color-warning-soft);
  animation: pulse 1100ms var(--rs-ease-in-out) infinite;
}

.primary-action.is-running {
  border-color: var(--rs-color-warning);
  background: linear-gradient(180deg, var(--rs-color-warning), color-mix(in srgb, var(--rs-color-warning) 78%, #8a5a00));
  color: var(--rs-color-brand-ink);
  opacity: 1;
  box-shadow: 0 18px 48px rgba(245, 158, 11, 0.28);
}

.pending-panel {
  margin-top: var(--rs-space-4);
  padding: var(--rs-space-4);
  border-color: var(--rs-color-info);
  background: var(--rs-color-info-soft);
}

.pending-panel h2 {
  margin: 0 0 var(--rs-space-2);
  font-size: var(--rs-font-size-lg);
}

.pending-panel p {
  margin: 0;
  color: var(--rs-color-text-muted);
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: var(--rs-space-4);
}

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

.metric {
  padding: var(--rs-space-3) 0 0;
  border-top: 1px solid var(--rs-color-border-subtle);
}

.metric-label {
  color: var(--rs-color-text-subtle);
  font-size: var(--rs-font-size-xs);
}

.metric-value {
  display: block;
  margin-top: var(--rs-space-2);
  color: var(--rs-color-text);
  font-weight: var(--rs-font-weight-semibold);
}

.pipeline {
  display: grid;
  gap: var(--rs-space-2);
}

.pipeline-step {
  position: relative;
  padding: var(--rs-space-3) var(--rs-space-3) var(--rs-space-3) var(--rs-space-6);
  border: 1px solid var(--rs-color-border-subtle);
  border-radius: var(--rs-radius-2);
  background: rgba(255, 255, 255, 0.026);
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-sm);
}

.pipeline-step::before {
  content: "";
  position: absolute;
  left: var(--rs-space-3);
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--rs-radius-pill);
  background: currentColor;
  opacity: 0.8;
  transform: translateY(-50%);
}

.pipeline-step.is-active {
  border-color: var(--rs-color-accent-border);
  background: var(--rs-color-accent-soft);
  color: var(--rs-color-text);
}

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

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

.manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: var(--rs-space-4);
}

.dashboard-shell {
  display: grid;
  gap: var(--rs-space-4);
  min-width: 0;
}

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

.dashboard-metrics .panel {
  display: grid;
  gap: var(--rs-space-2);
}

.dashboard-metrics strong {
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-3xl);
  line-height: var(--rs-line-height-heading);
}

.panel-subtitle {
  margin: var(--rs-space-1) 0 0;
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-xs);
  line-height: var(--rs-line-height-ui);
}

.manager-overview-panel {
  display: grid;
  gap: var(--rs-space-4);
  border-color: var(--rs-color-accent-border);
  background:
    linear-gradient(180deg, var(--rs-color-accent-soft), transparent),
    var(--rs-color-surface);
}

.manager-overview-panel strong {
  display: block;
  margin: var(--rs-space-1) 0;
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-3xl);
  line-height: var(--rs-line-height-heading);
}

.trust-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rs-space-2);
}

.dashboard-table-panel {
  min-width: 0;
  overflow: hidden;
}

.dashboard-table {
  display: grid;
  margin-top: var(--rs-space-4);
  border: 1px solid var(--rs-color-border-subtle);
  border-radius: var(--rs-radius-3);
  overflow: auto;
}

.dashboard-row {
  display: grid;
  grid-template-columns:
    minmax(11rem, 1.15fr)
    minmax(7.5rem, 0.8fr)
    minmax(8.75rem, 0.86fr)
    minmax(7rem, 0.62fr)
    minmax(11rem, 1.25fr);
  gap: var(--rs-space-3);
  align-items: center;
  min-width: 0;
  padding: var(--rs-space-3) var(--rs-space-4);
  border-bottom: 1px solid var(--rs-color-border-subtle);
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-sm);
}

.dashboard-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboard-person {
  display: grid;
  gap: 0.125rem;
}

.dashboard-person-link {
  color: inherit;
  text-decoration: none;
  border-radius: var(--rs-radius-1);
}

.dashboard-person-link:hover strong {
  color: var(--rs-color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.dashboard-person-link:focus-visible {
  box-shadow: var(--rs-state-focus-ring);
}

.dashboard-person small {
  color: var(--rs-color-text-subtle);
  font-size: var(--rs-font-size-xs);
}

.dashboard-row:last-child {
  border-bottom: 0;
}

.dashboard-row strong,
.dashboard-head {
  color: var(--rs-color-text);
}

.dashboard-head {
  background: var(--rs-color-surface-raised);
  font-size: var(--rs-font-size-xs);
  font-weight: var(--rs-font-weight-bold);
  text-transform: uppercase;
}

.weekly-plan-panel {
  grid-column: 1 / -1;
}

.weekly-plan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rs-space-3);
  min-width: 0;
}

.week-card {
  display: grid;
  gap: var(--rs-space-2);
  min-height: 11rem;
  padding: var(--rs-space-4);
  border: 1px solid var(--rs-color-border-subtle);
  border-radius: var(--rs-radius-3);
  background: var(--rs-color-surface-raised);
}

.week-card span {
  color: var(--rs-color-accent);
  font-size: var(--rs-font-size-xs);
  font-weight: var(--rs-font-weight-bold);
  text-transform: uppercase;
}

.week-card small {
  color: var(--rs-color-text-subtle);
  font-size: var(--rs-font-size-xs);
  font-weight: var(--rs-font-weight-semibold);
}

.week-card strong {
  color: var(--rs-color-text);
}

.week-card p {
  margin: 0;
  color: var(--rs-color-text-muted);
  font-size: var(--rs-font-size-sm);
}

.week-card em {
  display: block;
  margin-top: var(--rs-space-1);
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-xs);
  font-style: normal;
  line-height: var(--rs-line-height-ui);
}

.panel {
  padding: var(--rs-space-5);
  overflow-wrap: anywhere;
  box-shadow: none;
}

.panel.is-accent {
  border-color: var(--rs-color-accent-border);
  background:
    linear-gradient(180deg, var(--rs-color-accent-soft), transparent),
    var(--rs-color-surface);
  box-shadow: 0 0 0 1px rgba(232, 105, 60, 0.12);
}

.panel.is-success {
  border-color: var(--rs-stream-complete-border);
  background:
    linear-gradient(180deg, var(--rs-stream-complete-bg), transparent),
    var(--rs-color-surface);
}

.panel h3 {
  margin: 0 0 var(--rs-space-3);
  font-size: var(--rs-font-size-lg);
  line-height: var(--rs-line-height-heading);
}

.panel p,
.panel li {
  color: var(--rs-color-text-muted);
  line-height: var(--rs-line-height-body);
}

.panel p {
  margin: 0;
}

.content-list {
  display: grid;
  gap: var(--rs-space-2);
  margin: 0;
  padding-left: var(--rs-space-4);
}

.structured-list {
  display: grid;
  gap: var(--rs-space-3);
}

.structured-card {
  padding: var(--rs-space-3);
  border: 1px solid var(--rs-color-border-subtle);
  border-radius: var(--rs-radius-2);
  background: var(--rs-color-surface-raised);
}

.structured-kv {
  display: grid;
  gap: var(--rs-space-3);
  margin: 0;
}

.structured-kv > div {
  display: grid;
  gap: var(--rs-space-1);
  padding-top: var(--rs-space-2);
  border-top: 1px solid var(--rs-color-border-subtle);
}

.structured-kv > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.structured-kv dt {
  color: var(--rs-color-text-subtle);
  font-size: var(--rs-font-size-2xs);
  font-weight: var(--rs-font-weight-bold);
  text-transform: uppercase;
}

.structured-kv dd {
  display: grid;
  gap: var(--rs-space-2);
  margin: 0;
  color: var(--rs-color-text-muted);
}

.panel-stack {
  display: grid;
  gap: var(--rs-space-4);
}

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

.timeline-stage {
  min-height: 8rem;
  padding: var(--rs-space-4);
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-3);
  background: rgba(255, 255, 255, 0.026);
}

.timeline-stage strong {
  display: block;
  margin-bottom: var(--rs-space-2);
}

.question-list {
  display: grid;
  gap: var(--rs-space-3);
  counter-reset: question;
}

.question-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--rs-space-3);
  align-items: start;
  padding: var(--rs-space-3);
  border: 1px solid var(--rs-color-border-subtle);
  border-radius: var(--rs-radius-3);
  background: rgba(255, 255, 255, 0.026);
  color: var(--rs-color-text-muted);
}

.question-row::before {
  counter-increment: question;
  content: counter(question);
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-accent-soft);
  color: var(--rs-color-text);
  font-weight: var(--rs-font-weight-semibold);
}

.raw-output {
  margin: 0;
  white-space: pre-wrap;
  color: var(--rs-color-text-muted);
  font-family: var(--rs-font-sans);
  line-height: var(--rs-line-height-body);
}

.rich-output {
  display: grid;
  gap: var(--rs-space-3);
}

.rich-output h4 {
  margin: var(--rs-space-2) 0 0;
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-base);
  line-height: var(--rs-line-height-heading);
}

.rich-output h4:first-child {
  margin-top: 0;
}

.rich-output p {
  margin: 0;
}

.rich-list {
  padding-left: var(--rs-space-5);
}

.empty-shell {
  display: grid;
  gap: var(--rs-space-3);
}

.skeleton-line {
  height: 0.875rem;
  max-width: 100%;
  border-radius: var(--rs-radius-pill);
  background: rgba(255, 255, 255, 0.07);
}

.skeleton-line.short {
  width: 42%;
}

.skeleton-line.medium {
  width: 66%;
}

.skeleton-card {
  min-height: 7rem;
  border: 1px solid var(--rs-color-border-subtle);
  border-radius: var(--rs-radius-3);
  background: rgba(255, 255, 255, 0.026);
}

.trace-root {
  padding: var(--rs-space-5);
  background: rgba(255, 255, 255, 0.026);
}

.trace-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rs-space-2);
  margin-bottom: var(--rs-space-4);
}

.trace-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--rs-color-border-subtle);
  border-radius: var(--rs-radius-3);
  overflow: hidden;
}

.trace-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(160px, 0.72fr) minmax(220px, 1.12fr) minmax(120px, 0.54fr) 7.25rem;
  gap: var(--rs-space-3);
  align-items: center;
  padding: var(--rs-space-4);
  border-bottom: 1px solid var(--rs-color-border-subtle);
  background: rgba(255, 255, 255, 0.018);
}

.trace-row:last-child {
  border-bottom: 0;
}

.trace-row[data-status="running"],
.trace-row[data-status="validating"] {
  border-color: var(--rs-stream-running-border);
  background: var(--rs-stream-running-bg);
}

.trace-row[data-status="complete"],
.trace-row[data-status="validated"] {
  border-color: var(--rs-stream-complete-border);
  background: var(--rs-stream-complete-bg);
}

.trace-row[data-status="error"] {
  border-color: var(--rs-stream-error-border);
  background: var(--rs-stream-error-bg);
}

.trace-step {
  display: inline-grid;
  place-items: center;
  width: var(--rs-trace-step-size);
  height: var(--rs-trace-step-size);
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-pill);
  font-size: var(--rs-font-size-xs);
  font-weight: var(--rs-font-weight-semibold);
  background: var(--rs-color-surface);
}

.trace-agent,
.trace-action,
.trace-output {
  overflow-wrap: anywhere;
}

.trace-agent,
.trace-output {
  font-family: var(--rs-font-mono);
  font-size: var(--rs-font-size-xs);
  color: var(--rs-color-text-subtle);
}

.trace-action {
  color: var(--rs-color-text);
  font-size: var(--rs-font-size-sm);
  font-weight: var(--rs-font-weight-medium);
}

.trace-status {
  justify-self: end;
}

.error-panel {
  padding: var(--rs-space-4);
  border: 1px solid var(--rs-stream-error-border);
  border-radius: var(--rs-radius-3);
  background: var(--rs-stream-error-bg);
}

.error-panel h3 {
  margin: 0 0 var(--rs-space-2);
}

.error-panel p {
  margin: 0;
  color: var(--rs-color-text-muted);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rs-space-3);
  margin-top: var(--rs-space-4);
}

.error-action {
  min-width: 8rem;
}

.app-main .connection-card,
.app-main .pending-panel,
.app-main .custom-panel,
.app-main .panel,
.app-main .trace-root {
  background: var(--rs-color-surface);
  box-shadow: var(--rs-shadow-xs), var(--rs-shadow-sm);
}

.app-main .connection-card {
  background: var(--rs-color-success-soft);
}

.app-main .guide-card,
.app-main .workspace-topbar,
.app-main .persona-card,
.app-main .action-row,
.app-main .custom-panel,
.app-main .trace-list {
  background: var(--rs-color-surface);
  box-shadow: var(--rs-shadow-xs), 0 8px 22px rgba(17, 24, 21, 0.045);
}

.app-main .guide-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 249, 0.96)),
    var(--rs-color-surface);
}

.app-main .guide-steps li span,
.app-main .trace-step {
  background: var(--rs-color-surface-raised);
}

.app-main .flow-rail li,
.app-main .pipeline-step,
.app-main .timeline-stage,
.app-main .question-row,
.app-main .skeleton-card {
  background: var(--rs-color-surface-raised);
}

.app-main .flow-rail {
  background: transparent;
  box-shadow: none;
}

.app-main .flow-rail li {
  border-color: rgba(232, 95, 50, 0.24);
  background: rgba(255, 255, 255, 0.72);
}

.app-main .persona-card:hover,
.app-main .custom-panel[open],
.app-main .panel {
  background: var(--rs-color-surface);
}

.app-main .persona-card.is-selected {
  background:
    linear-gradient(180deg, var(--rs-state-selected-bg), rgba(255, 255, 255, 0.76)),
    var(--rs-color-surface);
}

.app-main .custom-form input,
.app-main .custom-form textarea {
  background: var(--rs-color-surface);
  color: var(--rs-color-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.76) inset;
}

.app-main .custom-form input:focus,
.app-main .custom-form textarea:focus {
  border-color: var(--rs-color-accent-border);
}

.app-main .panel.is-accent,
.app-main .panel.is-success {
  box-shadow: var(--rs-shadow-xs), var(--rs-shadow-sm);
}

.app-main .trace-row {
  background: var(--rs-color-surface);
}

.app-main .trace-row:nth-child(even) {
  background: var(--rs-color-surface-raised);
}

.app-main .skeleton-line {
  background: rgba(17, 24, 21, 0.08);
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
}

@property --rs-bd-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes rs-trace {
  to {
    --rs-bd-angle: 360deg;
  }
}

.primary-action,
.persona-card,
.panel.is-accent,
.panel.is-success,
.flow-step,
.trace-row {
  position: relative;
}

.primary-action,
.persona-card,
.flow-step {
  isolation: isolate;
}

.primary-action::before,
.persona-card::before,
.panel.is-accent::before,
.panel.is-success::before,
.flow-step.is-processing::before,
.trace-row[data-status="running"]::before,
.trace-row[data-status="validating"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--rs-bd-angle),
    transparent 0deg,
    transparent 250deg,
    var(--rs-tc, var(--rs-color-accent)) 308deg,
    var(--rs-tc-tip, #ffd9c7) 334deg,
    var(--rs-tc, var(--rs-color-accent)) 360deg
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--rs-duration-base) var(--rs-ease-standard);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.persona-card {
  --rs-tc: var(--rs-color-accent);
  --rs-tc-tip: #ffd9c7;
}

.persona-card:hover::before,
.persona-card.is-selected::before {
  opacity: 1;
  animation: rs-trace 2.6s linear infinite;
}

.primary-action {
  --rs-tc: rgba(255, 255, 255, 0.55);
  --rs-tc-tip: #fff6ef;
}

.primary-action:not(:disabled):hover::before {
  opacity: 1;
  animation: rs-trace 2.4s linear infinite;
}

.primary-action.is-running::before {
  opacity: 1;
  animation: rs-trace 1.8s linear infinite;
}

.flow-step.is-processing {
  --rs-tc: var(--rs-color-accent);
  --rs-tc-tip: #ffd9c7;
}

.flow-step.is-processing::before {
  opacity: 1;
  animation: rs-trace 3s linear infinite;
}

.trace-row[data-status="running"],
.trace-row[data-status="validating"] {
  --rs-tc: var(--rs-color-warning);
  --rs-tc-tip: #ffe7b8;
}

.trace-row[data-status="running"]::before,
.trace-row[data-status="validating"]::before {
  inset: 0;
  opacity: 1;
  animation: rs-trace 2.2s linear infinite;
}

.panel.is-accent {
  --rs-tc: var(--rs-color-accent);
  --rs-tc-tip: #ffd9c7;
}

.panel.is-success {
  --rs-tc: var(--rs-color-success);
  --rs-tc-tip: #bff4d6;
}

.panel.is-accent:hover::before,
.panel.is-success:hover::before {
  opacity: 1;
  animation: rs-trace 2.8s linear infinite;
}

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

  .primary-action::before,
  .persona-card::before,
  .panel.is-accent::before,
  .panel.is-success::before,
  .flow-step.is-processing::before,
  .trace-row[data-status="running"]::before,
  .trace-row[data-status="validating"]::before {
    animation: none !important;
    background: conic-gradient(from 308deg, transparent 0deg, var(--rs-tc-tip, #ffd9c7) 55deg, transparent 110deg);
  }
}

@media (max-width: 900px) {
  .guide-card {
    padding: var(--rs-space-4);
  }

  .workspace-topbar {
    display: grid;
    align-items: start;
    min-width: 0;
  }

  .topbar-actions {
    width: 100%;
    justify-content: stretch;
  }

  .topbar-actions .secondary-action {
    flex: 1 1 8rem;
    min-width: 0;
  }

  .flow-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }

  .flow-rail li {
    white-space: normal;
  }

  .choice-heading {
    display: grid;
    gap: var(--rs-space-3);
    align-items: start;
  }

  .choice-heading p {
    max-width: none;
  }

  .persona-grid,
  .custom-form,
  .workspace-topbar,
  .overview-grid,
  .panel-grid,
  .panel-grid.three,
  .dashboard-metrics,
  .manager-grid,
  .timeline,
  .weekly-plan {
    grid-template-columns: 1fr;
  }

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

  .trace-row {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  }

  .trace-action,
  .trace-output {
    grid-column: 2 / -1;
  }
}

@media (min-width: 901px) and (max-width: 1320px) {
  .persona-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .workspace-topbar {
    width: 100%;
    max-width: 100%;
    padding: var(--rs-space-3);
    overflow: hidden;
  }

  .topbar-copy h2 {
    max-width: 100%;
    font-size: var(--rs-font-size-lg);
    overflow-wrap: anywhere;
  }

  .topbar-copy p:last-child {
    max-width: 100%;
    line-height: var(--rs-line-height-body);
    overflow-wrap: anywhere;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    justify-content: stretch;
  }

  .topbar-actions .secondary-action {
    width: 100%;
    min-width: 0;
  }

  .flow-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--rs-space-5);
  }

  .flow-rail li {
    min-height: 2rem;
  }

  .choice-heading,
  .custom-summary,
  .action-row {
    display: grid;
    gap: var(--rs-space-3);
    align-items: start;
  }

  .choice-heading h2 {
    font-size: var(--rs-font-size-xl);
  }

  .choice-heading p {
    max-width: none;
  }

  .guide-steps li {
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }

  .guide-steps li span {
    width: 1.75rem;
    height: 1.75rem;
  }

  .persona-grid {
    gap: var(--rs-space-3);
  }

  .persona-card,
  .panel,
  .trace-root {
    padding: var(--rs-space-4);
  }

  .action-row {
    display: grid;
  }

  .primary-action {
    width: 100%;
    min-width: 0;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .timeline {
    position: relative;
    gap: var(--rs-space-4);
  }

  .timeline-stage {
    min-height: 0;
  }

  .trace-row {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    padding: var(--rs-space-3);
  }

  .dashboard-row {
    min-width: 42rem;
  }

  .trace-status {
    grid-column: 2;
    justify-self: start;
  }
}