.tmm-llv-app {
  --tmm-llv-text: #1c2433;
  --tmm-llv-muted: #5f6b7a;
  --tmm-llv-border: #d9e0ea;
  --tmm-llv-panel: #ffffff;
  --tmm-llv-soft: #f7f9fc;
  --tmm-llv-head: #1768d1;
  --tmm-llv-head-soft: #e8f1ff;
  --tmm-llv-tail: #8a5a00;
  --tmm-llv-tail-soft: #fff4d6;
  --tmm-llv-insert: #138a46;
  --tmm-llv-insert-soft: #e8f7ee;
  --tmm-llv-find: #6f42c1;
  --tmm-llv-find-soft: #f1eaff;
  --tmm-llv-error: #c52727;
  --tmm-llv-error-soft: #ffe8e8;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  color: var(--tmm-llv-text);
  font-family: inherit;
}

.tmm-llv-app *,
.tmm-llv-app *::before,
.tmm-llv-app *::after {
  box-sizing: inherit;
}

.tmm-llv-app h3,
.tmm-llv-app p {
  margin: 0;
}

.tmm-llv-card {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 18px 0;
  padding: clamp(14px, 3vw, 22px);
  background: var(--tmm-llv-panel);
  border: 1px solid var(--tmm-llv-border);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(28, 36, 51, 0.07);
}

.tmm-llv-topline {
  display: grid;
  gap: 4px;
}

.tmm-llv-topline h3 {
  color: var(--tmm-llv-text);
  font-size: 1.15rem;
  line-height: 1.2;
}

.tmm-llv-topline p,
.tmm-llv-legend {
  color: var(--tmm-llv-muted);
  font-size: 0.92rem;
}

.tmm-llv-stage {
  width: 100%;
  min-height: 168px;
  padding: 14px;
  overflow-x: auto;
  background:
    linear-gradient(90deg, rgba(23, 104, 209, 0.06), transparent 28%),
    #fbfcff;
  border: 1px solid var(--tmm-llv-border);
  border-radius: 9px;
}

.tmm-llv-list {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min-content;
  min-height: 138px;
}

.tmm-llv-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  min-height: 58px;
  color: var(--tmm-llv-muted);
  background: #ffffff;
  border: 1px dashed #b9c7d8;
  border-radius: 9px;
  font-weight: 800;
}

.tmm-llv-node {
  display: grid;
  gap: 8px;
  flex: 0 0 148px;
  min-height: 118px;
  padding: 10px;
  color: var(--tmm-llv-text);
  background: #ffffff;
  border: 1px solid #cbd6e4;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(28, 36, 51, 0.08);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.tmm-llv-node--insert {
  border-color: var(--tmm-llv-insert);
  background: var(--tmm-llv-insert-soft);
  box-shadow: 0 0 0 4px rgba(19, 138, 70, 0.14);
}

.tmm-llv-node--find {
  border-color: var(--tmm-llv-find);
  background: var(--tmm-llv-find-soft);
  box-shadow: 0 0 0 4px rgba(111, 66, 193, 0.13);
}

