/* JWT Decoder: colour-coded token parts (header / payload / signature). */
.jwt-token { word-break: break-all; min-height: 0; }
.jwt-h { color: #c42e55; }
.jwt-p { color: #6b3fd6; }
.jwt-s { color: #08799a; }
:root[data-theme='dark'] .jwt-h { color: #ff8aa3; }
:root[data-theme='dark'] .jwt-p { color: #b9a2ff; }
:root[data-theme='dark'] .jwt-s { color: #6fd3f0; }
.jwt-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.82rem; font-weight: 600; }
.jwt-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: currentColor; vertical-align: -1px; }
#jwt-claims td { vertical-align: top; }
#jwt-claims td:first-child { width: 42%; }
#jwt-claims td { overflow-wrap: anywhere; }
.jwt-meaning { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }

/* .tool-ui .mono loses to the shared input reset selector, so restate it with an ID. */
#tool input.mono { font-family: var(--mono); font-size: 0.95rem; }
#jwt-result .grid-2 > .field { align-content: start; }