:root{--tool-accent: #0f0f0f;--tool-accent-hover: #333;--tool-bg: #ffffff;--tool-bg-off: #f8f9fa;--tool-bg-secondary: #f3f4f6;--tool-bg-tertiary: #e5e7eb;--tool-text: #1f2937;--tool-text-muted: #6b7280;--tool-text-faint: #9ca3af;--tool-border: #e5e7eb;--tool-border-dark: #d1d5db;--tool-danger: #ef4444;--tool-success: #22c55e;--tool-warning: #f59e0b;--tool-info: #3b82f6;--jwt-header: #22c55e;--jwt-payload: #3b82f6;--jwt-sig: #f59e0b}html.theme-dark{--tool-bg: #0a0a0a;--tool-bg-off: #111111;--tool-bg-secondary: #1a1a1a;--tool-bg-tertiary: #222222;--tool-text: #e0e0e0;--tool-text-muted: #9ca3af;--tool-text-faint: #6b7280;--tool-border: #272727;--tool-border-dark: #333333}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Anek Devanagari,sans-serif;background:var(--tool-bg);color:var(--tool-text);min-height:100vh;font-size:14px}.jwt-main{width:100%;max-width:1600px;margin:0 auto;padding:20px 16px 60px}.page-intro{margin-bottom:24px}.page-intro h1{font-size:20px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}.page-intro h1 img{width:24px;height:24px}.page-intro p{font-size:14px;color:var(--tool-text-muted);line-height:1.5}.privacy-banner{background:linear-gradient(135deg,#22c55e10,#3b82f610);border:1px solid var(--tool-success);border-radius:8px;padding:12px 16px;margin-bottom:20px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tool-text)}.privacy-banner svg{width:18px;height:18px;flex-shrink:0}html.theme-dark .privacy-banner{background:linear-gradient(135deg,#22c55e08,#3b82f608)}.input-section{margin-bottom:24px}.input-label{font-size:11px;font-weight:700;color:var(--tool-text-faint);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:block}.jwt-input{width:100%;min-height:100px;padding:14px;border:1px solid var(--tool-border-dark);border-radius:8px;background:var(--tool-bg);color:var(--tool-text);font-family:SF Mono,Fira Code,Consolas,monospace;font-size:12px;resize:vertical;transition:border-color .15s,box-shadow .15s}.jwt-input:focus{outline:none;border-color:var(--tool-accent);box-shadow:0 0 0 3px #0000000d}.jwt-input::placeholder{color:var(--tool-text-faint)}.verify-section{background:var(--tool-bg-off);border:1px solid var(--tool-border);border-radius:10px;padding:16px;margin-bottom:24px}.verify-grid{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start}@media(max-width:640px){.verify-grid{grid-template-columns:1fr}}.algo-select{padding:8px 12px;border:1px solid var(--tool-border-dark);border-radius:6px;background:var(--tool-bg);color:var(--tool-text);font-size:13px;font-family:inherit;cursor:pointer}.algo-select:focus{outline:none;border-color:var(--tool-accent)}.secret-input{width:100%;padding:8px 12px;border:1px solid var(--tool-border-dark);border-radius:6px;background:var(--tool-bg);color:var(--tool-text);font-family:monospace;font-size:12px}.secret-input:focus{outline:none;border-color:var(--tool-accent)}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:6px;border:1.5px solid var(--tool-border-dark);background:var(--tool-bg);color:var(--tool-text);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:inherit}.btn:hover{background:var(--tool-bg-secondary);border-color:var(--tool-accent)}.btn:focus{outline:2px solid var(--tool-accent);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--tool-accent);border-color:var(--tool-accent);color:#fff}.btn-primary:hover{background:var(--tool-accent-hover);border-color:var(--tool-accent-hover)}.btn-sm{padding:5px 10px;font-size:12px}.jwt-output{display:none}.jwt-output.visible{display:block}.output-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}@media(max-width:900px){.output-grid{grid-template-columns:1fr}}.jwt-part{background:var(--tool-bg);border:1px solid var(--tool-border);border-radius:10px;overflow:hidden}.jwt-part-header{padding:10px 14px;border-bottom:1px solid var(--tool-border);display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.jwt-part-header.header{background:var(--jwt-header);color:#fff;border-color:var(--jwt-header)}.jwt-part-header.payload{background:var(--jwt-payload);color:#fff;border-color:var(--jwt-payload)}.jwt-part-header.signature{background:var(--jwt-sig);color:#fff;border-color:var(--jwt-sig)}.jwt-part-badge{font-size:9px;padding:2px 6px;background:#fff3;border-radius:4px;text-transform:uppercase}.jwt-part-body{padding:14px;max-height:400px;overflow:auto}.json-code{font-family:SF Mono,Fira Code,Consolas,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-all}.json-key{color:#9333ea}.json-string{color:#22c55e}.json-number{color:#3b82f6}.json-boolean{color:#f59e0b}.json-null{color:#6b7280}html.theme-dark .json-key{color:#c084fc}html.theme-dark .json-string{color:#86efac}html.theme-dark .json-number{color:#7dd3fc}html.theme-dark .json-boolean{color:#fcd34d}.claims-section{background:var(--tool-bg);border:1px solid var(--tool-border);border-radius:10px;margin-bottom:24px;overflow:hidden}.claims-header{padding:12px 14px;border-bottom:1px solid var(--tool-border);background:var(--tool-bg-off);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.claims-table{width:100%;border-collapse:collapse;font-size:13px}.claims-table th,.claims-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--tool-border)}.claims-table th{font-weight:600;color:var(--tool-text-faint);font-size:10px;text-transform:uppercase;letter-spacing:.3px;background:var(--tool-bg-secondary);width:160px}.claims-table tr:last-child td,.claims-table tr:last-child th{border-bottom:none}.claims-table td{font-family:monospace;font-size:12px}.claim-name{font-weight:600}.claim-standard{color:var(--tool-success)}.claim-custom{color:var(--tool-warning)}.claim-sensitive{color:var(--tool-danger)}.claim-value{word-break:break-all}.claim-value.masked{color:var(--tool-text-faint);font-style:italic}.timestamp-convert{font-size:11px;color:var(--tool-text-muted);margin-top:2px}.status-section{margin-bottom:24px}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.status-card{background:var(--tool-bg);border:1px solid var(--tool-border);border-radius:8px;padding:14px}.status-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tool-text-faint);margin-bottom:6px}.status-value{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}.status-dot{width:8px;height:8px;border-radius:50%}.status-valid .status-dot{background:var(--tool-success)}.status-invalid .status-dot{background:var(--tool-danger)}.status-warning .status-dot{background:var(--tool-warning)}.status-neutral .status-dot{background:var(--tool-text-faint)}.status-valid{color:var(--tool-success)}.status-invalid{color:var(--tool-danger)}.status-warning{color:var(--tool-warning)}.security-section{background:var(--tool-bg);border:1px solid var(--tool-border);border-radius:10px;margin-bottom:24px;overflow:hidden}.security-header{padding:12px 14px;border-bottom:1px solid var(--tool-border);background:var(--tool-bg-off);font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px}.security-score{margin-left:auto;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:700}.score-high{background:#22c55e20;color:var(--tool-success)}.score-medium{background:#f59e0b20;color:var(--tool-warning)}.score-low{background:#ef444420;color:var(--tool-danger)}.security-list{padding:0;margin:0;list-style:none}.security-item{padding:10px 14px;border-bottom:1px solid var(--tool-border);display:flex;align-items:flex-start;gap:10px;font-size:13px}.security-item:last-child{border-bottom:none}.security-icon{width:18px;height:18px;flex-shrink:0;margin-top:1px}.security-icon.danger{color:var(--tool-danger)}.security-icon.warning{color:var(--tool-warning)}.security-icon.info{color:var(--tool-info)}.security-icon.success{color:var(--tool-success)}.action-bar{display:flex;gap:8px;flex-wrap:wrap}.error-banner{background:#ef444420;border:1px solid var(--tool-danger);border-radius:8px;padding:12px 16px;margin-bottom:20px;display:none;font-size:13px;color:var(--tool-danger)}.error-banner.visible{display:block}.empty-state{text-align:center;padding:40px;color:var(--tool-text-muted)}.empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:.4}.compare-section{display:none;margin-top:24px;padding-top:24px;border-top:1px solid var(--tool-border)}.compare-section.visible{display:block}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:640px){.compare-grid{grid-template-columns:1fr}}.diff-added{background:#22c55e10}.diff-removed{background:#ef444410}.diff-changed{background:#f59e0b10}.hidden{display:none!important}