:root {
  color-scheme: light;
  font-family: Inter, Arial, sans-serif;
  background: #f4f6fa;
  color: #18202c;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  background: #f4f6fa;
}

button,
input,
select,
textarea {
  font: inherit;
}

.hidden {
  display: none !important;
}

.studio-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.studio-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px 0;
  background: linear-gradient(180deg, rgba(244, 246, 250, 0.98) 0%, rgba(244, 246, 250, 0.92) 100%);
  backdrop-filter: blur(10px);
}

.studio-header__brand {
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.studio-header__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.studio-header__brand-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.studio-title {
  font-size: 16px;
  font-weight: 700;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.studio-subtitle {
  margin-top: 1px;
  font-size: 11px;
  color: #647187;
}

.studio-header__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 1080px;
}

.dropdown-host {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 18;
}

.overlay-chip {
  border: 1px solid #d3d8e3;
  background: #ffffff;
  color: #152034;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.overlay-chip.is-active {
  border-color: #8397cf;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.12);
}

.overlay-chip.is-accent {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.overlay-chip.is-saved {
  border-color: #8ec1a0;
  background: #eff9f1;
  color: #1e6a3d;
}

.overlay-dropdown {
  position: absolute;
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 88px);
  overflow: auto;
  padding: 14px;
  border: 1px solid #d9dfeb;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

#panel-views.overlay-dropdown {
  width: min(1180px, calc(100vw - 36px));
}

#panel-entities.overlay-dropdown {
  width: min(980px, calc(100vw - 36px));
}

.overlay-dropdown__title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b778d;
  margin-bottom: 12px;
}

.dropdown-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.choice-card,
.saved-view-row,
.scope-chip,
.button-secondary,
.panel-action {
  text-align: left;
  border: 1px solid #d8deea;
  border-radius: 10px;
  background: #fbfcfe;
  padding: 12px 14px;
  cursor: pointer;
}

.choice-card.is-selected {
  border-color: #8fa5e8;
  background: #f4f7ff;
}

.choice-card strong,
.saved-view-row strong {
  display: block;
  font-size: 13px;
}

.choice-card span,
.saved-view-row span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #65738b;
}

.dropdown-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dropdown-form-grid .wide {
  grid-column: 1 / -1;
}

.dropdown-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #4b566c;
}

.dropdown-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #4b566c;
}

.dropdown-form-grid input,
.dropdown-form-grid select,
.dropdown-form-grid textarea {
  width: 100%;
  border: 1px solid #d4dbe7;
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 10px;
  color: #172132;
}

.dropdown-form-grid select[multiple] {
  min-height: 190px;
}

.form-inline-actions,
.scope-chip-row,
.saved-view-list,
.rule-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.saved-view-list,
.rule-list,
.entity-wallet-list {
  align-items: stretch;
}

.scope-chip span {
  font-size: 11px;
  text-transform: uppercase;
  color: #6c7790;
  margin-right: 6px;
}

.helper-text {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #66748b;
}

.checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.checkbox-list label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #33415c;
}

.checkbox-list input[type='checkbox'] {
  width: 14px;
  height: 14px;
  margin: 0;
}

.rule-row {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #fcfdff;
}

.rule-row button {
  border: 0;
  background: transparent;
  color: #7d2432;
  cursor: pointer;
}

.rule-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.studio-main {
  display: block;
  padding: 14px 18px 18px;
  min-height: calc(100vh - 86px);
}

.selection-panel {
  position: absolute;
  left: 14px;
  top: 14px;
  width: min(360px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow: auto;
  background: #ffffff;
  border: 1px solid #d7deea;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  z-index: 4;
}

.selection-panel__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #728099;
}

.selection-panel h3 {
  margin: 8px 0 14px;
  font-size: 18px;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.detail-list div {
  display: grid;
  gap: 4px;
}

.detail-list dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #73819a;
}

.detail-list dd {
  margin: 0;
  font-size: 13px;
  word-break: break-word;
}

.selection-panel__summary {
  margin-top: 12px;
  font-size: 13px;
  color: #445167;
}

