.jwttool__input-area{padding:16px;border-bottom:1px solid var(--color-border)}.jwttool__input-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:12px;flex-wrap:wrap}.jwttool__label{font-size:13px;font-weight:500;color:var(--color-text-soft)}.jwttool__input{width:100%;min-height:96px;max-height:200px;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:13px;line-height:1.6;resize:vertical;transition:border-color .15s ease,box-shadow .15s ease}.jwttool__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2b6cff1f}.jwttool__hint{margin:6px 0 0;font-size:12px;color:var(--color-text-muted)}.jwttool__warn{color:var(--color-error);font-weight:500}.jwttool__error{margin:12px 16px;padding:10px 14px;border-radius:var(--radius-sm);background:#dc262614;border:1px solid rgba(220,38,38,.2);color:var(--color-error);font-size:13px}.jwttool__meta{display:flex;flex-wrap:wrap;gap:12px;padding:12px 16px;border-bottom:1px solid var(--color-border);background:var(--color-bg-soft)}.jwttool__meta-item{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-bg);font-size:12.5px}.jwttool__meta-label{color:var(--color-text-muted);font-size:11.5px}.jwttool__meta-value{color:var(--color-text)}.jwttool__meta-value code{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);color:var(--color-primary);font-weight:600}.jwttool__meta-item--valid{border-color:#1aaa554d;background:#1aaa5514}.jwttool__meta-item--valid .jwttool__meta-value{color:var(--color-success)}.jwttool__meta-item--expiring{border-color:#f5a6234d;background:#f5a62314}.jwttool__meta-item--expiring .jwttool__meta-value{color:#d97706}.jwttool__meta-item--expired{border-color:#dc26264d;background:#dc262614}.jwttool__meta-item--expired .jwttool__meta-value{color:var(--color-error)}.jwttool__meta-item--no-exp .jwttool__meta-value{color:var(--color-text-muted)}.jwttool__meta-item--alg{border-color:#2b6cff4d;background:#2b6cff0f}.jwttool__meta-item--sec-insecure{border-color:#dc262666;background:#dc262614}.jwttool__meta-item--sec-insecure .jwttool__meta-value code{color:var(--color-error)}.jwttool__meta-item--sec-warning{border-color:#f5a62366;background:#f5a62314}.jwttool__meta-item--sec-warning .jwttool__meta-value code{color:#d97706}.jwttool__alert{margin:12px 16px;padding:12px 16px;border-radius:var(--radius-sm);background:#dc262614;border:1px solid rgba(220,38,38,.3);border-left:4px solid var(--color-error);color:var(--color-text);font-size:13px;line-height:1.7}.jwttool__alert strong{color:var(--color-error)}.jwttool__alert code{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);background:#dc26261a;padding:1px 6px;border-radius:3px;color:var(--color-error);font-weight:600}.jwttool__alert-link{color:var(--color-primary);text-decoration:underline}.jwttool__alert-link:hover{text-decoration:none}.jwttool__btn-insecure{border-color:#dc26264d;color:#b91c1c}.jwttool__btn-insecure:hover{border-color:var(--color-error);color:var(--color-error);background:#dc26260a}.jwttool__sig-hint{margin:0;padding:8px 14px;border-top:1px solid var(--color-border);background:var(--color-bg-soft);color:var(--color-text-soft);font-size:12px;line-height:1.6}.jwttool__sig-hint code{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);color:var(--color-primary);font-weight:600}.jwttool__sig-warn{color:#d97706;font-weight:500}.jwttool__segments{padding:16px;display:flex;flex-direction:column;gap:16px}.jwttool__seg{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);overflow:hidden}.jwttool__seg--header{border-left:3px solid #dc2626}.jwttool__seg--payload{border-left:3px solid #7c3aed}.jwttool__seg--signature{border-left:3px solid #2563eb}.jwttool__seg-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--color-border);background:var(--color-bg-soft);flex-wrap:wrap}.jwttool__seg-tag{display:inline-block;padding:2px 10px;border-radius:4px;font-size:12px;font-weight:600;color:#fff;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)}.jwttool__seg-tag--header{background:#dc2626}.jwttool__seg-tag--payload{background:#7c3aed}.jwttool__seg-tag--signature{background:#2563eb}.jwttool__seg-desc{flex:1;min-width:0;color:var(--color-text-soft);font-size:12.5px}.jwttool__copy-btn{padding:3px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text-soft);font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s ease}.jwttool__copy-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.jwttool__seg-json{margin:0;padding:12px 14px;background:var(--color-bg-code);color:var(--color-text);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:13px;line-height:1.6;overflow:auto;max-height:320px;white-space:pre}.jwttool__seg-error{padding:12px 14px;color:var(--color-error);font-size:13px;background:#dc26260a}.jwttool__claims{list-style:none;margin:0;padding:8px 14px;border-top:1px solid var(--color-border);background:var(--color-bg-soft)}.jwttool__claim{display:flex;align-items:baseline;gap:8px;padding:4px 0;font-size:12.5px;flex-wrap:wrap}.jwttool__claim+.jwttool__claim{border-top:1px dashed var(--color-border)}.jwttool__claim--standard .jwttool__claim-key{color:#7c3aed;font-weight:600}.jwttool__claim-key{flex-shrink:0;min-width:56px;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);color:var(--color-text-soft);font-size:12px}.jwttool__claim-value{flex:1;min-width:0;color:var(--color-text);word-break:break-all;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12.5px;display:flex;flex-direction:column;gap:4px}.jwttool__claim-json{margin:0;padding:8px 10px;background:var(--color-bg-code);border-radius:var(--radius-sm);border:1px solid var(--color-border);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12px;line-height:1.5;overflow:auto;max-height:200px;white-space:pre}.jwttool__claim-text{word-break:break-all}.jwttool__claim-time{color:var(--color-text-muted);font-style:normal;font-size:11.5px}.jwttool__claim-time--future{color:var(--color-success)}.jwttool__claim-time--past{color:var(--color-error)}.jwttool__claim-desc{flex-shrink:0;color:var(--color-primary);font-size:11.5px;background:#2b6cff14;padding:1px 8px;border-radius:999px}.jwttool__sig-value{padding:12px 14px;background:var(--color-bg-code);color:var(--color-text);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12.5px;word-break:break-all;line-height:1.6;max-height:200px;overflow:auto}.jwttool__sig-note{margin:0;padding:10px 14px;border-top:1px solid var(--color-border);background:#f5a6230f;color:var(--color-text-soft);font-size:12px;line-height:1.6}.jwttool__sig-note strong{color:#d97706}.jwttool__notice{margin:12px 16px;padding:8px 14px;border-radius:var(--radius-sm);background:#1aaa5514;color:var(--color-success);font-size:13px;text-align:center}@media(prefers-color-scheme:dark){.jwttool__seg-tag--header{background:#f87171;color:#1f1414}.jwttool__seg-tag--payload{background:#c084fc;color:#1f1429}.jwttool__seg-tag--signature{background:#60a5fa;color:#0f1a2e}.jwttool__claim--standard .jwttool__claim-key{color:#c084fc}}@media(max-width:768px){.jwttool__input-head{flex-direction:column;align-items:stretch}.jwttool__meta{flex-direction:column;gap:8px}.jwttool__meta-item{width:100%}.jwttool__seg-head{flex-wrap:wrap}.jwttool__seg-desc{width:100%;order:3}.jwttool__claim{flex-direction:column;align-items:flex-start;gap:2px}.jwttool__claim-key{min-width:0}}