/* jwt-decoder — extracted from inline <style> */
.jwt-input {
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.8125rem;
  line-height: 1.6; word-break: break-all;
}
.jwt-panels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; margin-top: 1.25rem; }
.jwt-panel {
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px); overflow: hidden;
}
.jwt-panel-header {
  padding: 0.5rem 0.75rem; font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
}
.jwt-panel-header.header-color { background: #dc3545; }
.jwt-panel-header.payload-color { background: #0d6efd; }
.jwt-panel-header.sig-color { background: #198754; }
.jwt-panel-body {
  padding: 0.75rem; font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.75rem; line-height: 1.8; max-height: 300px; overflow-y: auto;
}
.jwt-claim {
  padding: 0.3rem 0; border-bottom: 1px solid var(--evvy-border-color);
}
.jwt-claim:last-child { border-bottom: none; }
.jwt-claim-key { color: #0d6efd; font-weight: 700; }
.jwt-claim-val { color: var(--bs-body-color); margin-left: 0.5rem; }
.jwt-claim-label {
  font-family: 'Inter', sans-serif; font-size: 0.625rem; font-weight: 600;
  color: var(--evvy-text-secondary); text-transform: uppercase;
  letter-spacing: 0.03em; margin-left: 0.35rem;
}
.jwt-badge {
  display: inline-block; padding: 0.15rem 0.5rem; font-size: 0.6875rem;
  font-weight: 700; border-radius: 6px;
}
.jwt-badge.valid { background: color-mix(in srgb, #198754 15%, transparent); color: #198754; }
.jwt-badge.expired { background: color-mix(in srgb, #dc3545 15%, transparent); color: #dc3545; }
.jwt-badge.invalid { background: color-mix(in srgb, #ffc107 15%, transparent); color: #b38600; }
.jwt-timeline {
  margin-top: 1.25rem; padding: 1rem;
  border: 1px solid var(--evvy-border-color); border-radius: var(--evvy-radius-lg, 12px);
}
.jwt-timeline-bar {
  height: 8px; background: var(--evvy-border-color); border-radius: 4px;
  position: relative; margin: 1rem 0 0.5rem;
}
.jwt-timeline-marker {
  position: absolute; top: -6px; width: 20px; height: 20px;
  border-radius: 50%; border: 2px solid #fff; transform: translateX(-50%);
  font-size: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.jwt-timeline-label {
  position: absolute; top: 16px; transform: translateX(-50%);
  font-size: 0.625rem; font-weight: 600; color: var(--evvy-text-secondary);
  white-space: nowrap;
}
.jwt-verify-section {
  margin-top: 1rem; padding: 0.875rem;
  border: 1px solid var(--evvy-border-color); border-radius: var(--evvy-radius-lg, 12px);
}
@media (max-width: 767.98px) {
  .jwt-panels { grid-template-columns: 1fr; }
}