.selection-panel__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wallet-card {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.wallet-card__logo-wrap {
  display: flex;
  justify-content: flex-start;
}

.wallet-card__logo-badge {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(207, 214, 226, 0.95);
  box-shadow: 0 1px 2px rgba(16, 21, 34, 0.06);
  overflow: hidden;
}

.wallet-card__logo {
  width: 44px;
  height: 44px;
  object-fit: cover;
  display: block;
}

.wallet-card__group {
  font-size: 12px;
  font-weight: 600;
  color: #33415d;
}

.wallet-card__labels {
  font-size: 12px;
  color: #60708b;
}

.wallet-card__facts {
  margin-bottom: 0;
}

.wallet-card-chart {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #d7deea;
  border-radius: 10px;
  background: #fbfcfe;
}

.wallet-card-chart.is-empty {
  font-size: 12px;
  color: #66748b;
}

.wallet-card-chart__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: #6c7890;
}

.wallet-card-chart__svg {
  width: 100%;
  height: 88px;
  display: block;
}

.wallet-card-chart__area {
  fill: rgba(53, 107, 231, 0.12);
}

.wallet-card-chart__line {
  fill: none;
  stroke: #356be7;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wallet-card-chart__dot {
  fill: #356be7;
  stroke: #ffffff;
  stroke-width: 1.5;
}

.note-list {
  margin: 12px 0 0;
  padding-left: 16px;
  font-size: 13px;
  color: #4e596e;
}

.studio-canvas-wrap {
  position: relative;
  min-width: 0;
}

.graph-stage {
  position: relative;
  min-height: calc(100vh - 120px);
  border: 1px solid #d8deeb;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.graph-svg {
  width: 100%;
  height: calc(100vh - 120px);
  display: block;
  background: #ffffff;
  cursor: grab;
}

.graph-svg.is-dragging,
.graph-svg.is-panning {
  cursor: grabbing;
}

.graph-pan-surface {
  fill: #ffffff;
}

.graph-gridlines line {
  stroke: #d6d9df;
  stroke-width: 0.5;
  opacity: 0.82;
}

.graph-emphasis-guides {
  pointer-events: none;
}

.graph-emphasis-line {
  stroke-width: 2.2;
  opacity: 0.5;
}

.graph-emphasis-line.is-scope {
  stroke: #7fb0ff;
  stroke-dasharray: 10 8;
}

.graph-emphasis-line.is-root {
  stroke: #f2a4c8;
  stroke-dasharray: 10 8;
}

.graph-guide-label {
  fill: #7a869a;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.graph-guide-label.is-column {
  text-anchor: middle;
}

.graph-guide-label.is-row {
  text-anchor: end;
}

.graph-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  cursor: pointer;
}

