:root{--bg: #1e1e1e;--panel: #252526;--border: #3c3c3c;--text: #d4d4d4;--muted: #9d9d9d;--dim: #6a6a6a;--soft: #b0b0b0;--accent: #0e7490;--accent-hover: #0891b2;--error: #f87171;--ok: #4ade80;--warn: #fbbf24;--tok-key: #9cdcfe;--tok-string: #ce9178;--tok-number: #b5cea8;--tok-boolean: #569cd6;--tok-null: #808080;--jwt-header: #f472b6;--jwt-payload: #c084fc;--jwt-signature: #2dd4bf}:root[data-theme=light]{--bg: #ffffff;--panel: #f4f4f5;--border: #d4d4d8;--text: #1e1e1e;--muted: #52525b;--dim: #71717a;--soft: #3f3f46;--accent: #0e7490;--accent-hover: #0891b2;--error: #dc2626;--ok: #15803d;--warn: #b45309;--tok-key: #0451a5;--tok-string: #a31515;--tok-number: #098658;--tok-boolean: #0000ff;--tok-null: #737373;--jwt-header: #be185d;--jwt-payload: #7c3aed;--jwt-signature: #0f766e}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}.hero{min-height:100dvh;display:flex;flex-direction:column}header{padding:.75rem 1.25rem;border-bottom:1px solid var(--border);background:var(--panel)}.header-inner{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:1.5rem;max-width:1600px;margin:0 auto}.brand{display:inline-flex;align-items:baseline;gap:.1rem;font-family:SF Mono,Consolas,Menlo,monospace;font-size:1.05rem;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap}.brand-mark{color:var(--jwt-signature)}.brand:hover{color:var(--accent-hover)}body:not([data-page=home]) .brand-word{display:none}body[data-page=home] .brand{margin-right:auto}.nav-toggle{display:none;align-items:center;gap:.5rem;width:auto;background:transparent;border:1px solid var(--border);color:var(--text);padding:.4rem .7rem;font-size:1rem;line-height:1}.nav-toggle:hover{background:var(--border)}.nav-toggle-bars{font-size:1.05rem}.nav-toggle-current{font-size:.9rem;font-weight:500}.nav-toggle[aria-expanded=true] .nav-toggle-current{display:none}nav{display:flex;gap:.5rem;margin-right:auto}nav a{color:var(--text);text-decoration:none;padding:.4rem .8rem;border-radius:6px;font-size:.9rem}nav a:hover{background:var(--border)}nav a.active{background:var(--accent);color:#fff}.settings-wrap{position:relative}.gear-btn{width:auto;background:transparent;border:1px solid var(--border);color:var(--text);padding:.4rem .6rem;font-size:1rem;line-height:1}.gear-btn:hover{background:var(--border)}.settings-panel{position:absolute;top:calc(100% + .5rem);right:0;display:flex;flex-direction:column;align-items:stretch;gap:.6rem;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:.65rem .75rem;box-shadow:0 8px 20px #00000073;white-space:nowrap;z-index:10}.settings-panel[hidden]{display:none}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.settings-panel label{font-size:.8rem;color:var(--muted)}.settings-panel input[type=number]{width:3rem;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.3rem .4rem;font-size:.85rem;outline:none}.settings-panel input[type=number]:focus{border-color:var(--accent)}.settings-panel input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--accent)}.settings-label-group{display:flex;align-items:center;gap:.35rem}.info-wrap{position:relative;display:flex}.info-btn{width:auto;background:transparent;border:none;color:var(--muted);padding:0;font-size:.95rem;line-height:1;cursor:pointer}.info-btn:hover{color:var(--text)}.info-popup{position:absolute;top:calc(100% + .4rem);right:0;width:200px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.55rem .65rem;font-size:.75rem;line-height:1.4;color:var(--text);white-space:normal;box-shadow:0 8px 20px #00000073;z-index:20}.info-popup[hidden]{display:none}.page-intro{max-width:1600px;margin:.75rem auto 0;padding:0 1.25rem;font-size:.8rem;font-weight:400;color:var(--muted)}main{flex:1;display:flex;min-height:0;width:100%;max-width:1600px;margin:0 auto;padding:1rem;gap:1rem}.pane{flex:1;display:flex;flex-direction:column;min-width:0}.pane label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.4rem}textarea{flex:1;resize:none;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.75rem;font-family:SF Mono,Consolas,Menlo,monospace;font-size:.85rem;line-height:1.5;outline:none}textarea:focus{border-color:var(--accent)}textarea.error{border-color:var(--error)}.output-pane{flex:1;margin:0;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.75rem;font-family:SF Mono,Consolas,Menlo,monospace;font-size:.85rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;overflow-y:auto;outline:none}.output-pane:focus{border-color:var(--accent)}.output-pane:empty:before{content:attr(data-placeholder);color:var(--dim)}.tok-key{color:var(--tok-key)}.tok-string{color:var(--tok-string)}.tok-number{color:var(--tok-number)}.tok-boolean{color:var(--tok-boolean)}.tok-null{color:var(--tok-null)}.jwt-header{color:var(--jwt-header)}.jwt-payload{color:var(--jwt-payload)}.jwt-signature{color:var(--jwt-signature)}.jwt-dot{color:var(--dim)}.bracket-match{background:#ffd70059;outline:1px solid rgba(255,215,0,.6);border-radius:2px}.editor-wrap,.field-wrap{position:relative;flex:1;min-height:0;display:flex}.input-highlight{position:absolute;inset:0;margin:0;pointer-events:none;z-index:0}.input-textarea{position:absolute;inset:0;z-index:1;background:transparent;color:transparent;caret-color:var(--text)}.input-textarea::placeholder{color:var(--dim);opacity:1}.copy-btn{position:absolute;top:.5rem;right:.5rem;z-index:2;width:auto;padding:.3rem .45rem;background:var(--panel);border:1px solid var(--border);color:var(--text);font-size:.85rem;line-height:1;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s ease}.editor-wrap:hover .copy-btn,.field-wrap:hover .copy-btn,.copy-btn:focus-visible{opacity:1;pointer-events:auto}.copy-btn:hover{background:var(--border)}.copy-btn.copied{border-color:var(--accent);color:var(--accent)}.controls{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.25rem;width:140px;flex-shrink:0;padding-top:1.75rem}.controls-buttons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;width:100%}.ad-slot{display:flex;justify-content:center}.ad-placeholder{width:140px;height:280px;max-width:100%;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border);border-radius:8px}.ad-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}.ad-edge{display:none;position:fixed;top:50%;transform:translateY(-50%);z-index:5}.ad-edge-left{left:40px}.ad-edge-right{right:40px}.ad-placeholder-edge{width:160px;height:600px}.ad-inline{display:none;justify-content:center;width:100%;max-width:1000px;margin:0 auto 2rem;padding:0 1.25rem}.ad-inline .ad-placeholder{width:100%;max-width:728px;height:90px}@media(min-width:721px)and (max-width:1999px){body[data-page=jwt] .ad-inline{display:flex}}button{width:100%;padding:.6rem .75rem;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer}button:hover{background:var(--accent-hover)}button.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}#swap{font-size:1.1rem;line-height:1}button.secondary:hover{background:var(--border)}.status{font-size:.75rem;color:var(--error);text-align:center;min-height:1rem}.jwt-main{flex-direction:column;gap:0}.jwt-tabs{display:flex;gap:.4rem;align-self:center;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.3rem}.jwt-tab{width:auto;background:transparent;color:var(--muted);padding:.45rem 1.4rem;border-radius:7px}.jwt-tab:hover{background:var(--border)}.jwt-tab.active{background:var(--accent);color:#fff}.jwt-subtitle{text-align:center;color:var(--muted);font-size:.85rem;margin:.85rem 0 1.5rem}.jwt-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.jwt-col{display:flex;flex-direction:column;gap:1rem;min-width:0}.jwt-field{display:flex;flex-direction:column;min-width:0}.jwt-field-grow{flex:1}.jwt-field>label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.4rem}.jwt-short,.jwt-short-editor{flex:none;min-height:150px}.jwt-editor,.jwt-tall{flex:1;min-height:150px}.jwt-key-field{margin-top:1.25rem}.jwt-key-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.4rem}.jwt-key-head>label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.jwt-hint{text-transform:none;letter-spacing:0;color:var(--dim)}.jwt-key{flex:none;height:224px;width:100%;resize:vertical}.sig-status{font-size:.78rem;color:var(--muted)}.sig-ok{color:var(--ok)}.sig-bad{color:var(--error)}.sig-warn{color:var(--warn)}.sig-pending{color:var(--muted)}.jwt-claims{margin-top:.5rem;display:flex;flex-direction:column;gap:.2rem;font-size:.75rem;font-family:SF Mono,Consolas,Menlo,monospace}.jwt-claims:empty{margin-top:0}.jwt-claim{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}.jwt-claim-key{color:var(--tok-key);min-width:2.5rem}.jwt-claim-date{color:var(--muted)}.faq{max-width:820px;margin:2.5rem auto 3rem;padding:0 1.25rem}.faq h2{font-size:1.1rem;font-weight:600;margin:0 0 .75rem}.faq>p{color:var(--soft);font-size:.9rem;line-height:1.6;margin:0 0 1.25rem}.faq details{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;margin-bottom:.6rem}.faq summary{cursor:pointer;font-weight:500;font-size:.9rem}.faq details[open] summary{margin-bottom:.5rem}.faq details p{margin:0;color:var(--soft);font-size:.88rem;line-height:1.6}.faq code{background:var(--bg);padding:.1rem .3rem;border-radius:4px;font-family:SF Mono,Consolas,Menlo,monospace;font-size:.85em}.home-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:1000px;margin:0 auto;padding:2.5rem 1.25rem;gap:.5rem}.home-title{font-size:2rem;font-weight:700;margin:0}.home-tagline{max-width:640px;color:var(--muted);font-size:1rem;line-height:1.6;margin:0 0 1.75rem}.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;width:100%}.tool-card{display:flex;flex-direction:column;text-align:left;gap:.5rem;padding:1.25rem 1.35rem;background:var(--panel);border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);transition:border-color .15s ease,transform .15s ease}.tool-card:hover{border-color:var(--accent);transform:translateY(-2px)}.tool-card h2{margin:0;font-size:1.05rem;font-weight:600}.tool-card p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.55}.tool-card-cta{margin-top:auto;color:var(--accent-hover);font-size:.85rem;font-weight:500}.related-tools{margin-top:1.75rem;border-top:1px solid var(--border);padding-top:1.25rem}.related-tools h2{font-size:1rem;margin:0 0 .6rem}.related-tools ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}.related-tools a{color:var(--accent-hover);text-decoration:none;font-size:.9rem}.related-tools a:hover{text-decoration:underline}@media(max-width:720px){.nav-toggle{display:inline-flex;position:relative;z-index:60;margin-right:auto}.nav-toggle[aria-expanded=true]{position:fixed;top:.65rem;right:1rem;margin-right:0}nav{display:none}nav.open{display:flex;position:fixed;inset:0;z-index:50;flex-direction:column;justify-content:center;gap:.6rem;margin-right:0;padding:5rem 1.5rem 2rem;background:var(--bg)}nav.open a{font-size:1.15rem;text-align:center;padding:1rem 1.25rem;border:1px solid var(--border);border-radius:10px}main{flex-direction:column}.controls{width:100%;padding-top:0}.controls-buttons{width:100%;flex-direction:row}.ad-slot{display:none}.ad-inline{display:flex}.jwt-grid{grid-template-columns:1fr}.pane{flex:none}.pane .editor-wrap,.pane .field-wrap{flex:none;height:44vh;height:44dvh}}@media(min-width:2000px){.ad-slot{display:none}.ad-edge{display:flex}}@media(max-width:420px){header{gap:.5rem;padding:.6rem .85rem}nav{gap:.3rem}nav a{padding:.35rem .55rem;font-size:.8rem}.gear-btn{padding:.35rem .5rem;font-size:.9rem}}