:root{--primary:#7c5cff;--primary-dark:#5b3fd9;--border:#dfe3ec;--surface:#ffffff;--shadow-soft:0 1px 3px rgba(15,23,42,0.08);--surface-muted:#f5f6fa;--text-main:#111827;--text-muted:#5b6475;}
.jwtenc-root{--je-bg:#0d1117;--je-pane:#161b22;--je-line:#2a313c;--je-text:#d6dde6;--je-dim:#8b96a5;--je-head:#ff7b8a;--je-pay:#c4a7ff;--je-sig:#56d4e8;--je-ok:#3fb950;--je-warn:#e3b341;--je-bad:#ff6b6b;--je-mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;margin-bottom:2.25rem;}
.jwtenc-card{background:var(--je-bg);border:1px solid #1f2630;border-radius:14px;overflow:hidden;box-shadow:0 12px 32px rgba(13,17,23,0.18);color:var(--je-text);}
.jwtenc-byline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.5rem;padding:0.6rem 1rem;border-bottom:1px solid var(--je-line);font-size:0.8125rem;color:var(--je-dim);font-family:var(--je-mono);}
.jwtenc-byline-author a{color:var(--je-pay);text-decoration:none;font-weight:600;}
.jwtenc-byline-author a:hover{text-decoration:underline;}
.jwtenc-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;padding:0.75rem 1rem;border-bottom:1px solid var(--je-line);background:#11161d;}
.jwtenc-toolbar-field{display:flex;align-items:center;gap:0.5rem;margin:0;font-family:var(--je-mono);font-size:0.8125rem;color:var(--je-dim);}
.jwtenc-select{background:var(--je-pane);color:var(--je-text);border:1px solid var(--je-line);border-radius:6px;padding:0.35rem 0.6rem;font-family:var(--je-mono);font-size:0.875rem;}
.jwtenc-select:focus,.jwtenc-input:focus,.jwtenc-code:focus{outline:2px solid var(--je-pay);outline-offset:-1px;}
.jwtenc-switch{display:flex;align-items:center;gap:0.4rem;margin:0;font-size:0.8125rem;color:var(--je-dim);cursor:pointer;}
.jwtenc-switch input{accent-color:var(--je-ok);}
.jwtenc-toolbar-actions{display:flex;flex-wrap:wrap;gap:0.5rem;margin-left:auto;}
.jwtenc-tbtn{display:inline-flex;align-items:center;gap:0.35rem;background:var(--je-pane);color:var(--je-text);border:1px solid var(--je-line);border-radius:6px;padding:0.38rem 0.75rem;font-size:0.8125rem;font-weight:500;line-height:1.3;cursor:pointer;text-decoration:none;transition:border-color 0.15s,background 0.15s;}
.jwtenc-tbtn:hover{border-color:var(--je-dim);color:#fff;text-decoration:none;}
.jwtenc-tbtn-primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.jwtenc-tbtn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);}
.jwtenc-tbtn-ghost{background:transparent;}
.jwtenc-tbtn.is-done{border-color:var(--je-ok);color:var(--je-ok);}
.jwtenc-tbtn kbd{background:#0b0f14;border:1px solid var(--je-line);border-radius:4px;padding:0 0.3rem;font-size:0.6875rem;color:var(--je-dim);box-shadow:none;}
.jwtenc-grid{display:grid;gap:1px;background:var(--je-line);}
@media (min-width: 992px){.jwtenc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.jwtenc-col{display:flex;flex-direction:column;gap:1px;background:var(--je-line);min-width:0;}
.jwtenc-pane{background:var(--je-bg);padding:0.75rem 1rem 1rem;min-width:0;}
.jwtenc-pane-out{background:#0a0e13;}
.jwtenc-pane-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;font-family:var(--je-mono);font-size:0.75rem;}
.jwtenc-file{color:var(--je-dim);letter-spacing:0.02em;}
.jwtenc-file::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:0.45rem;background:var(--je-dim);vertical-align:middle;}
.jwtenc-c-head::before{background:var(--je-head);}
.jwtenc-c-pay::before{background:var(--je-pay);}
.jwtenc-c-sig::before{background:var(--je-sig);}
.jwtenc-pane-state{color:var(--je-ok);}
.jwtenc-pane-state.is-bad{color:var(--je-bad);}
.jwtenc-pane-state.is-warn{color:var(--je-warn);}
.jwtenc-code,.jwtenc-input{display:block;width:100%;background:var(--je-pane);color:var(--je-text);border:1px solid var(--je-line);border-radius:8px;padding:0.65rem 0.75rem;font-family:var(--je-mono);font-size:0.8125rem;line-height:1.55;tab-size:2;}
.jwtenc-code{min-height:210px;resize:vertical;white-space:pre;overflow:auto;}
.jwtenc-code-sm{min-height:96px;}
.jwtenc-code.is-bad{border-color:var(--je-bad);}
.jwtenc-chips{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.6rem;}
.jwtenc-chip{background:transparent;color:var(--je-pay);border:1px dashed #4b3d7a;border-radius:999px;padding:0.2rem 0.65rem;font-family:var(--je-mono);font-size:0.75rem;cursor:pointer;}
.jwtenc-chip:hover{background:rgba(196,167,255,0.1);border-style:solid;}
.jwtenc-chip-alt{color:var(--je-dim);border-color:var(--je-line);}
.jwtenc-key-body{display:flex;flex-direction:column;gap:0.6rem;}
.jwtenc-key-body[hidden]{display:none;}
.jwtenc-key-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem;}
.jwtenc-check{display:flex;align-items:center;gap:0.4rem;margin:0;font-size:0.8125rem;color:var(--je-dim);cursor:pointer;}
.jwtenc-meter{font-family:var(--je-mono);font-size:0.75rem;color:var(--je-ok);}
.jwtenc-meter.is-warn{color:var(--je-warn);}
.jwtenc-hint{margin:0;font-size:0.8125rem;color:var(--je-dim);}
.jwtenc-pub{border:1px solid var(--je-line);border-radius:8px;padding:0.5rem 0.75rem;}
.jwtenc-pub summary{cursor:pointer;font-size:0.8125rem;color:var(--je-sig);}
.jwtenc-pub textarea{margin:0.5rem 0;}
.jwtenc-token{font-family:var(--je-mono);font-size:0.875rem;line-height:1.6;word-break:break-all;background:var(--je-pane);border:1px solid var(--je-line);border-radius:8px;padding:0.85rem;min-height:150px;color:var(--je-dim);}
.jwtenc-token .t-h{color:var(--je-head);}
.jwtenc-token .t-p{color:var(--je-pay);}
.jwtenc-token .t-s{color:var(--je-sig);}
.jwtenc-token .t-d{color:#fff;font-weight:700;}
.jwtenc-error{margin-top:0.6rem;padding:0.55rem 0.75rem;border-left:3px solid var(--je-bad);background:rgba(255,107,107,0.08);color:#ffb3b3;font-family:var(--je-mono);font-size:0.8125rem;border-radius:4px;}
.jwtenc-error[hidden]{display:none;}
.jwtenc-copyrow{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem;}
.jwtenc-table-wrap{overflow-x:auto;}
.jwtenc-claims{width:100%;border-collapse:collapse;font-family:var(--je-mono);font-size:0.78rem;}
.jwtenc-claims th{color:var(--je-dim);font-weight:500;text-align:left;padding:0.35rem 0.5rem;border-bottom:1px solid var(--je-line);}
.jwtenc-claims td{padding:0.35rem 0.5rem;border-bottom:1px solid #1c222b;vertical-align:top;color:var(--je-text);word-break:break-word;}
.jwtenc-claims td:first-child{color:var(--je-pay);white-space:nowrap;}
.jwtenc-claims td:last-child{color:var(--je-dim);}
.jwtenc-claims .is-bad{color:var(--je-bad);}
.jwtenc-claims .is-ok{color:var(--je-ok);}
.jwtenc-lint{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.4rem;}
.jwtenc-lint li{display:grid;grid-template-columns:auto 1fr;gap:0.6rem;padding:0.45rem 0.6rem;border-radius:6px;background:var(--je-pane);font-size:0.8125rem;line-height:1.45;}
.jwtenc-lint li::before{font-family:var(--je-mono);font-size:0.6875rem;font-weight:700;padding:0.1rem 0.35rem;border-radius:4px;height:fit-content;}
.jwtenc-lint .l-bad::before{content:"FAIL";background:rgba(255,107,107,0.15);color:var(--je-bad);}
.jwtenc-lint .l-warn::before{content:"WARN";background:rgba(227,179,65,0.15);color:var(--je-warn);}
.jwtenc-lint .l-ok::before{content:"PASS";background:rgba(63,185,80,0.15);color:var(--je-ok);}
.jwtenc-lint code{background:#0b0f14;color:var(--je-pay);padding:0 0.25rem;border-radius:3px;}
.jwtenc-status{display:flex;flex-wrap:wrap;gap:0.4rem 1.25rem;padding:0.45rem 1rem;background:var(--primary-dark);color:#ece8ff;font-family:var(--je-mono);font-size:0.75rem;}
.jwtenc-status-right{margin-left:auto;opacity:0.85;}
.jwtenc-article{margin:0 auto 2rem;color:var(--text-main);font-size:1.02rem;line-height:1.75;}
.jwtenc-article h2{font-size:1.5rem;font-weight:700;margin:2.25rem 0 0.85rem;color:var(--text-main);}
.jwtenc-article p{margin-bottom:1rem;color:#2b3443;}
.jwtenc-article code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.88em;background:var(--surface-muted);border:1px solid var(--border);color:#4a2fc4;padding:0.05rem 0.3rem;border-radius:4px;word-break:break-word;}
.jwtenc-block{background:#0d1117;color:#d6dde6;border-radius:10px;padding:1rem 1.1rem;margin:0 0 1rem;overflow-x:auto;font-size:0.84rem;line-height:1.6;}
.jwtenc-block code{background:none;border:0;color:inherit;padding:0;font-size:inherit;word-break:normal;}
.jwtenc-table{width:100%;border-collapse:collapse;margin-bottom:1rem;font-size:0.9rem;}
.jwtenc-table th{background:var(--surface-muted);text-align:left;padding:0.6rem 0.7rem;border-bottom:2px solid var(--border);font-weight:600;white-space:nowrap;}
.jwtenc-table td{padding:0.6rem 0.7rem;border-bottom:1px solid var(--border);vertical-align:top;}
.jwtenc-dl{margin:0 0 1rem;border-left:3px solid var(--primary);padding-left:1.1rem;}
.jwtenc-dl dt{font-weight:600;margin-top:0.85rem;}
.jwtenc-dl dd{margin:0.2rem 0 0;color:#2b3443;}
.jwtenc-steps{padding-left:1.25rem;margin-bottom:1rem;}
.jwtenc-steps li{margin-bottom:0.75rem;padding-left:0.25rem;}
.jwtenc-limits{background:var(--surface-muted);border:1px solid var(--border);border-radius:12px;padding:0.25rem 1.4rem 1rem;margin-top:2rem;}
.jwtenc-limits h2{font-size:1.25rem;margin-top:1.1rem;}
.jwtenc-limits ul{padding-left:1.1rem;margin:0;}
.jwtenc-limits li{margin-bottom:0.55rem;}
@media (max-width: 575px){.jwtenc-toolbar-actions{margin-left:0;width:100%;}.jwtenc-status-right{margin-left:0;}.jwtenc-code{min-height:170px;}.jwtenc-pane{padding:0.7rem 0.75rem 0.85rem;}}