.graph-edge-line {
  stroke: var(--edge-accent, #4b556b);
  stroke-width: var(--edge-width, 1.15);
  stroke-opacity: var(--edge-opacity, 1);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.graph-edge-arrow {
  fill: none;
  stroke: var(--edge-accent, #4b556b);
  stroke-width: var(--edge-arrow-width, 1.2);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
  opacity: var(--edge-opacity, 1);
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.graph-edge.is-selected .graph-edge-line {
  stroke: #7e5ac6;
  stroke-width: calc(var(--edge-width, 1.15) + 0.45);
}

.graph-edge.is-selected .graph-edge-arrow {
  stroke: #7e5ac6;
}

.graph-edge-label {
  fill: #4d5567;
  font-size: 10.8px;
  text-anchor: middle;
  pointer-events: none;
  dominant-baseline: middle;
}

.graph-edge.is-selected .graph-edge-label {
  fill: #7e5ac6;
  font-weight: 600;
}

.graph-node {
  cursor: pointer;
}

.graph-node-hover {
  fill: transparent;
}

.graph-node-card {
  fill: var(--node-fill, rgba(91, 111, 163, 0.06));
  stroke: var(--node-accent, #1f2f5f);
  stroke-width: 0.5;
}

.graph-node-scope-pulse {
  fill: none;
  stroke: rgba(91, 140, 255, 0.78);
  stroke-width: 1.4;
  stroke-dasharray: 6 4;
  opacity: 0.35;
  animation: graph-node-scope-pulse 1s ease-in-out infinite;
}

.graph-node.is-candidate-role .graph-node-card,
.graph-node.is-root-role .graph-node-card {
  stroke-width: 2.4;
}

.graph-node.is-selected .graph-node-card {
  stroke: #7e5ac6;
  stroke-width: 1;
  fill: rgba(126, 90, 198, 0.06);
}

.graph-node.is-selected.is-candidate-role .graph-node-card,
.graph-node.is-selected.is-root-role .graph-node-card {
  stroke-width: 2.8;
}

.graph-node-scope-flag {
  fill: var(--node-accent, #1f2f5f);
  opacity: 0.95;
}

.graph-node-title,
.graph-node-group,
.graph-node-tag,
.graph-node-balance {
  text-anchor: middle;
  pointer-events: none;
}

.graph-node-title {
  fill: #101522;
  font-size: 12px;
  font-weight: 600;
}

.graph-node-group,
.graph-node-tag,
.graph-node-balance {
  font-size: 11px;
  fill: #5f6a80;
}

.graph-node-group {
  font-size: 10.8px;
}

.graph-node-tag {
  font-size: 10.6px;
}

.graph-node-risk {
  text-anchor: middle;
  pointer-events: none;
  font-size: 10.6px;
  font-weight: 800;
  fill: #d22c2c;
}

.graph-node.is-large-balance-highlight .graph-node-title,
.graph-node.is-large-balance-highlight .graph-node-group,
.graph-node.is-large-balance-highlight .graph-node-tag,
.graph-node.is-large-balance-highlight .graph-node-balance {
  fill: #ff7a00;
}

.graph-node.is-large-balance-highlight .graph-node-balance {
  font-weight: 800;
}

.graph-node.is-large-balance-highlight .graph-node-risk {
  fill: #d22c2c;
}

.graph-node-tools rect {
  fill: rgba(255, 255, 255, 0.98);
  stroke: #d0d7e5;
  stroke-width: 0.8;
}

.graph-node-tools {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.graph-node-card,
.graph-node-scope-pulse,
.graph-node-scope-flag,
.graph-node-title,
.graph-node-group,
.graph-node-tag,
.graph-node-risk,
.graph-node-exchange-badge,
.graph-node-exchange-logo,
.graph-node-identity-badge,
.graph-node-identity-badge-text {
  pointer-events: none;
}

.graph-node.is-selected .graph-node-tools,
.graph-node:hover .graph-node-tools {
  opacity: 1;
  pointer-events: auto;
}

.graph-node-tool {
  cursor: pointer;
}

.graph-node-tools text {
  fill: #243246;
  font-size: 10.5px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.graph-node-tool.is-accent rect {
  fill: #edf3ff;
  stroke: #8fa5e8;
}

.graph-node-tool.is-accent text {
  fill: #315bc2;
}

.graph-node-tool.is-danger rect {
  fill: #fff2f3;
  stroke: #e1aab3;
}

.graph-node-tool.is-danger text {
  fill: #bc2537;
}

.graph-node-tool.is-collapse rect {
  fill: #f7f9fd;
  stroke: #cad3e4;
}

.scope-mini-chart-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scope-mini-chart {
  position: absolute;
  width: 900px;
  padding: 8px 10px 12px 4px;
  border: 1px solid rgba(147, 166, 207, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px rgba(23, 37, 84, 0.08);
  transform-origin: left top;
  will-change: transform;
}

.scope-mini-chart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.2;
  color: #51607b;
}

.scope-mini-chart__header span:first-child {
  font-weight: 600;
  color: #243246;
}

.scope-mini-chart__svg {
  display: block;
  width: 100%;
  height: 420px;
}

.scope-mini-chart__frame {
  position: relative;
}

.scope-mini-chart__grid-line {
  stroke: rgba(120, 145, 199, 0.22);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.scope-mini-chart__axis {
  position: relative;
  height: 28px;
  margin-top: 8px;
  font-size: 13px;
  color: #74839d;
}

.scope-mini-chart__axis span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.scope-mini-chart__axis span:first-child {
  transform: translateX(0);
}

.scope-mini-chart__axis span:last-child {
  transform: translateX(-100%);
}

.scope-mini-chart__area {
  fill: rgba(116, 161, 255, 0.16);
}

.scope-mini-chart__line {
  fill: none;
  stroke: #5d8df2;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scope-mini-chart__dot {
  fill: #2f62db;
}

.graph-node-exchange-badge {
  fill: #ffffff;
  stroke: rgba(210, 217, 229, 0.98);
  stroke-width: 1;
}

.graph-node-exchange-logo {
  pointer-events: none;
  overflow: hidden;
}

.graph-node-identity-badge {
  fill: #ffffff;
  stroke: rgba(210, 217, 229, 0.98);
  stroke-width: 1;
}

.graph-node-identity-badge.is-group {
  fill: #eef4ff;
  stroke: rgba(120, 160, 255, 0.95);
}

.graph-node-identity-badge.is-entity {
  fill: #faf0ff;
  stroke: rgba(183, 130, 214, 0.98);
}

.graph-node-identity-badge-text {
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
}

.graph-node-identity-badge-text.is-group {
  fill: #315bc2;
}

.graph-node-identity-badge-text.is-entity {
  fill: #7b3f98;
}

@keyframes graph-node-scope-pulse {
  0% {
    opacity: 0.18;
  }
  50% {
    opacity: 0.82;
  }
  100% {
    opacity: 0.18;
  }
}

.graph-node-tag.is-missing {
  fill: #9b6170;
}

.graph-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 14px;
  border: 1px solid #d7ddea;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  color: #5a657a;
}

.graph-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  pointer-events: none;
}

.graph-loader.is-overlay {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(1.5px);
}

.graph-loader__card {
  min-width: 208px;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 16px 13px;
  border: 1px solid rgba(212, 219, 231, 0.98);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.graph-loader__spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(154, 168, 191, 0.28);
  border-top-color: #5f7fd6;
  animation: graph-loader-spin 0.88s linear infinite;
}

.graph-loader__title {
  font-size: 13px;
  font-weight: 600;
  color: #263449;
}

.graph-loader__subtitle {
  font-size: 11.5px;
  color: #677389;
}

.graph-loader__timer {
  font-size: 11.5px;
  font-weight: 600;
  color: #33415f;
}

.graph-loader__detail {
  max-width: 320px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #4e5b74;
  text-align: center;
}

.graph-loader__hint {
  max-width: 320px;
  font-size: 11px;
  line-height: 1.45;
  color: #7a6747;
  text-align: center;
}

@keyframes graph-loader-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.graph-facts {
  position: absolute;
  right: 12px;
  top: 12px;
  display: inline-flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d9deea;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  font-size: 12px;
  color: #4d586d;
}

.graph-facts .is-warn {
  color: #915621;
}

.timeline-strip {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: grid;
  gap: 8px;
  padding: 0 4px 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 18%, rgba(255, 255, 255, 0.96) 46%, rgba(255, 255, 255, 0.985) 100%);
  box-shadow: none;
  backdrop-filter: none;
  z-index: 3;
}

.timeline-strip__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 0 6px;
}

.timeline-strip__status {
  min-width: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.timeline-strip__range {
  font-size: 11px;
  font-weight: 600;
  color: #172132;
}

.timeline-strip__meta {
  min-width: 0;
  font-size: 11px;
  color: #5c697f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-strip__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.timeline-preset {
  border: 1px solid rgba(198, 208, 226, 0.96);
  background: rgba(255, 255, 255, 0.88);
  color: #4d5b71;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.timeline-preset.is-active {
  border-color: #8fa5e8;
  background: #eff4ff;
  color: #234cad;
}

.timeline-strip__plot {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 6px 6px 0;
  min-height: 96px;
}

.timeline-bars {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(3px, 1fr);
  align-items: end;
  gap: 2px;
  min-height: 74px;
  padding: 0 0 14px;
}

.timeline-bars::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 1px;
  background: #cfd8e6;
}

.timeline-bars__cursor {
  position: absolute;
  top: 2px;
  bottom: 14px;
  width: 1px;
  background: rgba(37, 74, 173, 0.24);
  transform: translateX(-0.5px);
  pointer-events: none;
}

.timeline-bars__cursor::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #315ce6;
  box-shadow: 0 0 0 3px rgba(49, 92, 230, 0.12);
  transform: translateX(-50%);
}

.timeline-bar {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  min-width: 3px;
  min-height: 74px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.timeline-bar__fill {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #c2d0f4 0%, #6f8fe9 100%);
  opacity: 0.96;
}

.timeline-bar.is-active .timeline-bar__fill,
.timeline-bar:hover .timeline-bar__fill,
.timeline-bar:focus-visible .timeline-bar__fill {
  background: linear-gradient(180deg, #b0c4ff 0%, #315ce6 100%);
}

.timeline-axis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  font-size: 10px;
  color: #7a879b;
  letter-spacing: 0.02em;
}

.timeline-axis__tick {
  white-space: nowrap;
}

.timeline-axis__tick.is-start {
  text-align: left;
}

.timeline-axis__tick.is-center {
  text-align: center;
}

.timeline-axis__tick.is-end {
  text-align: right;
}

.timeline-empty {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 35px;
  text-align: center;
  font-size: 11px;
  color: #66748b;
  pointer-events: none;
}

.detail-card {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: min(420px, calc(100% - 28px));
  padding: 14px;
  border: 1px solid #d7deea;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  z-index: 4;
}

.detail-card.is-edge-detail {
  width: min(760px, calc(100% - 28px));
}

.overlay-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.overlay-panel__header h3,
.detail-card h4 {
  margin: 6px 0 12px;
  font-size: 15px;
}

.overlay-close {
  border: 1px solid #d7deea;
  background: #ffffff;
  color: #516078;
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1;
  cursor: pointer;
}

.detail-card__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #728099;
}

.detail-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.detail-card__metrics div {
  display: grid;
  gap: 4px;
}

.detail-card__metrics dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #73819a;
}

.detail-card__metrics dd {
  margin: 0;
  font-size: 13px;
  word-break: break-word;
}

.detail-card__summary {
  margin: 12px 0 0;
  font-size: 13px;
  color: #445167;
}

.wallet-card__labels.is-risk,
.detail-card__risk-value {
  color: #c62828;
  font-weight: 800;
}

.detail-card__section {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.detail-card__section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #728099;
}

.detail-card__transactions,
.expand-overlay__list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.detail-card__tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #233046;
}

.detail-card__tx-table th,
.detail-card__tx-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e3e8f2;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.detail-card__tx-table th {
  position: sticky;
  top: 0;
  background: #f8fbff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7890;
  z-index: 1;
}

.detail-card__tx-table tbody tr:last-child td {
  border-bottom: 0;
}

.detail-card__tx-table td:nth-child(1) {
  width: 44px;
}

.detail-card__tx-table td:nth-child(2) {
  min-width: 148px;
}

.detail-card__tx-table td:nth-child(3) {
  min-width: 104px;
}

.detail-card__tx-table td:nth-child(4) a {
  color: #3565d6;
  text-decoration: none;
  font-weight: 700;
}

.detail-card__tx-table td:nth-child(4) a:hover {
  text-decoration: underline;
}

.detail-card__transactions-empty {
  font-size: 12px;
  color: #66748b;
}

.detail-card__label-groups {
  display: grid;
  gap: 10px;
}

.detail-card__label-group {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #fbfcfe;
}

.detail-card__label-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #556279;
}

.detail-card__label-grid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.detail-card__label-row {
  display: grid;
  gap: 4px;
}

.detail-card__label-row dt {
  font-size: 11px;
  color: #73819a;
}

.detail-card__label-row dd {
  margin: 0;
  font-size: 12px;
  color: #1b2432;
  word-break: break-word;
}

.detail-card__tx-row,
.expand-overlay__row {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #fbfcfe;
}

.detail-card__tx-main,
.detail-card__tx-meta,
.expand-overlay__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #53627a;
}

