/* JWT Anahtarı — araca özel ayrıntılar; temel bileşenler shared/toolbox.css'te */

.jwt-key .tb-out { min-height: 92px; }
.jwt-actions { margin-top: 12px; }
.jwt-meta { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--tb-border); }
.jwt-key .tb-note { margin-top: 14px; }

.jwt-snip-actions { margin-top: 10px; justify-content: space-between; }
.jwt-snip-actions .tb-hint { flex: 1 1 240px; text-align: right; }
@media (max-width: 560px) { .jwt-snip-actions .tb-hint { text-align: left; } }

.jwt-ref {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}
@media (max-width: 900px) { .jwt-ref { grid-template-columns: minmax(0, 1fr); } }

.jwt-ref .tb-table td:first-child code { font-weight: 600; }
.jwt-ref .tb-prose { padding: 20px; }

/* ============================ Token çözücü ============================ */

/* Parça renkleri: başlık, yük, imza (iki temada ayrı ayarlı) */
:root {
  --jwt-h: #c2352b;
  --jwt-p: #2546b5;
  --jwt-s: #0f7a6b;
  --jwt-num: #925500;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --jwt-h: #ff8a7b; --jwt-p: #8aa6ff; --jwt-s: #4fd1b8; --jwt-num: #f0b64e; }
}
:root[data-theme="dark"] { --jwt-h: #ff8a7b; --jwt-p: #8aa6ff; --jwt-s: #4fd1b8; --jwt-num: #f0b64e; }

.jwt-token-input { min-height: 120px; font-size: 13.5px; word-break: break-all; }
.jwt-parts { margin-top: 12px; }
.jwt-colored { font-size: 13.5px; line-height: 1.55; min-height: 0; }
.jwt-h { color: var(--jwt-h); }
.jwt-p { color: var(--jwt-p); }
.jwt-s { color: var(--jwt-s); }
.jwt-sep { color: var(--tb-muted); font-weight: 700; }

.jwt-legend { display: flex; gap: 14px; margin-top: 8px; font: 12px/1.3 var(--tb-mono); color: var(--tb-muted); }
.jwt-legend span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: -1px;
}
.jwt-legend__h::before { background: var(--jwt-h); }
.jwt-legend__p::before { background: var(--jwt-p); }
.jwt-legend__s::before { background: var(--jwt-s); }

.jwt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 6px; vertical-align: 1px; }
.jwt-dot--h { background: var(--jwt-h); }
.jwt-dot--p { background: var(--jwt-p); }

#d-summary { margin-bottom: 14px; }
#d-summary:empty { display: none; }

.jwt-claims td { white-space: normal; }
.jwt-claims td:first-child { width: 38%; }
.jwt-claim { display: block; font-weight: 600; color: var(--tb-text); }
.jwt-claim-key { display: block; font: 12px/1.4 var(--tb-mono); color: var(--tb-muted); overflow-wrap: anywhere; }
.jwt-claim-key--only { color: var(--tb-text); font-size: 13px; }
.jwt-v { font-family: var(--tb-mono); font-size: 13px; overflow-wrap: anywhere; word-break: break-word; }
.jwt-v small { display: block; color: var(--tb-muted); font-size: 11.5px; }
.jwt-v--ok { color: var(--tb-ok); }
.jwt-v--bad { color: var(--tb-danger); }
.jwt-empty { color: var(--tb-muted); text-align: center; font-size: 13.5px; padding-block: 18px !important; }

.jwt-raw { margin-top: 12px; }
.jwt-raw summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--tb-text-soft); }
.jwt-raw summary:focus-visible { outline: none; box-shadow: var(--tb-focus); border-radius: 4px; }
.jwt-raw .tb-code { margin-top: 10px; }
.jwt-json { white-space: pre-wrap; overflow-wrap: anywhere; }

.j-k { color: var(--jwt-p); }
.j-s { color: var(--jwt-s); }
.j-n, .j-l { color: var(--jwt-num); }

#d-sig-note { margin-top: 2px; }