.jwt-tool{margin-bottom:52px}.jwt-tabs{display:flex;border-bottom:1px solid var(--color-hairline);margin-bottom:20px;gap:0}.jwt-tab{height:40px;padding:0 20px;font-size:13.5px;font-family:var(--font-sans);font-weight:500;color:var(--color-body);background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .1s,border-color .1s}.jwt-tab:hover{color:var(--color-ink)}.jwt-tab.active{color:var(--color-ink);border-bottom-color:var(--color-primary);font-weight:600}.jwt-pane-label{font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-mute)}.jwt-pane-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;min-height:24px}.jwt-textarea{width:100%;height:110px;resize:vertical;font-family:var(--font-mono);font-size:12.5px;line-height:1.65;color:var(--color-ink);background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--rounded-md);padding:10px 14px;outline:none;transition:border-color .12s;box-shadow:var(--shadow-1);tab-size:2}.jwt-textarea:focus{border-color:var(--color-primary)}.jwt-textarea::placeholder{color:var(--color-mute);font-family:var(--font-sans);font-size:13px}.jwt-textarea--lg,.jwt-textarea--input{height:90px}.jwt-textarea--header{height:78px}.jwt-textarea--payload{height:140px}.jwt-textarea--secret{height:72px}.jwt-textarea.jwt-error{border-color:var(--color-error)}.jwt-btn-sm{height:24px;padding:0 10px;font-size:11px;font-family:var(--font-sans);font-weight:500;color:var(--color-body);background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);cursor:pointer;transition:color .1s,border-color .1s,background .1s;flex-shrink:0}.jwt-btn-sm:hover{color:var(--color-ink);border-color:var(--color-hairline-strong)}.jwt-btn-sm.copied{color:#059669;border-color:#059669}.jwt-btn-primary{height:36px;padding:0 18px;font-size:13px;font-family:var(--font-sans);font-weight:500;color:var(--color-on-primary);background:var(--color-primary);border:none;border-radius:var(--rounded-sm);cursor:pointer;transition:opacity .12s;flex-shrink:0}.jwt-btn-primary:hover{opacity:.84}.jwt-token-view{font-family:var(--font-mono);font-size:11px;line-height:1.6;word-break:break-all;background:var(--color-canvas-soft);border:1px solid var(--color-hairline);border-radius:var(--rounded-md);padding:8px 12px;margin-top:8px}.jwt-tv-h{color:#dc2626}[data-theme=dark] .jwt-tv-h{color:#f87171}.jwt-tv-p{color:#7c3aed}[data-theme=dark] .jwt-tv-p{color:#a78bfa}.jwt-tv-s{color:#0550ae}[data-theme=dark] .jwt-tv-s{color:#79c0ff}.jwt-tv-dot{color:var(--color-mute)}.jwt-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:28px;margin:8px 0 10px}.jwt-status{font-family:var(--font-mono);font-size:12px;display:flex;align-items:center;gap:6px}.jwt-status-valid{color:#059669}.jwt-status-error{color:var(--color-error)}.jwt-status-hint{color:var(--color-mute)}.jwt-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-family:var(--font-mono);font-weight:600;padding:2px 9px;border-radius:var(--rounded-full)}.jwt-badge--valid{color:#059669;background:#d1fae5}.jwt-badge--expired{color:#b45309;background:#fef3c7}.jwt-badge--noexp{color:var(--color-mute);background:var(--color-canvas-soft-2)}[data-theme=dark] .jwt-badge--expired{color:#fcd34d;background:#3b2f04}[data-theme=dark] .jwt-badge--valid{color:#34d399;background:#022c22}.jwt-parts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.jwt-part-card{background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--rounded-md);overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column}.jwt-part-hd{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--color-hairline);background:var(--color-canvas-soft);flex-shrink:0}.jwt-part-title{font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.jwt-part-title--red{color:#dc2626}.jwt-part-title--purple{color:#7c3aed}.jwt-part-title--blue{color:#0550ae}[data-theme=dark] .jwt-part-title--red{color:#f87171}[data-theme=dark] .jwt-part-title--purple{color:#a78bfa}[data-theme=dark] .jwt-part-title--blue{color:#79c0ff}.jwt-part-pre{font-family:var(--font-mono);font-size:11.5px;line-height:1.65;padding:10px 12px;margin:0;flex:1;min-height:160px;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-all;color:var(--color-ink);background:var(--color-canvas)}.jwt-part-pre--sig{min-height:80px;max-height:100px}.jwt-placeholder{color:var(--color-mute);font-family:var(--font-sans);font-size:12px;font-style:italic}.jt-key{color:#6f42c1;font-weight:500}.jt-str{color:#0a6b3b}.jt-num{color:#0550ae}.jt-bool{color:#c5520c}.jt-null{color:#8b949e;font-style:italic}[data-theme=dark] .jt-key{color:#d2a8ff}[data-theme=dark] .jt-str{color:#7ee787}[data-theme=dark] .jt-num{color:#79c0ff}[data-theme=dark] .jt-bool{color:#ffa657}[data-theme=dark] .jt-null{color:#6e7681}.jwt-encode-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}.jwt-encode-inputs{display:flex;flex-direction:column}.jwt-encode-options{display:flex;gap:10px;margin-top:10px;margin-bottom:10px}.jwt-label{display:block;font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-mute);margin-bottom:4px}.jwt-select{height:32px;padding:0 8px;font-size:12.5px;font-family:var(--font-sans);color:var(--color-ink);background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);cursor:pointer;width:100px}.jwt-input{height:32px;padding:0 10px;font-size:12.5px;font-family:var(--font-mono);color:var(--color-ink);background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);width:100%;outline:none;transition:border-color .12s}.jwt-input:focus{border-color:var(--color-primary)}.jwt-encode-out-pre{font-family:var(--font-mono);font-size:11.5px;line-height:1.65;background:var(--color-canvas-soft);border:1px solid var(--color-hairline);border-radius:var(--rounded-md);padding:10px 12px;margin:0;min-height:120px;overflow:auto;white-space:pre-wrap;word-break:break-all;box-shadow:var(--shadow-1)}.jwt-encode-output{display:flex;flex-direction:column}.jwt-verify-result{margin-top:16px;padding:16px 20px;border-radius:var(--rounded-md);border:1px solid var(--color-hairline);font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px}.jwt-verify-result--valid{border-color:#059669;background:#f0fdf4;color:#065f46}.jwt-verify-result--invalid{border-color:var(--color-error);background:#fff1f2;color:#9f1239}[data-theme=dark] .jwt-verify-result--valid{background:#022c22;color:#34d399}[data-theme=dark] .jwt-verify-result--invalid{background:#2c0203;color:#fca5a5}.jwt-samples{margin-top:48px;margin-bottom:52px}.jwt-samples-hd{font-size:15px;font-weight:600;color:var(--color-ink);letter-spacing:-.2px;margin-bottom:6px}.jwt-samples-intro{font-size:13px;color:var(--color-body);line-height:1.6;margin-bottom:16px}.jwt-samples-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.jwt-sample-card{background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--rounded-md);overflow:hidden;box-shadow:var(--shadow-1)}.jwt-sample-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px}.jwt-sample-label{font-size:11px;font-weight:600;color:var(--color-ink)}.jwt-sample-note{font-size:10.5px;color:var(--color-mute);padding:0 12px 6px}.jwt-sample-tok{font-family:var(--font-mono);font-size:10px;color:var(--color-body);padding:0 12px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jwt-sample-ft{padding:0 12px 10px}.jwt-sample-btn{height:24px;padding:0 10px;font-size:11px;font-family:var(--font-sans);font-weight:500;color:var(--color-primary);background:transparent;border:1px solid var(--color-primary);border-radius:var(--rounded-sm);cursor:pointer;transition:background .1s,color .1s}.jwt-sample-btn:hover{background:var(--color-primary);color:var(--color-on-primary)}.jwt-desc{display:flex;flex-direction:column;gap:14px;margin-top:60px;margin-bottom:52px;font-size:14px;line-height:1.78;color:var(--color-body)}.jwt-desc a{color:var(--color-link);text-decoration:none;font-weight:500}.jwt-desc a:hover{text-decoration:underline}.jwt-desc h2{font-size:18px;font-weight:600;letter-spacing:-.3px;color:var(--color-ink);margin-top:8px;margin-bottom:6px;line-height:1.35}.jwt-desc ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px;margin:8px 0 14px}.jwt-desc li{font-size:14px;line-height:1.65;color:var(--color-body);padding-left:18px;position:relative}.jwt-desc li:before{content:"—";position:absolute;left:0;color:var(--color-mute)}.jwt-desc strong{color:var(--color-ink)}@media(max-width:900px){.jwt-parts-grid{grid-template-columns:1fr 1fr}.jwt-encode-layout{grid-template-columns:1fr}}@media(max-width:640px){.jwt-parts-grid,.jwt-samples-grid{grid-template-columns:1fr}.jwt-tab{padding:0 12px;font-size:12.5px}.jwt-encode-options{flex-direction:column}}