.detail-card__tx-main strong,
.expand-overlay__node strong {
  color: #18202c;
}

.expand-overlay {
  position: absolute;
  right: 14px;
  top: 14px;
  width: min(520px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow: auto;
  padding: 14px;
  border: 1px solid #d7deea;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.985);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  z-index: 6;
}

.expand-overlay__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.expand-overlay__header h4 {
  margin: 6px 0 10px;
  font-size: 16px;
}

.expand-overlay__modes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.expand-overlay__row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.expand-overlay__node {
  display: grid;
  gap: 4px;
}

.saved-view-table-wrap,
.entity-wallet-list,
.rule-scroll {
  grid-column: 1 / -1;
  max-height: 320px;
  overflow: auto;
  border: 1px solid #d9dfeb;
  border-radius: 10px;
  background: #ffffff;
}

.saved-view-table-wrap.is-wide,
.entity-wallet-table-wrap {
  max-height: 420px;
}

.graph-stage.has-edge-focus .graph-node,
.graph-stage.has-edge-focus .graph-guide-label,
.graph-stage.has-edge-focus .graph-gridlines,
.graph-stage.has-edge-focus .graph-column-guides,
.graph-stage.has-edge-focus .graph-row-guides,
.graph-stage.has-edge-focus .graph-edge {
  opacity: 0.16;
  transition: opacity 120ms ease;
}

.graph-stage.has-edge-focus .graph-edge.is-hover-active,
.graph-stage.has-edge-focus .graph-node.is-hover-incident {
  opacity: 1;
}

.saved-view-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.saved-view-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f6f8fc;
  color: #5e6c86;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #d9dfeb;
  padding: 10px 12px;
}

