/* ============================================================
   JJ Pattern Studio v1.8.0 — Addon: Diagram + Explain
   Dark theme aligned with "Technical Noir" design system
   ============================================================ */

/* ── Diagram View ───────────────────────────────────────────── */
.ps-diagram-wrap {
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  background: var(--ps-bg-2, #161b22);
  border-radius: 10px;
  padding: 14px;
}

.ps-diagram-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.ps-diagram-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  background: var(--ps-bg, #0d1117);
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  border-radius: 8px;
  min-height: 52px;
}

.ps-diagram-arrow {
  color: var(--ps-text-3, #6e7681);
  font-size: 14px;
  font-weight: 300;
  flex-shrink: 0;
}

/* 다이어그램 토큰 버튼 */
.ps-dtok {
  border: 1px solid var(--ps-teal-border, rgba(45,212,191,0.35));
  background: var(--ps-teal-dim, rgba(45,212,191,0.1));
  color: var(--ps-teal, #2dd4bf);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--ps-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1.5;
}

.ps-dtok:hover {
  background: rgba(45,212,191,0.18);
  border-color: var(--ps-teal, #2dd4bf);
  color: var(--ps-teal, #2dd4bf) !important;
  box-shadow: 0 0 0 2px rgba(45,212,191,0.15);
}

.ps-dtok.is-sel {
  background: rgba(45,212,191,0.22);
  border-color: var(--ps-teal, #2dd4bf);
  color: var(--ps-teal, #2dd4bf) !important;
  box-shadow: 0 0 0 2px rgba(45,212,191,0.2),
              0 0 12px rgba(45,212,191,0.15);
}

/* 다이어그램 상세 패널 */
.ps-diagram-detail {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--ps-surface, #21262d);
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  border-radius: 8px;
  min-height: 60px;
  color: var(--ps-text-2, #8b949e);
  font-size: 13px;
  line-height: 1.6;
}

.ps-diagram-detail-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ps-text, #e6edf3);
  margin-bottom: 6px;
}

/* ── Explain View ───────────────────────────────────────────── */
.ps-explain-wrap {
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  background: var(--ps-bg-2, #161b22);
  border-radius: 10px;
  padding: 14px;
}

.ps-explain-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ps-explain-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ps-text-3, #6e7681);
}

/* 섹션 래퍼 */
.ps-explain-sect {
  background: var(--ps-bg, #0d1117);
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}

.ps-explain-title {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ps-text-3, #6e7681);
  font-family: var(--ps-font-mono, monospace);
  margin-bottom: 10px;
}

/* 토큰 카드 그리드 */
.ps-explain-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.ps-explain-item {
  text-align: left;
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  background: var(--ps-surface, #21262d);
  border-radius: 7px;
  padding: 9px 11px;
  cursor: pointer;
  transition: all 0.12s ease;
  color: var(--ps-text, #e6edf3) !important;
}

.ps-explain-item:hover {
  border-color: var(--ps-teal-border, rgba(45,212,191,0.35));
  background: var(--ps-surface-2, #2d333b);
  color: var(--ps-text, #e6edf3) !important;
}

.ps-explain-item.is-active {
  border-color: var(--ps-teal-border, rgba(45,212,191,0.35));
  background: var(--ps-teal-dim, rgba(45,212,191,0.1));
  box-shadow: 0 0 0 1px var(--ps-teal-border, rgba(45,212,191,0.35));
  color: var(--ps-text, #e6edf3) !important;
}

/* 토큰 raw 코드 배지 */
.ps-explain-raw {
  font-family: var(--ps-font-mono, monospace);
  font-weight: 700;
  font-size: 12px;
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--ps-teal-dim, rgba(45,212,191,0.12));
  border: 1px solid var(--ps-teal-border, rgba(45,212,191,0.3));
  color: var(--ps-teal, #2dd4bf) !important;
  margin-right: 6px;
  margin-bottom: 4px;
}

.ps-explain-meta {
  font-weight: 700;
  font-size: 12px;
  color: var(--ps-text, #e6edf3);
  display: block;
  margin-top: 4px;
}

.ps-explain-item .ps-muted {
  color: var(--ps-text-2, #8b949e) !important;
  font-size: 11px;
}

/* 예시 입력 */
.ps-explain-example {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.ps-explain-example-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ps-text-3, #6e7681) !important;
}

.ps-explain-example-code {
  font-family: var(--ps-font-mono, monospace);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--ps-surface-2, #2d333b);
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  color: var(--ps-text, #e6edf3) !important;
  cursor: pointer;
  user-select: all;
  transition: all 0.12s ease;
}

.ps-explain-example-code:hover {
  background: var(--ps-teal-dim, rgba(45,212,191,0.1));
  border-color: var(--ps-teal-border, rgba(45,212,191,0.35));
  color: var(--ps-teal, #2dd4bf) !important;
}

/* 콜아웃 박스 */
.ps-explain-callout {
  border: 1px solid var(--ps-teal-border, rgba(45,212,191,0.3));
  background: var(--ps-teal-dim, rgba(45,212,191,0.08));
  border-radius: 7px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ps-text-2, #8b949e);
  line-height: 1.6;
}

.ps-explain-callout div { margin: 2px 0; }

/* 행 분석 테이블 */
.ps-explain-table-wrap { overflow: auto; }

.ps-explain-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--ps-font-mono, monospace);
}

.ps-explain-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  background: var(--ps-surface, #21262d);
  color: var(--ps-text-2, #8b949e);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.ps-explain-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(48,54,61,0.5);
  vertical-align: middle;
  color: var(--ps-text, #e6edf3);
}

.ps-explain-table tr:last-child td { border-bottom: 0; }

.ps-explain-table tr:hover td {
  background: var(--ps-surface, #21262d);
}

.ps-explain-table code {
  font-family: var(--ps-font-mono, monospace);
  background: var(--ps-surface-2, #2d333b);
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--ps-text, #e6edf3);
}

/* PASS / FAIL / PARTIAL 배지 */
.ps-explain-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 11px;
  font-family: var(--ps-font-mono, monospace);
  border: 1px solid transparent;
}

.ps-explain-pill.is-pass {
  background: var(--ps-green-dim, rgba(63,185,80,0.12));
  border-color: rgba(63,185,80,0.3);
  color: var(--ps-green, #3fb950);
}

.ps-explain-pill.is-partial {
  background: var(--ps-yellow-dim, rgba(210,153,34,0.12));
  border-color: rgba(210,153,34,0.3);
  color: var(--ps-yellow, #d29922);
}

.ps-explain-pill.is-fail {
  background: var(--ps-red-dim, rgba(248,81,73,0.12));
  border-color: rgba(248,81,73,0.3);
  color: var(--ps-red, #f85149);
}

/* 행 선택 하이라이트 */
.ps-explain-rowclick { cursor: pointer; }
.ps-explain-rowclick.is-selected td {
  background: var(--ps-teal-dim, rgba(45,212,191,0.08));
}

/* 행 노트 */
.ps-explain-note-row td {
  padding-top: 0;
  padding-bottom: 10px;
}
.ps-explain-notes { display: flex; flex-direction: column; gap: 4px; }
.ps-explain-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--ps-text-2, #8b949e);
}
.ps-explain-note::before { content: '•'; opacity: 0.6; }

/* 행 상세 패널 */
.ps-rowdetail {
  margin-top: 12px;
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  border-radius: 8px;
  background: var(--ps-surface, #21262d);
  padding: 12px;
}

.ps-rowdetail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ps-rowdetail-title {
  font-weight: 700;
  color: var(--ps-text, #e6edf3);
  font-size: 13px;
}

.ps-rowdetail-toggle { padding: 5px 10px; }

.ps-rowdetail-step {
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  border-radius: 7px;
  padding: 10px 12px;
  background: var(--ps-bg, #0d1117);
  margin-bottom: 8px;
}

.ps-rowdetail-step-title {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--ps-text, #e6edf3);
}

.ps-rowdetail-step-body {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--ps-font-mono, monospace);
  font-size: 12px;
  color: var(--ps-text-2, #8b949e);
  line-height: 1.6;
}

.ps-rowdetail-notes {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-rowdetail-note {
  font-size: 12px;
  color: var(--ps-text-2, #8b949e);
  padding-left: 10px;
  border-left: 2px solid var(--ps-teal-border, rgba(45,212,191,0.4));
}

/* 수정 제안 액션 버튼 */
.ps-rowdetail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ps-rowdetail-action {
  appearance: none;
  border: 1px solid var(--ps-teal-border, rgba(45,212,191,0.3));
  background: var(--ps-teal-dim, rgba(45,212,191,0.08));
  color: var(--ps-teal, #2dd4bf) !important;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1.5;
  font-family: var(--ps-font-sans, sans-serif);
}

.ps-rowdetail-action:hover {
  background: rgba(45,212,191,0.15);
  border-color: var(--ps-teal, #2dd4bf);
  box-shadow: 0 0 0 1px var(--ps-teal-border, rgba(45,212,191,0.35));
}

.ps-rowdetail-action:active { transform: scale(0.97); }

/* 액션 피드백 */
.ps-rowdetail-action-feedback {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  background: var(--ps-surface, #21262d);
  color: var(--ps-text-2, #8b949e);
  display: none;
}

.ps-rowdetail-action-feedback.is-ok {
  display: block;
  background: var(--ps-green-dim, rgba(63,185,80,0.12));
  border-color: rgba(63,185,80,0.3);
  color: var(--ps-green, #3fb950);
}

.ps-rowdetail-action-feedback.is-fail {
  display: block;
  background: var(--ps-red-dim, rgba(248,81,73,0.12));
  border-color: rgba(248,81,73,0.3);
  color: var(--ps-red, #f85149);
}

.ps-rowdetail-action-feedback.is-warn {
  display: block;
  background: var(--ps-blue-dim, rgba(88,166,255,0.12));
  border-color: rgba(88,166,255,0.3);
  color: var(--ps-blue, #58a6ff);
}

/* ── P1 개선 (v1.8.0) ───────────────────────────────────────── */

/* P1-1: 예시 입력 → ↩ 테스트 적용 레이블 */
.ps-explain-example-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ps-teal, #2dd4bf) !important;
  white-space: nowrap;
  opacity: 0.85;
}

.ps-explain-example-code {
  cursor: pointer !important;
  transition: all 0.12s ease;
}

.ps-explain-example-code:hover {
  background: var(--ps-teal-dim, rgba(45,212,191,0.15)) !important;
  border-color: var(--ps-teal, #2dd4bf) !important;
  color: var(--ps-teal, #2dd4bf) !important;
  box-shadow: 0 0 0 1px var(--ps-teal-border, rgba(45,212,191,0.3));
}

/* P1-2: 플래그 칩 hover 커서 + title 표시 개선 */
.ps-explain-top .ps-chip {
  cursor: help !important;
  font-family: var(--ps-font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  transition: all 0.12s ease;
}

.ps-explain-top .ps-chip:hover {
  border-color: var(--ps-teal-border, rgba(45,212,191,0.4));
  background: var(--ps-surface-2, #2d333b);
  color: var(--ps-text, #e6edf3);
}

.ps-explain-top .ps-chip.is-active {
  background: var(--ps-teal-dim, rgba(45,212,191,0.15));
  border-color: var(--ps-teal, #2dd4bf);
  color: var(--ps-teal, #2dd4bf);
  box-shadow: 0 0 0 1px var(--ps-teal-border, rgba(45,212,191,0.3));
}

/* P1-3: 행 분석 값 컬럼 말줄임 */
.ps-explain-table td code {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.ps-explain-table td:nth-child(2) {
  max-width: 220px;
}

/* ── P2 개선 (v1.8.0) ───────────────────────────────────────── */

/* P2-1: 전체 예시 배너 — 설명 탭 */
.ps-explain-full-example {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--ps-surface, #21262d);
  border: 1px solid var(--ps-teal-border, rgba(45,212,191,0.35));
  border-radius: 7px;
}

.ps-explain-full-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ps-teal, #2dd4bf);
  white-space: nowrap;
  flex-shrink: 0;
}

.ps-explain-full-code {
  font-family: var(--ps-font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-text, #e6edf3);
  background: var(--ps-bg, #0d1117);
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  padding: 3px 10px;
  border-radius: 5px;
  transition: all 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.ps-explain-full-code:hover {
  background: var(--ps-teal-dim, rgba(45,212,191,0.1));
  border-color: var(--ps-teal, #2dd4bf);
  color: var(--ps-teal, #2dd4bf);
  box-shadow: 0 0 0 1px var(--ps-teal-border, rgba(45,212,191,0.3));
}

/* P2-1: 전체 예시 바 — 다이어그램 탭 */
.ps-diagram-example-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin-bottom: 10px;
  background: var(--ps-surface, #21262d);
  border: 1px solid var(--ps-teal-border, rgba(45,212,191,0.35));
  border-radius: 7px;
}

.ps-diagram-example-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ps-teal, #2dd4bf);
  white-space: nowrap;
  flex-shrink: 0;
}

.ps-diagram-example-code {
  font-family: var(--ps-font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-text, #e6edf3);
  background: var(--ps-bg, #0d1117);
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  padding: 3px 10px;
  border-radius: 5px;
  transition: all 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.ps-diagram-example-code:hover {
  background: var(--ps-teal-dim, rgba(45,212,191,0.1));
  border-color: var(--ps-teal, #2dd4bf);
  color: var(--ps-teal, #2dd4bf);
  box-shadow: 0 0 0 1px var(--ps-teal-border, rgba(45,212,191,0.3));
}

/* P2-2: 그룹 박싱 */
.ps-diagram-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--ps-teal-border, rgba(45,212,191,0.4));
  border-radius: 8px;
  padding: 6px 8px 7px;
  background: rgba(45,212,191,0.05);
  position: relative;
  gap: 5px;
}

.ps-diagram-group-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ps-teal, #2dd4bf);
  opacity: 0.8;
  line-height: 1;
  font-family: var(--ps-font-mono, monospace);
}

.ps-diagram-group-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

/* 그룹 열기 토큰은 숨김 — 박스 자체가 시각적 표현 */
.ps-dtok--group-open {
  display: none;
}

/* 중첩 그룹은 살짝 다른 색상으로 구분 */
.ps-diagram-group .ps-diagram-group {
  background: rgba(88,166,255,0.05);
  border-color: rgba(88,166,255,0.35);
}

.ps-diagram-group .ps-diagram-group .ps-diagram-group-label {
  color: var(--ps-blue, #58a6ff);
}

/* 3단계 중첩 */
.ps-diagram-group .ps-diagram-group .ps-diagram-group {
  background: rgba(210,153,34,0.05);
  border-color: rgba(210,153,34,0.35);
}

.ps-diagram-group .ps-diagram-group .ps-diagram-group .ps-diagram-group-label {
  color: var(--ps-yellow, #d29922);
}

/* ── 예시 개선 (v1.8.0) ─────────────────────────────────────── */

/* 토큰 카드 예시: 읽기전용, 클릭 없음 */
.ps-explain-example-code--readonly {
  cursor: default !important;
  opacity: 0.75;
  font-size: 11px;
  background: var(--ps-bg, #0d1117);
  border-color: var(--ps-border-soft, rgba(48,54,61,0.55));
  color: var(--ps-text-2, #8b949e) !important;
}

.ps-explain-example-code--readonly:hover {
  background: var(--ps-bg, #0d1117) !important;
  border-color: var(--ps-border-soft, rgba(48,54,61,0.55)) !important;
  color: var(--ps-text-2, #8b949e) !important;
  box-shadow: none !important;
}

/* 토큰 카드 예시 레이블: 읽기전용 */
.ps-explain-example .ps-explain-example-label {
  color: var(--ps-text-3, #6e7681) !important;
  font-weight: 600;
  opacity: 0.8;
}

/* 카드 내부 레이아웃 */
.ps-explain-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ps-explain-card-desc {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ps-text-2, #8b949e);
}

/* 배너 강조 개선 */
.ps-explain-full-example,
.ps-diagram-example-bar {
  border-left: 3px solid var(--ps-teal, #2dd4bf) !important;
  padding: 8px 12px !important;
}

.ps-explain-full-label,
.ps-diagram-example-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

.ps-explain-full-code,
.ps-diagram-example-code {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ps-teal, #2dd4bf) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.ps-explain-full-code:hover,
.ps-diagram-example-code:hover {
  text-decoration: underline;
  box-shadow: none !important;
}

/* ── P2-2: 다이어그램 그룹 박싱 개선 ───────────────────────── */

/* 그룹 + quant 묶음 wrapper */
.ps-diagram-group-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* 그룹 quant 배지 (박스 아래) */
.ps-diagram-group-quant {
  font-family: var(--ps-font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--ps-teal, #2dd4bf);
  background: var(--ps-teal-dim, rgba(45,212,191,0.1));
  border: 1px solid var(--ps-teal-border, rgba(45,212,191,0.35));
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.4;
}

/* tok 자체 quant 배지 */
.ps-dtok-quant {
  font-family: var(--ps-font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--ps-text-2, #8b949e);
  background: var(--ps-surface, #21262d);
  border: 1px solid var(--ps-border, rgba(48,54,61,0.9));
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
  margin-left: -2px;
}

/* alt 다중 브랜치 */
.ps-diagram-branches {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.ps-diagram-branch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.ps-diagram-alt-sep {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ps-text-3, #6e7681);
  padding: 0 4px;
  font-family: var(--ps-font-mono, monospace);
}

/* anchor 토큰 전용 스타일 */
.ps-dtok--anchor {
  background: transparent !important;
  border-color: var(--ps-border, rgba(48,54,61,0.9)) !important;
  color: var(--ps-text-3, #6e7681) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  padding: 3px 6px !important;
  box-shadow: none !important;
}

.ps-dtok--anchor:hover {
  border-color: var(--ps-teal-border, rgba(45,212,191,0.35)) !important;
  color: var(--ps-teal, #2dd4bf) !important;
  box-shadow: none !important;
}

/* tok + quant wrap */
.ps-dtok-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}