/* JWT-Decoder: farbige Token-Darstellung, Legende, Claims-Tabelle. */
[data-tl="jwt"] [hidden] { display: none !important; }
.tl-jwt-input { min-height: 120px; word-break: break-all; }
.tl-jwt-findings { gap: 8px; }
.tl-jwt-findings:empty { display: none; }

.tl-jwt-view { display: grid; gap: 8px; }
.tl-jwt-token { max-height: 220px; overflow: auto; padding: 12px 14px; font: 13px/1.6 var(--font-mono); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; word-break: break-all; overflow-wrap: anywhere; }
.tl-jwt-seg--h { color: #db2777; }
.tl-jwt-seg--p { color: #7c3aed; }
.tl-jwt-seg--s { color: #0284c7; }
.tl-jwt-seg--k { color: var(--ink-3); }
.tl-jwt-dot { color: var(--ink); font-weight: 700; }
[data-theme="dark"] .tl-jwt-seg--h { color: #f472b6; }
[data-theme="dark"] .tl-jwt-seg--p { color: #c4b5fd; }
[data-theme="dark"] .tl-jwt-seg--s { color: #7dd3fc; }

.tl-jwt-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-3); }
.tl-jwt-key { display: inline-flex; align-items: center; gap: 7px; }
.tl-jwt-key::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.tl-jwt-key--h::before { background: #db2777; }
.tl-jwt-key--p::before { background: #7c3aed; }
.tl-jwt-key--s::before { background: #0284c7; }
.tl-jwt-key--k::before { background: var(--ink-3); }
.tl-panel__title .tl-jwt-key::before { width: 10px; height: 10px; }

.tl-jwt-claims th, .tl-jwt-claims td { white-space: normal; vertical-align: top; }
.tl-jwt-claims tbody th { font-size: 13px; font-weight: 600; color: var(--ink); background: transparent; text-transform: none; letter-spacing: 0; min-width: 110px; }
.tl-jwt-claims tbody th code { font: 600 13px var(--font-mono); }
.tl-jwt-claims tbody th small, .tl-jwt-claims__val small { display: block; margin-top: 2px; font: 500 12px/1.4 var(--font-sans); color: var(--ink-3); }
.tl-jwt-claims__val { overflow-wrap: anywhere; word-break: break-word; min-width: 140px; }
.tl-jwt-claims__val .is-ok { color: var(--tl-ok); }
.tl-jwt-claims__val .is-err { color: var(--tl-err); }
.tl-jwt-claims__val .is-warn { color: var(--tl-warn); }
.tl-jwt-claims td.tl-jwt-claims__desc { font: 13px/1.45 var(--font-sans); color: var(--ink-2); min-width: 160px; }
.tl-jwt-lit { color: hsl(var(--tl-hue) 70% 42%); }
[data-theme="dark"] .tl-jwt-lit { color: hsl(var(--tl-hue) 90% 72%); }

@media (max-width: 560px) {
  .tl-jwt-claims thead { display: none; }
  .tl-jwt-claims, .tl-jwt-claims tbody, .tl-jwt-claims tr, .tl-jwt-claims th, .tl-jwt-claims td { display: block; width: 100%; }
  .tl-jwt-claims tr { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
  .tl-jwt-claims tr:last-child { border-bottom: 0; }
  .tl-jwt-claims th, .tl-jwt-claims td { padding: 2px 0; border: 0; min-width: 0; }
  .tl-jwt-claims tbody tr:hover td { background: transparent; }
}