.saved-view-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f7;
  vertical-align: top;
}

.saved-view-table tbody tr:last-child td {
  border-bottom: none;
}

.saved-view-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  color: #172132;
  cursor: pointer;
  text-align: left;
}

.saved-view-open strong {
  font-size: 13px;
}

.saved-view-table tbody tr.is-active td {
  background: #f7faff;
}

.saved-view-open span,
.saved-view-trace {
  display: block;
  margin-top: 4px;
  color: #65738b;
}

.saved-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.saved-view-action,
.saved-view-delete-text {
  border: 1px solid #d9dfeb;
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
}

.saved-view-action {
  color: #344256;
}

.saved-view-action:hover {
  border-color: #b9c5d9;
  background: #f8fbff;
}

.saved-view-delete-text {
  color: #b42318;
  border-color: #efc3bf;
}

.saved-view-delete-text:hover {
  color: #8f1f16;
  border-color: #d49aa5;
  background: #fff5f5;
}

.saved-view-edit-row td {
  background: #f8fbff;
}

.saved-view-edit-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.saved-view-edit-grid label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #4d5b71;
}

.saved-view-edit-grid input {
  width: 100%;
}

.saved-view-edit-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.saved-view-delete {
  border: 1px solid #d9dfeb;
  border-radius: 8px;
  background: #ffffff;
  width: 34px;
  height: 34px;
  cursor: pointer;
}

