.tn-jwt-page {
  --jwt-paper:#faf6ee; --jwt-surface:#fffcf4; --jwt-wash:#f5efdf; --jwt-ink:#1a1208;
  --jwt-muted:#5a4a30; --jwt-line:#b8a888; --jwt-soft:#ddd4be; --jwt-button:#ede6d4;
  --jwt-hover:#dfd4bb; --jwt-accent:#c44a00;
  width:calc(100% - 10px); max-width:1180px; margin-inline:auto; color:var(--jwt-ink);
  -webkit-text-fill-color:var(--jwt-ink); -webkit-font-smoothing:antialiased;
}
.tn-jwt-page *, .tn-jwt-page *::before, .tn-jwt-page *::after { box-sizing:border-box; }
.tn-jwt-page .tn-jwt-ad { width:min(728px,100%); min-height:90px; margin-inline:auto; background:transparent; }
.tn-jwt-page .tn-jwt-ad--top { margin-top:54px; margin-bottom:18px; }
.tn-jwt-page .tn-jwt-ad--bottom { margin-top:16px; margin-bottom:26px; }
.tn-jwt-page .tn-jwt-ad ins { max-width:100%; }
.tn-jwt-page .tn-jwt-tool {
  display:grid; gap:16px; padding:20px; border:1px solid var(--jwt-line); background:var(--jwt-paper);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.tn-jwt-page .tn-jwt-tool :is(p,h2,h3,dl,dd,dt,ul,li) { margin:0; }
.tn-jwt-page .tn-jwt-tool :is(ul,li) { list-style:none; padding:0; }
.tn-jwt-page .tn-jwt-tool :is(code,pre,kbd,samp) { border:0; border-radius:0; background:transparent; color:inherit; -webkit-text-fill-color:inherit; }
.tn-jwt-page .tn-jwt-tool :is(button,textarea) { border-radius:0; box-shadow:none; }
.tn-jwt-page .tn-jwt-tool :is(button,textarea):focus-visible { outline:2px solid var(--jwt-accent); outline-offset:2px; }
.tn-jwt-page .tn-jwt-tool button {
  display:inline-grid; place-items:center; min-height:40px; padding:9px 13px; border:1px solid var(--jwt-line);
  background:var(--jwt-button); color:var(--jwt-ink); -webkit-text-fill-color:var(--jwt-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; font-weight:800;
  line-height:1; text-align:center; cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.tn-jwt-page .tn-jwt-tool button:not(:disabled):hover { background:var(--jwt-hover); border-color:var(--jwt-ink); }
.tn-jwt-page .tn-jwt-tool button:not(:disabled):active { transform:scale(.96); }
.tn-jwt-page .tn-jwt-tool button:disabled { opacity:.48; cursor:not-allowed; }
.tn-jwt-page .tn-jwt-trust {
  display:grid; grid-template-columns:auto 1fr; gap:2px 15px; align-items:center; padding:13px 16px;
  border:1px solid var(--jwt-line); background:var(--jwt-wash);
}
.tn-jwt-page .tn-jwt-trust-label { grid-row:span 2; align-self:stretch; display:grid; place-items:center; min-width:88px;
  padding:8px 10px; border-right:1px solid var(--jwt-line); color:var(--jwt-muted); -webkit-text-fill-color:var(--jwt-muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; font-weight:800; letter-spacing:.02em; }
.tn-jwt-page .tn-jwt-trust strong { color:var(--jwt-accent); -webkit-text-fill-color:var(--jwt-accent); font-size:16px; line-height:1.3; }
.tn-jwt-page .tn-jwt-trust strong { overflow-wrap:anywhere; }
.tn-jwt-page .tn-jwt-trust p { color:var(--jwt-muted); -webkit-text-fill-color:var(--jwt-muted); font-size:12px; line-height:1.5; }
.tn-jwt-page .tn-jwt-deck { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:14px; align-items:stretch; }
.tn-jwt-page .tn-jwt-source, .tn-jwt-page .tn-jwt-result {
  min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--jwt-line); background:var(--jwt-surface);
}
.tn-jwt-page .tn-jwt-source { grid-template-rows:auto minmax(0,1fr) auto; }
.tn-jwt-page .tn-jwt-result { background:var(--jwt-wash); }
.tn-jwt-page .tn-jwt-details { display:grid; gap:12px; padding:16px; border:1px solid var(--jwt-line); background:var(--jwt-wash); }
.tn-jwt-page .tn-jwt-pane-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--jwt-soft); }
.tn-jwt-page .tn-jwt-pane-head :is(label,h2) { color:var(--jwt-ink); -webkit-text-fill-color:var(--jwt-ink); font-size:15px; font-weight:850; line-height:1.35; text-wrap:balance; }
.tn-jwt-page .tn-jwt-pane-head small { color:var(--jwt-muted); -webkit-text-fill-color:var(--jwt-muted); font-size:11px; line-height:1.4; }
.tn-jwt-page .tn-jwt-index { margin-right:8px; color:var(--jwt-accent); -webkit-text-fill-color:var(--jwt-accent); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; font-weight:800; }
.tn-jwt-page #tn-jwt-input {
  display:block; width:100%; min-height:224px; height:100%; padding:14px 15px; resize:vertical;
  border:1px solid var(--jwt-line); background:var(--jwt-paper); color:var(--jwt-ink); -webkit-text-fill-color:var(--jwt-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.65;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; overflow-x:hidden;
}
.tn-jwt-page #tn-jwt-input::placeholder { color:var(--jwt-muted); -webkit-text-fill-color:var(--jwt-muted); opacity:.5; }
.tn-jwt-page #tn-jwt-input[aria-invalid="true"] { border-color:var(--jwt-accent); }
.tn-jwt-page .tn-jwt-source-foot { display:grid; gap:12px; }
.tn-jwt-page .tn-jwt-segments { display:flex; align-items:center; min-height:38px; padding:9px 11px; border:1px solid var(--jwt-soft);
  color:var(--jwt-muted); -webkit-text-fill-color:var(--jwt-muted); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.tn-jwt-page .tn-jwt-actions { display:flex; gap:8px; flex-wrap:wrap; }
.tn-jwt-page .tn-jwt-local { color:var(--jwt-muted); -webkit-text-fill-color:var(--jwt-muted); font-size:12px; line-height:1.55; text-wrap:pretty; }
.tn-jwt-page .tn-jwt-local strong { color:var(--jwt-ink); -webkit-text-fill-color:var(--jwt-ink); font-weight:750; }
.tn-jwt-page .tn-jwt-status { min-height:38px; display:flex; align-items:center; padding:9px 11px;
  border:1px solid var(--jwt-soft); color:var(--jwt-muted); -webkit-text-fill-color:var(--jwt-muted);
  font-size:12px; line-height:1.5; }
.tn-jwt-page .tn-jwt-status[data-state="error"] { color:var(--jwt-accent); -webkit-text-fill-color:var(--jwt-accent); border-color:var(--jwt-accent); }
.tn-jwt-page .tn-jwt-time { display:grid; gap:11px; padding:14px; border:1px solid var(--jwt-line); background:var(--jwt-surface); }
.tn-jwt-page .tn-jwt-time-top { display:flex; align-items:baseline; justify-content:space-between; gap:5px 12px; flex-wrap:wrap; }
.tn-jwt-page .tn-jwt-time-top h3 { font-size:14px; font-weight:850; color:var(--jwt-ink); -webkit-text-fill-color:var(--jwt-ink); }
.tn-jwt-page .tn-jwt-time-top small { color:var(--jwt-muted); -webkit-text-fill-color:var(--jwt-muted); font-size:11px; font-variant-numeric:tabular-nums; }
.tn-jwt-page .tn-jwt-time-status { display:block; padding:10px 11px; border:1px solid var(--jwt-soft);
  color:var(--jwt-ink); -webkit-text-fill-color:var(--jwt-ink); background:var(--jwt-wash); font-size:13px; font-weight:750; line-height:1.5; }
.tn-jwt-page .tn-jwt-time-status[data-state="warning"] { color:var(--jwt-accent); -webkit-text-fill-color:var(--jwt-accent); }
.tn-jwt-page .tn-jwt-time-list { display:grid; gap:0; }
.tn-jwt-page .tn-jwt-time-list > div { display:grid; grid-template-columns:80px minmax(0,1fr); gap:8px; align-items:start; padding:8px 0; border-top:1px solid var(--jwt-soft); }
.tn-jwt-page .tn-jwt-time-list dt { color:var(--jwt-muted); -webkit-text-fill-color:var(--jwt-muted); font-size:12px; font-weight:750; }
.tn-jwt-page .tn-jwt-time-list dd { min-width:0; color:var(--jwt-ink); -webkit-text-fill-color:var(--jwt-ink); font-size:12px; line-height:1.5;
  font-variant-numeric:tabular-nums; white-space:pre-wrap; overflow-wrap:anywhere; }
.tn-jwt-page .tn-jwt-json-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tn-jwt-page .tn-jwt-json-card { display:grid; grid-template-rows:auto minmax(0,1fr); gap:9px; min-width:0; padding:13px; border:1px solid var(--jwt-line); background:var(--jwt-surface); }
.tn-jwt-page .tn-jwt-json-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.tn-jwt-page .tn-jwt-json-head h3 { font-size:13px; font-weight:850; color:var(--jwt-ink); -webkit-text-fill-color:var(--jwt-ink); }
.tn-jwt-page .tn-jwt-json-head button { min-height:32px; padding:6px 9px; font-size:11px; }
.tn-jwt-page .tn-jwt-json-card pre { min-height:150px; max-height:330px; margin:0; padding:12px!important; border:1px solid var(--jwt-soft)!important;
  background:var(--jwt-paper)!important; color:var(--jwt-ink)!important; -webkit-text-fill-color:var(--jwt-ink)!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.6;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; overflow:auto; }
.tn-jwt-page .tn-jwt-claims { padding-top:10px; border-top:1px solid var(--jwt-soft); color:var(--jwt-muted); -webkit-text-fill-color:var(--jwt-muted);
  font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.tn-jwt-page .tn-jwt-article .tn-info-card :is(p,li,a) { overflow-wrap:anywhere; }
body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-l="dark"],[data-scheme="auto"][data-d="dark"]) .tn-jwt-page,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-jwt-page {
  --jwt-paper:#241d12; --jwt-surface:#322a1a; --jwt-wash:#2c2517; --jwt-ink:#efe6d2;
  --jwt-muted:#c3b492; --jwt-line:#6f6047; --jwt-soft:#574a37; --jwt-button:#3c321f;
  --jwt-hover:#4a3b27; --jwt-accent:#e8823f;
}
body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-l="dark"],[data-scheme="auto"][data-d="dark"]) .tn-jwt-page .tn-jwt-tool button,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-jwt-page .tn-jwt-tool button { color:#f7ead1; -webkit-text-fill-color:#f7ead1; background:#2f2115; border-color:#826744; }
body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-l="dark"],[data-scheme="auto"][data-d="dark"]) .tn-jwt-page .tn-jwt-tool button:not(:disabled):hover,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-jwt-page .tn-jwt-tool button:not(:disabled):hover { background:#3a2a1b; }
@media (prefers-color-scheme:dark) {
  body[data-scheme="auto"] .tn-jwt-page { --jwt-paper:#241d12; --jwt-surface:#322a1a; --jwt-wash:#2c2517; --jwt-ink:#efe6d2; --jwt-muted:#c3b492; --jwt-line:#6f6047; --jwt-soft:#574a37; --jwt-button:#3c321f; --jwt-hover:#4a3b27; --jwt-accent:#e8823f; }
  body[data-scheme="auto"] .tn-jwt-page .tn-jwt-tool button { color:#f7ead1; -webkit-text-fill-color:#f7ead1; background:#2f2115; border-color:#826744; }
  body[data-scheme="auto"] .tn-jwt-page .tn-jwt-tool button:not(:disabled):hover { background:#3a2a1b; }
}
@media (max-width:760px) {
  .tn-jwt-page .tn-jwt-ad--top { margin-top:48px; }
  .tn-jwt-page .tn-jwt-tool { padding:12px; gap:12px; }
  .tn-jwt-page .tn-jwt-deck { grid-template-columns:minmax(0,1fr); gap:10px; }
  .tn-jwt-page .tn-jwt-source, .tn-jwt-page .tn-jwt-result { padding:13px; gap:12px; }
  .tn-jwt-page .tn-jwt-source { grid-template-rows:auto auto auto; }
  .tn-jwt-page .tn-jwt-details { padding:13px; }
  .tn-jwt-page #tn-jwt-input { min-height:174px; height:auto; }
  .tn-jwt-page .tn-jwt-json-card pre { min-height:118px; }
}
@media (max-width:470px) {
  .tn-jwt-page .tn-jwt-trust { grid-template-columns:1fr; gap:5px; padding:12px; }
  .tn-jwt-page .tn-jwt-trust-label { display:block; grid-row:auto; min-width:0; padding:0; border-right:0; }
  .tn-jwt-page .tn-jwt-json-grid { grid-template-columns:minmax(0,1fr); }
  .tn-jwt-page .tn-jwt-time-list > div { grid-template-columns:65px minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) { .tn-jwt-page .tn-jwt-tool button { transition:none; } }