.jwt-grid{display:flex;flex-direction:column;gap:var(--space-5)}.jwt-input-panel{min-height:0}.jwt-input-panel textarea{min-height:120px}.jwt-out{flex:1;min-height:0;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-3)}.jwt-empty{margin:0;color:var(--color-text-subtle);font-size:var(--text-sm);display:flex;flex-direction:column;gap:var(--space-1)}.jwt-empty p{margin:0}.jwt-empty-lead{color:var(--color-text);font-weight:var(--font-weight-medium)}.jwt-sections{display:flex;flex-direction:column;gap:var(--space-4)}.jwt-empty[hidden],.jwt-sections[hidden],.jwt-sec[hidden],.jwt-validity[hidden],.jwt-vbar[hidden],.jwt-insight[hidden],.jwt-claim-children[hidden],.jwt-claim-more[hidden]{display:none}.jwt-sec{display:flex;flex-direction:column;gap:var(--space-2)}.jwt-sec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.jwt-hint{text-transform:none;letter-spacing:0;font-weight:400;color:var(--color-text-subtle)}.jwt-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-2);border:var(--border);border-radius:var(--radius-md);overflow:hidden}.jwt-sum-cell{padding:var(--space-2) var(--space-3);display:flex;flex-direction:column;gap:2px}.jwt-sum-k{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.jwt-sum-v{font-size:var(--text-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-mono);overflow-wrap:anywhere}.jwt-sum-v[data-tone=ok]{color:var(--color-success)}.jwt-sum-v[data-tone=warn]{color:var(--color-danger)}.jwt-sum-v[data-tone=pending]{color:var(--color-gold)}.jwt-validity{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border:var(--border);border-radius:var(--radius-md);background:var(--color-bg)}.jwt-vhead{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.jwt-vstatus{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);background:var(--color-bg-tertiary);color:var(--color-text);transition:background-color var(--duration-normal) var(--ease-default),color var(--duration-normal) var(--ease-default)}.jwt-vstatus.is-valid{background:var(--color-success-bg);color:var(--color-success)}.jwt-vstatus.is-expired{background:var(--color-danger-bg);color:var(--color-danger)}.jwt-vstatus.is-pending{background:var(--color-gold-subtle);color:var(--color-gold)}.jwt-vcountdown{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted)}.jwt-vabs{margin:0;font-size:var(--text-xs);color:var(--color-text-subtle)}.jwt-vabs:empty{display:none}.jwt-vbar{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-1)}.jwt-vbar-track{position:relative;height:8px;border-radius:999px;background:var(--color-bg-tertiary);overflow:visible}.jwt-vbar-fill{height:100%;width:0;border-radius:999px;background:var(--color-accent)}.jwt-vbar-fill.is-expired{background:var(--color-danger)}.jwt-vbar-now{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--color-accent);border:2px solid var(--color-bg);transform:translate(-50%,-50%);cursor:help}.jwt-vbar-now.is-expired{background:var(--color-danger)}.jwt-vbar-ends{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-subtle)}.jwt-vbar-end{cursor:help}@media(prefers-reduced-motion:no-preference){.jwt-vbar-fill{transition:width 1s linear,background-color var(--duration-normal) var(--ease-default)}.jwt-vbar-now{transition:left 1s linear}}.jwt-insights{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}.jwt-insights:empty{display:none}.jwt-insight{font-size:var(--text-sm);display:flex;gap:var(--space-2)}.jwt-insight[data-tone=ok]{color:var(--color-text)}.jwt-insight[data-tone=warn]{color:var(--color-danger)}.jwt-insight-mark{flex-shrink:0}.jwt-pre{margin:0;padding:var(--space-3);border:var(--border);border-radius:var(--radius-sm);background:var(--color-bg);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--leading-relaxed);white-space:pre-wrap;overflow-wrap:anywhere;font-variant-ligatures:none}.jwt-claims{display:flex;flex-direction:column;border:var(--border);border-radius:var(--radius-sm);overflow:hidden}.jwt-claim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-3);padding:var(--space-2) var(--space-3);border-top:var(--border)}.jwt-claim:first-child{border-top:none}.jwt-claim--nested{border-top:var(--border);padding-left:var(--space-4)}.jwt-claim-key{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);min-width:0}.jwt-claim-label{color:var(--color-text-muted);font-weight:var(--font-weight-medium);font-size:var(--text-sm)}.jwt-claim-path{border:none;background:transparent;padding:0;cursor:pointer;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-subtle)}.jwt-claim-path:hover{color:var(--color-accent);text-decoration:underline}.jwt-claim-path--solo{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--font-weight-medium)}.jwt-claim-val{min-width:0;font-size:var(--text-sm);display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}.jwt-val{cursor:pointer;font-family:var(--font-mono);color:var(--color-text);border-radius:var(--radius-sm);transition:background-color var(--duration-fast) var(--ease-default)}.jwt-val:hover{background:var(--color-bg-tertiary)}.jwt-val.is-copied{background:var(--color-success-bg);color:var(--color-success)}.jwt-claim-path.is-copied{color:var(--color-success)}.jwt-val-sub{font-size:var(--text-xs);color:var(--color-text-muted)}.jwt-expand{align-self:flex-start;border:none;background:transparent;padding:0;cursor:pointer;font-size:var(--text-xs);color:var(--color-accent);font-weight:var(--font-weight-medium)}.jwt-expand:hover{text-decoration:underline}.jwt-claim-more{font-family:var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}.jwt-claim-children{display:flex;flex-direction:column;margin-top:var(--space-1);border-left:2px solid var(--color-border)}.jwt-badge{display:inline-block;margin-left:var(--space-2);padding:0 var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);background:var(--color-danger-bg);color:var(--color-danger)}.jwt-sig{display:block;padding:var(--space-3);border:var(--border);border-radius:var(--radius-sm);background:var(--color-bg);font-family:var(--font-mono);font-size:var(--text-sm);word-break:break-all;color:var(--color-text-muted)}.jwt-sig-note{margin:0;color:var(--color-text-subtle);font-size:var(--text-xs)}.jwt-privacy{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border:var(--border);border-radius:var(--radius-md);background:var(--color-accent-subtle);color:var(--color-accent-strong);font-size:var(--text-sm);font-weight:var(--font-weight-medium)}.has-tip{position:relative;cursor:help}.jwt-claim-label.has-tip{border-bottom:1px dotted var(--color-text-subtle)}@media(hover:hover){.has-tip:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + var(--space-2));left:0;width:max-content;max-width:260px;white-space:normal;text-align:left;background:var(--color-bg);color:var(--color-text);border:var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:400;line-height:var(--leading-normal);box-shadow:0 2px 8px #0000001f;opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-default);z-index:20}.has-tip:hover:after,.has-tip:focus-visible:after{opacity:1}}@media(prefers-reduced-motion:no-preference){.jwt-validity,.jwt-summary{animation:jwt-fade var(--duration-normal) var(--ease-default)}}@keyframes jwt-fade{0%{opacity:0}to{opacity:1}}