.saved-view-delete:hover {
  border-color: #d49aa5;
  color: #8b2431;
}

.saved-view-tag {
  display: inline-flex;
  align-items: center;
  margin: 0 6px 6px 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f3f6fb;
  border: 1px solid #dde4ef;
  color: #4c5871;
  font-size: 11px;
  white-space: nowrap;
}

.saved-view-tag.is-empty {
  color: #98a3b8;
}

.saved-view-table td code {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.worker-job-table-wrap {
  max-height: 280px;
}

.worker-job-table .saved-view-open {
  width: auto;
}

.worker-job-table .saved-view-open strong {
  font-size: 12px;
}

.worker-job-result {
  min-width: 200px;
  color: #5e6c86;
}

.worker-job-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.worker-job-action {
  border: 1px solid #d9dfeb;
  border-radius: 8px;
  background: #ffffff;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.worker-job-action:hover {
  border-color: #8fb2ff;
  color: #2148a5;
}

.entity-wallet-list {
  display: grid;
  gap: 0;
}

.entity-wallet-row {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f7;
}

.entity-wallet-row:last-child {
  border-bottom: none;
}

.comment-chip {
  color: #647187;
}

.graph-comment-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.graph-comment {
  position: absolute;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 156px;
  min-height: 92px;
  border: 1px solid rgba(194, 201, 210, 0.95);
  border-radius: 8px;
  background: rgba(251, 252, 253, 0.94);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  pointer-events: auto;
  overflow: hidden;
}

.graph-comment.is-selected {
  border-color: rgba(157, 166, 178, 1);
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.14);
}

