:root{--canvas:#010102;--surface-1:#0a0b0e;--surface-2:#16171d;--surface-3:#22242b;--surface-4:#2e303b;--hairline:#23252a;--hairline-strong:#32353f;--hairline-tertiary:#1b1c20;--primary:#5e6ad2;--primary-hover:#828fff;--primary-focus:#5e69d1;--ink:#f7f8f8;--ink-muted:#d0d6e0;--ink-subtle:#8a8f98;--ink-tertiary:#62666d;--state-valid:#27a644;--state-invalid:#f43f5e;--state-checking:#8a8f98;--header-accent:#ff657a;--payload-accent:#ffb86c;--signature-accent:#00f2fe;--sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono:"JetBrains Mono", "Fira Code", ui-monospace, SF Mono, Menlo, monospace;--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--ease-drawer:cubic-bezier(.32, .72, 0, 1)}*{box-sizing:border-box}html,body,#root{background-color:var(--canvas);width:100%;min-height:100vh;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}body{overflow-y:scroll}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--canvas)}::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--ink-tertiary)}.app{width:100%;max-width:1280px;padding:var(--space-xl) var(--space-lg);gap:var(--space-lg);flex-direction:column;margin:0 auto;display:flex}.app__header{padding-bottom:var(--space-md);border-bottom:1px solid var(--hairline);margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.app__header h1{font-family:var(--sans);letter-spacing:-.6px;color:var(--ink);margin:0;font-size:22px;font-weight:600}.app__column h2{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-subtle);margin-top:0;margin-bottom:var(--space-sm);font-size:13px;font-weight:600}.page{gap:var(--space-lg);grid-template-columns:1fr 1fr;align-items:start;display:grid}@media (width<=1024px){.page{grid-template-columns:1fr}}.app__column{gap:var(--space-md);flex-direction:column;display:flex}.token-input{background:var(--surface-1);border:1px solid var(--hairline);padding:var(--space-md);gap:var(--space-sm);border-radius:12px;flex-direction:column;transition:border-color .2s,box-shadow .2s;display:flex}.token-input:focus-within{border-color:var(--hairline-strong)}.token-input__toolbar{justify-content:flex-end;gap:var(--space-xs);display:flex}button{font-family:var(--sans);cursor:pointer;transition:transform .15s var(--ease-out), background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out);border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:500}button:active{transform:scale(.96)}button:focus-visible{outline:2px solid var(--primary-focus);outline-offset:2px}.button-primary{background:var(--primary);color:#fff}@media (hover:hover) and (pointer:fine){.button-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.button-primary:active{transform:scale(.96)translateY(0)}}.button-primary:active{background:var(--primary-focus);transform:scale(.96)}.button-secondary{background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink)}@media (hover:hover) and (pointer:fine){.button-secondary:hover{background:var(--surface-3);border-color:var(--hairline-strong);color:#fff;transform:translateY(-1px)}.button-secondary:active{transform:scale(.96)translateY(0)}}.button-secondary:active{background:var(--surface-4);transform:scale(.96)}.token-input__textarea{background:var(--surface-2);border:1px solid var(--hairline);width:100%;min-height:280px;color:var(--ink);font-family:var(--mono);padding:var(--space-sm);resize:vertical;border-radius:8px;outline:none;font-size:14px;line-height:1.6;transition:border-color .2s}.token-input__textarea:focus{border-color:var(--primary)}.token-input__viewer{background:var(--surface-2);border:1px solid var(--hairline);width:100%;min-height:280px;font-family:var(--mono);padding:var(--space-sm);cursor:text;word-break:break-all;white-space:pre-wrap;transition:border-color .15s var(--ease-out), background-color .15s var(--ease-out), transform .1s var(--ease-out);border-radius:8px;font-size:14px;line-height:1.6;position:relative}.token-input__viewer:active{transform:scale(.995)}@media (hover:hover) and (pointer:fine){.token-input__viewer:hover{border-color:var(--hairline-strong);background:var(--surface-3);transform:translateY(-.5px)}.token-input__viewer:active{transform:scale(.995)translateY(0)}}.token-input__viewer-edit-badge{font-family:var(--sans);color:var(--ink-subtle);border:1px solid var(--hairline);pointer-events:none;opacity:0;background:#0000004d;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:500;transition:opacity .2s;position:absolute;bottom:12px;right:12px}.token-input__viewer:hover .token-input__viewer-edit-badge{opacity:1}.jwt-part{transition:opacity .2s}.jwt-part--header{color:var(--header-accent);font-weight:500}.jwt-part--payload{color:var(--payload-accent);font-weight:500}.jwt-part--signature{color:var(--signature-accent);font-weight:500}.jwt-part--dot{color:var(--ink-subtle);font-weight:700}.validity-badge{border:1px solid #0000;border-radius:9999px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:500;display:inline-flex}.validity-badge--valid{color:var(--state-valid);background:#27a6441a;border-color:#27a64433}.validity-badge--invalid{color:var(--state-invalid);background:#f43f5e1a;border-color:#f43f5e33}.token-input__status{justify-content:space-between;align-items:center;display:flex}.token-input__error{color:var(--state-invalid);font-size:12px;font-family:var(--sans);margin-top:4px}.json-pane{background:var(--surface-1);border:1px solid var(--hairline);border-radius:12px;transition:border-color .2s;overflow:hidden}.json-pane:focus-within{border-color:var(--hairline-strong)}.json-pane__header{border-bottom:1px solid var(--hairline);background:#ffffff03;justify-content:space-between;align-items:center;padding:10px 16px;font-size:13px;font-weight:600;display:flex}.json-pane__readonly-tag{color:var(--ink-subtle);text-transform:lowercase;font-size:11px;font-weight:400}.json-pane__skeleton{background:var(--surface-1);height:200px}.json-pane__controls{align-items:center;gap:var(--space-sm);display:flex}.json-pane__error{color:var(--state-invalid);font-size:12px;font-family:var(--sans)}.json-pane__view-toggle{background:var(--surface-2);border:1px solid var(--hairline);border-radius:20px;padding:2px;display:flex}.json-pane__view-toggle button{color:var(--ink-subtle);transition:background-color .15s var(--ease-out), color .15s var(--ease-out), transform .1s var(--ease-out);background:0 0;border:none;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:500}.json-pane__view-toggle button:active{transform:scale(.95)}.json-pane__view-toggle button.active{background:var(--surface-4);color:var(--ink)}@media (hover:hover) and (pointer:fine){.json-pane__view-toggle button:hover:not(.active){color:var(--ink);background:#ffffff08}}.json-pane__copy{border:1px solid var(--hairline);color:var(--ink-subtle);transition:border-color .15s var(--ease-out), color .15s var(--ease-out), background-color .15s var(--ease-out), transform .1s var(--ease-out);background:0 0;border-radius:6px;padding:4px 10px;font-size:11px}.json-pane__copy:active{transform:scale(.95)}@media (hover:hover) and (pointer:fine){.json-pane__copy:hover{color:var(--ink);border-color:var(--hairline-strong);background:var(--surface-2);transform:translateY(-.5px)}.json-pane__copy:active{transform:scale(.95)translateY(0)}}.cm-editor{font-family:var(--mono)!important;background:0 0!important;font-size:13.5px!important}.cm-editor.cm-focused{outline:none!important}.cm-scroller{background:0 0!important}.cm-gutters{display:none!important}.cm-content{padding:var(--space-sm)!important}.json-pane__claims{padding:var(--space-sm) var(--space-md);background:0 0;min-height:200px}.claim-row{gap:var(--space-sm);border-bottom:1px solid var(--hairline-tertiary);grid-template-columns:80px 140px 1fr;align-items:center;padding:10px 0;font-size:13px;display:grid}.claim-row:last-child{border-bottom:none}.claim-row__key{font-family:var(--mono);color:var(--ink-subtle);font-weight:500}.claim-row__key--recognized{color:var(--primary-hover)}.claim-row__label{color:var(--ink-muted);font-weight:400}.claim-row__value{font-family:var(--mono);color:var(--ink);word-break:break-all}@media (width<=600px){.claim-row{grid-template-columns:1fr;align-items:flex-start;gap:4px;padding:12px 0}.claim-row__label{color:var(--ink-subtle);font-size:11px}.claim-row__value{margin-top:2px}}.expiry-badge{padding:var(--space-xxs) var(--space-xs);margin-top:calc(-1 * var(--space-xs));margin-bottom:var(--space-xs);border-radius:6px;align-self:flex-start;align-items:center;gap:6px;font-size:12px;font-weight:500;display:inline-flex}.expiry-badge--active{color:var(--state-valid);background:#27a64414;border:1px solid #27a64426}.expiry-badge--expired{color:var(--state-invalid);background:#f43f5e14;border:1px solid #f43f5e26}.signature-panel{background:var(--surface-1);border:1px solid var(--hairline);padding:var(--space-md);gap:var(--space-md);border-radius:12px;flex-direction:column;display:flex}.key-section{gap:var(--space-xs);flex-direction:column;margin-top:0;display:flex}.key-section h3{color:var(--ink);margin:0;font-size:14px;font-weight:600}.key-section__hint{color:var(--ink-subtle);margin:0;font-size:12px;line-height:1.4}.key-section__optional-tag{color:var(--ink-subtle);font-weight:400}.key-input__row{justify-content:space-between;align-items:center;display:flex}.key-input__row label{color:var(--ink-muted);font-size:12px;font-weight:600}.key-input{gap:var(--space-xxs);flex-direction:column;display:flex}.key-input input,.key-input textarea{background:var(--surface-2);border:1px solid var(--hairline);width:100%;color:var(--ink);font-family:var(--mono);border-radius:8px;outline:none;padding:10px 12px;font-size:13px;transition:border-color .2s,background-color .2s}.key-input input:focus,.key-input textarea:focus{border-color:var(--primary);background:var(--surface-3)}.key-input--pair{gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}@media (width<=600px){.key-input--pair{grid-template-columns:1fr}}.key-input--pair textarea{resize:vertical;min-height:120px}.verify-badge{justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1px solid #0000;border-radius:8px;font-size:13px;font-weight:500;transition:all .2s;display:flex}.badge--valid{color:var(--state-valid);background:#27a64414;border-color:#27a64426}.badge--invalid{color:var(--state-invalid);background:#f43f5e14;border-color:#f43f5e26}.badge--checking,.badge--idle{background:var(--surface-2);border-color:var(--hairline);color:var(--ink-subtle)}.verify-badge__message{color:var(--ink-subtle);font-size:11px;font-family:var(--mono);word-break:break-all;font-weight:400}.tabs{background:var(--surface-1);border:1px solid var(--hairline);border-radius:20px;padding:3px;display:flex}.tabs__item{color:var(--ink-subtle);transition:background-color .15s var(--ease-out), color .15s var(--ease-out), transform .1s var(--ease-out);background:0 0;border:none;border-radius:18px;padding:6px 16px;font-size:13px;font-weight:500}.tabs__item:active{transform:scale(.96)}@media (hover:hover) and (pointer:fine){.tabs__item:hover:not(.tabs__item--active){color:var(--ink);background:#ffffff08}}.tabs__item--active{background:var(--surface-3);color:#fff}.alg-select{background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink);font-family:var(--mono);cursor:pointer;transition:border-color .15s var(--ease-out), background-color .15s var(--ease-out), transform .1s var(--ease-out);border-radius:8px;outline:none;padding:8px 12px;font-size:13px}.alg-select:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine){.alg-select:hover{border-color:var(--hairline-strong);background:var(--surface-3)}}.alg-select:focus{border-color:var(--primary)}.expiry-selector{align-items:center;gap:var(--space-sm);margin-top:calc(-1 * var(--space-xs));flex-wrap:wrap;display:flex}.expiry-selector label{color:var(--ink-muted);font-size:12px;font-weight:600}.expiry-selector__datetime{background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink);font-family:var(--mono);border-radius:8px;outline:none;padding:7px 10px;font-size:12px;transition:border-color .2s}.expiry-selector__datetime:focus{border-color:var(--primary)}.encoder__alg-row{margin-bottom:var(--space-xs);justify-content:space-between;align-items:center;display:flex}.encoder__output{background:var(--surface-1);border:1px solid var(--hairline);border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.encoder__output-header{border-bottom:1px solid var(--hairline);color:var(--ink-muted);background:#ffffff03;justify-content:space-between;align-items:center;padding:10px 16px;font-size:13px;font-weight:600;display:flex}.encoder__token-text{padding:var(--space-md);font-family:var(--mono);color:var(--ink);word-break:break-all;background:var(--surface-2);min-height:100px;margin:0;font-size:14px;line-height:1.6}@keyframes page-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page{animation:page-fade-in .3s var(--ease-out) forwards}@keyframes content-fade-in{0%{opacity:0;transform:scale(.995)}to{opacity:1;transform:scale(1)}}.cm-editor,.json-pane__claims{animation:content-fade-in .2s var(--ease-out) forwards}.claim-row{opacity:0;animation:claim-fade-in .25s var(--ease-out) forwards}.claim-row:first-child{animation-delay:15ms}.claim-row:nth-child(2){animation-delay:30ms}.claim-row:nth-child(3){animation-delay:45ms}.claim-row:nth-child(4){animation-delay:60ms}.claim-row:nth-child(5){animation-delay:75ms}.claim-row:nth-child(6){animation-delay:90ms}.claim-row:nth-child(7){animation-delay:.105s}.claim-row:nth-child(8){animation-delay:.12s}.claim-row:nth-child(9){animation-delay:.135s}.claim-row:nth-child(10){animation-delay:.15s}@keyframes claim-fade-in{to{opacity:1}}