.tmm-llv-node-meta,
.tmm-llv-node-badges {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tmm-llv-node-meta {
  justify-content: space-between;
}

.tmm-llv-node-label,
.tmm-llv-node-next,
.tmm-llv-status strong {
  font-family: Consolas, Monaco, "Liberation Mono", monospace;
}

.tmm-llv-node-label,
.tmm-llv-node-next {
  color: var(--tmm-llv-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.tmm-llv-node-value {
  display: grid;
  place-items: center;
  min-height: 32px;
  font-family: Consolas, Monaco, "Liberation Mono", monospace;
  font-size: 0.95rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.tmm-llv-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.tmm-llv-badge--head {
  color: var(--tmm-llv-head);
  background: var(--tmm-llv-head-soft);
  border: 1px solid #b8d0f2;
}

.tmm-llv-badge--tail {
  color: var(--tmm-llv-tail);
  background: var(--tmm-llv-tail-soft);
  border: 1px solid #f3d487;
}

.tmm-llv-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  color: var(--tmm-llv-head);
  font-family: Consolas, Monaco, "Liberation Mono", monospace;
  font-weight: 800;
}

.tmm-llv-null {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 72px;
  min-height: 36px;
  color: var(--tmm-llv-muted);
  background: #ffffff;
  border: 1px dashed #b9c7d8;
  border-radius: 999px;
  font-family: Consolas, Monaco, "Liberation Mono", monospace;
  font-weight: 800;
}

.tmm-llv-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}

.tmm-llv-head-text {
  color: var(--tmm-llv-head);
}

.tmm-llv-tail-text {
  color: var(--tmm-llv-tail);
}

.tmm-llv-controls,
.tmm-llv-status {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}

.tmm-llv-value-field {
  display: grid;
  gap: 5px;
  min-width: min(100%, 190px);
  color: var(--tmm-llv-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.tmm-llv-app input[type="text"] {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--tmm-llv-text);
  background: #ffffff;
  border: 1px solid #cbd6e4;
  border-radius: 7px;
  font: inherit;
}

.tmm-llv-app button,
.tmm-llv-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  color: #ffffff;
  background: var(--tmm-llv-head);
  border: 1px solid var(--tmm-llv-head);
  border-radius: 7px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.tmm-llv-button--secondary {
  color: var(--tmm-llv-head);
  background: var(--tmm-llv-head-soft);
  border-color: #b8d0f2;
}

.tmm-llv-button--muted,
.tmm-llv-button--copy {
  color: #2d3646;
  background: #eef2f7;
  border-color: #cbd6e4;
}

.tmm-llv-app button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.tmm-llv-app button:focus-visible,
.tmm-llv-app input:focus-visible,
.tmm-llv-app summary:focus-visible {
  outline: 3px solid rgba(23, 104, 209, 0.28);
  outline-offset: 2px;
}

.tmm-llv-status {
  padding: 10px;
  background: #fbfcff;
  border: 1px solid var(--tmm-llv-border);
  border-radius: 8px;
}

.tmm-llv-status span {
  color: var(--tmm-llv-muted);
}

.tmm-llv-status strong {
  color: var(--tmm-llv-text);
}

.tmm-llv-status strong[data-state="empty"] {
  color: var(--tmm-llv-tail);
}

.tmm-llv-status strong[data-state="ready"] {
  color: var(--tmm-llv-insert);
}

.tmm-llv-status strong[data-state="full"] {
  color: var(--tmm-llv-error);
}

.tmm-llv-message {
  min-height: 42px;
  padding: 10px 12px;
  color: #21466e;
  background: #edf5ff;
  border: 1px solid #c4daf6;
  border-radius: 8px;
  font-weight: 700;
}

.tmm-llv-message[data-tone="error"] {
  color: var(--tmm-llv-error);
  background: var(--tmm-llv-error-soft);
  border-color: #ffc4c4;
}

.tmm-llv-code {
  border: 1px solid var(--tmm-llv-border);
  border-radius: 8px;
  background: transparent;
}

.tmm-llv-code summary {
  padding: 11px 12px;
  color: var(--tmm-llv-text);
  font-weight: 800;
  cursor: pointer;
}

.tmm-llv-code .tmm-llv-button--copy {
  margin: 0 12px 10px;
}

.tmm-llv-noscript {
  padding: 10px 12px;
  color: var(--tmm-llv-error);
  background: var(--tmm-llv-error-soft);
  border: 1px solid #ffc4c4;
  border-radius: 8px;
}

@media (max-width: 700px) {
  .tmm-llv-card {
    padding: 12px;
  }

  .tmm-llv-stage {
    padding: 10px;
  }

  .tmm-llv-node {
    flex-basis: 132px;
  }

  .tmm-llv-controls,
  .tmm-llv-status {
    align-items: stretch;
  }

  .tmm-llv-controls > * {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tmm-llv-app *,
  .tmm-llv-app *::before,
  .tmm-llv-app *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}