.jwtPage{padding-top:clamp(26px,3vw,44px)}.jwtIntro{max-width:820px;margin-bottom:clamp(20px,2.5vw,32px)}.jwtIntro h1{letter-spacing:-.05em;margin:0;font-size:clamp(1.75rem,2.7vw,2.5rem);line-height:1.15}.jwtIntro p{color:var(--text-secondary);margin:9px 0 0;font-size:.95rem}.jwtTool,.jwtNotice,.jwtSupporting article{border:1px solid var(--border-subtle);background:var(--surface-white);border-radius:8px}.jwtTool{padding:clamp(16px,2vw,24px)}.jwtToolbar{border:1px solid var(--border-subtle);background:var(--surface-white);border-radius:8px;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;padding:10px 12px;display:flex}.jwtModeSwitch{background:var(--primary-color-light);border:1px solid #c7e0f7;border-radius:999px;width:fit-content;padding:4px;display:flex}.jwtModeButton{color:#285f99;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;min-height:34px;padding:7px 15px;font-size:.84rem;font-weight:700;transition:color .16s,background .16s,border-color .16s}.jwtModeButton:hover{color:#0046be;background:#d8ecff}.jwtModeButton.isActive{border-color:var(--primary-color-border);color:#003fb0;background:#fff;box-shadow:0 1px 3px #003e9c1f}.jwtModeButton:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.jwtEncoderTool{border:1px solid var(--border-subtle);background:var(--surface-white);border-radius:8px;padding:clamp(16px,2vw,24px)}.exampleControls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:9px;display:flex}.exampleControls label{color:var(--text-primary);font-size:.84rem;font-weight:700}.exampleControls select{border:1px solid var(--border-subtle);min-width:112px;min-height:34px;color:var(--text-primary);background:var(--surface-white);font:inherit;border-radius:5px;padding:6px 28px 6px 9px;font-size:.84rem}.exampleControls .quietAction{border-color:var(--primary-color-border);color:var(--primary-color);background:var(--surface-white)}.exampleControls .quietAction:hover{border-color:var(--primary-color);color:var(--primary-color-hover);background:var(--primary-color-light)}.jwtEncoderWorkspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:20px;display:grid}.jwtEncoderInputs{gap:16px;display:grid}.encoderSection,.encoderOutputSection{border:1px solid var(--border-subtle);background:var(--surface-subtle);border-radius:7px;min-width:0;padding:16px}.encoderJsonInput{resize:vertical;border:1px solid var(--border-subtle);width:100%;min-height:132px;color:var(--text-primary);background:var(--surface-white);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:5px;margin-top:12px;padding:11px;font:.84rem/1.55 Consolas,Courier New,monospace}.encoderJsonInput:focus{border-color:var(--primary-color-border);outline:0}.signingKeyInput{min-height:92px}.encoderFieldStatus{min-height:20px;color:var(--text-secondary);margin:9px 0 0;font-size:.82rem}.encoderFieldStatus.isValid{color:#167a44}.encoderFieldStatus.isInvalid{color:#a12b2b}.encoderJwtOutput{overflow-wrap:anywhere;border:1px solid var(--border-subtle);min-height:330px;color:var(--text-primary);background:var(--surface-white);border-radius:5px;margin-top:12px;padding:11px;font:.84rem/1.55 Consolas,Courier New,monospace;display:block}.encoderOutputSection .verifyButton{width:100%;margin-top:9px}.jwtInputHeading,.sectionTitle,.actionGroup{align-items:center;display:flex}.jwtInputHeading,.sectionTitle{justify-content:space-between;gap:16px}.jwtInputHeading label,.sectionTitle h2{color:var(--text-primary);font-size:1rem;font-weight:650}.jwtInputHeading p,.sectionTitle p,.claimsHeading p,.signatureSection p{color:var(--text-secondary);margin:4px 0 0;font-size:.84rem;line-height:1.45}.actionGroup{flex-wrap:wrap;justify-content:flex-end;gap:8px}.quietAction,.verifyButton{border:1px solid var(--border-subtle);min-height:34px;color:var(--text-primary);background:var(--surface-white);cursor:pointer;border-radius:5px;padding:6px 10px;font-size:.78rem;font-weight:600}.quietAction:hover{border-color:var(--primary-color-border);color:var(--primary-color);background:var(--primary-color-light)}.quietAction:focus-visible,.verifyButton:focus-visible,.jwtInput:focus-visible,.verificationInput:focus-visible,.verificationCheckbox input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.jwtInputEditor{flex:auto;min-height:clamp(340px,50vh,680px);margin-top:13px;position:relative}.jwtInput,.jwtInputHighlight{width:100%;height:100%;min-height:inherit;border:1px solid var(--border-subtle);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:6px;margin:0;padding:12px;font:.84rem/1.55 Consolas,Courier New,monospace}.jwtInputHighlight{color:var(--text-primary);background:var(--surface-subtle);pointer-events:none;position:absolute;inset:0;overflow:hidden}.jwtInput{z-index:1;resize:none;color:#0000;caret-color:var(--text-primary);background:0 0;position:relative}.jwtInput::placeholder{color:var(--text-secondary);opacity:1}.jwtInput:focus{border-color:var(--primary-color-border);outline:0}.jwtInputEditor:has(.jwtInput:focus) .jwtInputHighlight{background:var(--surface-white)}.jwtResults[hidden]{display:none}.jwtStatus{color:var(--text-secondary);margin:12px 0 0;font-size:.84rem}.jwtStatus.isValid{color:#167a44}.jwtStatus.isInvalid{color:#a12b2b}.jwtWorkspace{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:stretch;gap:20px;display:grid}.tokenPanel,.jwtResults{min-width:0}.tokenPanel{flex-direction:column;display:flex}.jwtInput{flex:auto}.jwtResults{align-content:start;gap:16px;display:grid}.jwtVerificationArea{gap:16px;display:grid}.decodeSection,.signatureSection,.verifySection{border:1px solid var(--border-subtle);background:var(--surface-subtle);border-radius:7px;min-width:0;padding:16px}.jsonOutput{border:1px solid var(--border-subtle);background:var(--surface-white);min-height:105px;color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:5px;margin:12px 0 0;padding:11px;font:.84rem/1.55 Consolas,Courier New,monospace}.encodedLabel{color:var(--text-secondary);margin:12px 0 5px;font-size:.84rem;font-weight:600}.encodedValue,.signatureValue{overflow-wrap:anywhere;color:var(--text-primary);font:.84rem/1.45 Consolas,Courier New,monospace;display:block}.encodedValue{border:1px solid var(--border-subtle);background:var(--surface-white);border-radius:5px;padding:9px}.jwtInputHeader{color:#3168bd}.jwtInputPayload{color:#9a3c8d}.jwtInputSignature{color:#16804d}.jwtInputExtra{color:#a84f00}.signatureSection,.verifySection{margin:0}.signatureValue{border:1px solid var(--border-subtle);background:var(--surface-white);border-radius:5px;min-height:38px;margin-top:12px;padding:10px}.signatureValue.isEmpty{color:var(--text-secondary);font-family:Segoe UI,Arial,sans-serif}.verificationControls{flex-wrap:wrap;align-items:flex-end;gap:11px;margin-top:13px;display:flex}.verificationField{color:var(--text-primary);flex:420px;gap:6px;font-size:.84rem;font-weight:600;display:grid}.verificationInput{border:1px solid var(--border-subtle);width:100%;min-height:36px;color:var(--text-primary);background:var(--surface-white);border-radius:5px;padding:8px 10px;font:.84rem/1.45 Consolas,Courier New,monospace}.verificationField textarea{resize:vertical;min-height:106px}.verificationCheckbox{min-height:34px;color:var(--text-secondary);align-items:center;gap:7px;font-size:.84rem;display:flex}.verifyButton{border-color:var(--primary-color);color:#fff;background:var(--primary-color)}.verifyButton:hover{background:var(--primary-color-hover)}.verificationStatus{min-height:20px;color:var(--text-secondary);margin:10px 0 0;font-size:.84rem}.verificationStatus.isVerified{color:#167a44}.verificationStatus.isInvalid{color:#a12b2b}.jwtNotice{border-color:var(--primary-color-border);background:var(--primary-color-light);margin-top:18px;padding:13px 16px}.jwtNotice p{color:#25475d;max-width:1080px;margin:0;font-size:.84rem;line-height:1.55}.jwtSupporting{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(30px,4vw,48px);display:grid}.jwtSupporting article{padding:15px}.jwtSupporting h2{margin:0;font-size:.95rem}.jwtSupporting p{color:var(--text-secondary);margin:7px 0 0;font-size:.84rem;line-height:1.5}.jwtSupporting code{font:.84rem Consolas,Courier New,monospace}@media (width<=800px){.jwtWorkspace{grid-template-columns:1fr}.jwtInputEditor{min-height:260px}.jwtSupporting{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=700px){.jwtToolbar{flex-direction:column;align-items:flex-start}.exampleControls{justify-content:flex-start}.jwtEncoderWorkspace{grid-template-columns:1fr}.encoderJwtOutput{min-height:220px}}@media (width<=560px){.jwtInputHeading{flex-direction:column;align-items:flex-start}.actionGroup{justify-content:flex-start}.jwtSupporting{grid-template-columns:1fr}.jwtTool,.jwtEncoderTool{padding:14px}.decodeSection,.signatureSection,.verifySection,.encoderSection,.encoderOutputSection{padding:13px}.verificationControls{align-items:stretch}.verifyButton{width:100%}}