/* JWT decoder */
.container--jwt { max-width: 1040px; }
.jwt-unverified { display: grid; gap: .35rem; margin: 1rem 0 1.25rem; padding: 1rem 1.15rem; border: 2px solid #d97706; border-radius: 14px; background: #fff7ed; color: #7c2d12; }
.jwt-unverified strong { font-size: 1.12rem; }
.jwt-app { margin: 1.25rem 0 2rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--border-color, #d8e2df); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgb(15 75 69 / 7%); }
.jwt-input-heading, .jwt-result-card > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.jwt-input-heading h2, .jwt-result-card h2, .jwt-summary h2 { margin-top: 0; }
.jwt-input { box-sizing: border-box; width: 100%; min-height: 11rem; padding: .9rem; resize: vertical; border: 1px solid #9eb7b2; border-radius: 10px; background: #fbfdfc; color: #153b37; font: .88rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.jwt-input:focus { outline: 3px solid rgb(20 107 99 / 24%); border-color: #146b63; }
.jwt-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .8rem; }
.jwt-status { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 10px; background: #eef4f3; overflow-wrap: anywhere; }
.jwt-status[data-state="success"] { background: #ecfdf5; color: #065f46; }
.jwt-status[data-state="warning"] { background: #fff7ed; color: #9a3412; }
.jwt-status[data-state="error"] { background: #fef2f2; color: #991b1b; }
.jwt-results { display: grid; gap: 1rem; margin-top: 1rem; }
.jwt-summary, .jwt-result-card, .jwt-raw { min-width: 0; padding: 1rem; border: 1px solid #d8e2df; border-radius: 12px; background: #fbfdfc; }
.jwt-summary p { margin-bottom: 0; font-weight: 700; overflow-wrap: anywhere; }
.jwt-result-card pre, .jwt-raw pre { max-width: 100%; max-height: 24rem; margin: .75rem 0 0; padding: .85rem; overflow: auto; border-radius: 8px; background: #112925; color: #e8fffa; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font: .86rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.jwt-security { border-color: #e5a449; background: #fffaf3; }
.jwt-claims { display: grid; gap: .75rem; margin-bottom: 0; }
.jwt-claims > div { display: grid; grid-template-columns: minmax(3.5rem, .25fr) minmax(0, 1fr); gap: .75rem; padding: .7rem; border-radius: 8px; background: #eef6f4; }
.jwt-claims dt { font: 700 .9rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.jwt-claims dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.jwt-raw summary { cursor: pointer; font-weight: 700; }
.jwt-article code { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .jwt-input-heading, .jwt-result-card > div { align-items: stretch; flex-direction: column; }
  .jwt-result-card .button { width: 100%; }
  .jwt-claims > div { grid-template-columns: 1fr; gap: .25rem; }
}