.graph-comment__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px 3px;
  background: rgba(255, 255, 255, 0.58);
  border-bottom: 1px solid rgba(220, 226, 233, 0.92);
  cursor: grab;
  user-select: none;
}

.graph-comment__toolbar strong {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7b8594;
  text-transform: uppercase;
}

.graph-comment__title {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: #7b8594;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.graph-comment__title:focus {
  outline: none;
  color: #5b6574;
}

.graph-comment__title::placeholder {
  color: #9aa4b2;
}

.graph-comment__actions {
  display: inline-flex;
  gap: 6px;
}

.graph-comment__icon {
  border: none;
  background: transparent;
  width: 18px;
  height: 18px;
  padding: 0;
  cursor: pointer;
  color: #7e8796;
  border-radius: 4px;
}

.graph-comment__icon:hover {
  background: rgba(214, 219, 226, 0.48);
  color: #56606f;
}

.graph-comment__body {
  width: 100%;
  height: 100%;
  border: none;
  resize: none;
  padding: 7px 9px 10px;
  background: transparent;
  color: #2b2f38;
  font-size: 12px;
  line-height: 1.38;
}

.graph-comment__body:focus {
  outline: none;
}

.graph-comment__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(151, 159, 170, 0.68) 47% 54%, transparent 55% 100%),
    linear-gradient(135deg, transparent 0 64%, rgba(151, 159, 170, 0.68) 65% 72%, transparent 73% 100%);
}

.studio-error {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: 480px;
  padding: 10px 12px;
  border: 1px solid #edc5ca;
  border-radius: 8px;
  background: rgba(255, 248, 248, 0.98);
  color: #8b2431;
  font-size: 13px;
}

.graph-stage.has-timeline ~ .detail-card,
.graph-stage.has-timeline ~ .studio-error {
  bottom: 132px;
}

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 48;
}

.studio-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.studio-modal {
  width: min(880px, calc(100vw - 48px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  padding: 14px;
  border: 1px solid #d9dfeb;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.18);
}

.studio-modal__grid textarea {
  min-height: 220px;
  resize: vertical;
}

code {
  background: #eff3fa;
  padding: 1px 5px;
  border-radius: 5px;
}

@media print {
  .studio-header,
  .selection-panel,
  .detail-card,
  .studio-error {
    display: none !important;
  }

  .studio-main {
    padding: 0;
  }

  .graph-stage,
  .graph-svg {
    height: 100vh;
    min-height: 100vh;
    border: 0;
    box-shadow: none;
  }
}

@media (max-width: 1180px) {
  .graph-stage,
  .graph-svg {
    min-height: 70vh;
    height: 70vh;
  }

  .selection-panel,
  .detail-card {
    width: calc(100% - 28px);
  }

  .timeline-strip__header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .timeline-strip__actions {
    justify-content: flex-start;
  }

  .timeline-strip__meta {
    width: 100%;
    white-space: normal;
  }

  .timeline-bars {
    overflow-x: auto;
  }
}