.lead { color: var(--text-2); max-width: 66ch; line-height: 1.55; }
[data-token] { min-height: 110px; font-family: var(--mono); font-size: .82rem; margin-top: 4px; }
.field > span { display: flex; justify-content: space-between; align-items: baseline; }
.jd-err { color: var(--bad); font-size: .85rem; font-weight: 600; }

.jd-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0; }
.jd-pane h2 { font-size: .95rem; margin: 0 0 6px; }
.jd-pane pre { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-family: var(--mono); font-size: .82rem; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; cursor: pointer; }

.jd-claims { margin: 8px 0 18px; }
.jd-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; margin-right: 10px; }
.jd-badge.valid { background: var(--ok-bg); color: var(--ok); }
.jd-badge.expired, .jd-badge.not-yet-valid { background: var(--bad-bg); color: var(--bad); }
.jd-badge.no-exp { background: var(--warn-bg); color: var(--warn); }
.jd-alg { font-size: .8rem; color: var(--text-2); }
.jd-detail { margin: 8px 0; font-size: .84rem; color: var(--text-2); }
.jd-table { border-collapse: collapse; font-size: .82rem; }
.jd-table td { border-bottom: 1px solid var(--line); padding: 5px 12px 5px 0; font-variant-numeric: tabular-nums; }

.jd-verify h2 { font-size: .95rem; }
.jd-verify input { max-width: 340px; font-family: var(--mono); font-size: .82rem; }
.jd-vres { margin-top: 8px; font-size: .85rem; font-weight: 600; }
.jd-vres.ok { color: var(--ok); }
.jd-vres.bad { color: var(--bad); }

@media (max-width: 700px) { .jd-panes { grid-template-columns: 1fr; } }