:root{color-scheme:light;--bg:#f8fafc;--bg-elevated:#fff;--editor-bg:#fff;--editor-fg:#0f172a;--surface:#fff;--surface-2:#f1f5f9;--surface-3:#e2e8f0;--border:#e2e8f0;--border-strong:#cbd5e1;--text:#0f172a;--text-muted:#64748b;--text-subtle:#94a3b8;--accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:#eef2ff;--success:#10b981;--success-soft:#ecfdf5;--danger:#ef4444;--danger-soft:#fef2f2;--warning:#f59e0b;--shadow-sm:0 1px 2px rgba(15,23,42,.05);--shadow:0 4px 24px rgba(15,23,42,.06);--shadow-lg:0 12px 40px rgba(15,23,42,.1);--radius:10px;--radius-lg:14px;--radius-xl:20px;--font-sans:"Inter",system-ui,-apple-system,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--jwt-header:#e11d48;--jwt-payload:#7c3aed;--jwt-signature:#0d9488;--shell-max:1120px;--stack-gap:1.25rem}.dark{color-scheme:dark;--bg:#0b1120;--bg-elevated:#111827;--editor-bg:#1a2332;--editor-fg:#e2e8f0;--surface:#151d2e;--surface-2:#1e293b;--surface-3:#334155;--border:#1e293b;--border-strong:#334155;--text:#f1f5f9;--text-muted:#94a3b8;--text-subtle:#64748b;--accent:#818cf8;--accent-hover:#a5b4fc;--accent-soft:rgba(99,102,241,.15);--success:#34d399;--success-soft:rgba(16,185,129,.12);--danger:#f87171;--danger-soft:rgba(239,68,68,.12);--warning:#fbbf24;--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow:0 4px 24px rgba(0,0,0,.35);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--jwt-header:#fb7185;--jwt-payload:#a78bfa;--jwt-signature:#2dd4bf}*,:after,:before{box-sizing:border-box}#__nuxt,body,html{margin:0;min-height:100%}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer}.shell{min-height:100vh;background:radial-gradient(ellipse 80% 50% at 50% -20%,color-mix(in srgb,var(--accent) 12%,transparent),transparent),var(--bg)}.shell-inner{max-width:var(--shell-max);margin:0 auto;padding:1.5rem 1.25rem 3rem}.shell-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.75rem}.shell-brand h1{margin:0;font-size:1.625rem;font-weight:700;letter-spacing:-.03em}.shell-brand p{margin:.35rem 0 0;color:var(--text-muted);font-size:.9rem}.tab-bar{flex-wrap:wrap;padding:4px;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--stack-gap)}.tab-bar,.tab-btn{display:inline-flex}.tab-btn{position:relative;align-items:center;gap:.4rem;padding:.55rem 1.15rem;border:none;border-radius:calc(var(--radius-lg) - 4px);background:transparent;color:var(--text-muted);font-size:.875rem;font-weight:600;transition:color .15s,background .15s,box-shadow .15s}.tab-btn:hover{color:var(--text)}.tab-btn.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm);font-weight:700}.tab-btn.active:after{content:"";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:1.25rem;height:3px;border-radius:2px;background:var(--accent)}.tab-btn svg{width:1rem;height:1rem;opacity:.65}.tab-btn.active svg{opacity:1;color:var(--accent)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}.card-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--border);background:var(--surface-2)}.card-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.card-body{padding:1.1rem}.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}.decode-workspace,.encode-workspace,.format-workspace{display:flex;flex-direction:column;gap:var(--stack-gap)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.toolbar-spacer{flex:1;min-width:.5rem}.field-label{display:flex;flex-direction:column;gap:.3rem;font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.field-label.inline{flex-direction:row;align-items:center;text-transform:none;letter-spacing:0;font-size:.875rem}.field-input,.field-select,textarea.field-input{padding:.55rem .75rem;background-color:var(--editor-bg);color:var(--editor-fg);border:1px solid var(--border-strong);border-radius:var(--radius);caret-color:var(--accent);-webkit-text-fill-color:var(--editor-fg);transition:border-color .15s,box-shadow .15s}.field-input:focus,.field-select:focus,textarea.field-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.field-select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding-right:2.25rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748b' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;background-size:1.1rem;cursor:pointer}.dark .field-select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06' clip-rule='evenodd'/%3E%3C/svg%3E")}.field-select option{background-color:var(--editor-bg);color:var(--editor-fg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.5rem .95rem;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.875rem;font-weight:500;transition:background .15s,border-color .15s,transform .1s}.btn:hover:not(:disabled){background:var(--surface-2)}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{border-color:transparent;background:transparent;color:var(--text-muted)}.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text)}.btn-sm{padding:.35rem .7rem;font-size:.8rem}.alert{padding:.65rem .85rem;border-radius:var(--radius);font-size:.85rem}.alert-error{background:var(--danger-soft);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 25%,transparent)}.error-text{color:var(--danger);font-size:.8rem;margin-top:.35rem}.hint-text{color:var(--text-muted);font-size:.8rem}.grid-decode,.grid-payload-split{display:grid;gap:var(--stack-gap)}.grid-payload-split{align-items:start}.grid-payload-split>*{min-width:0}@media(min-width:960px){.grid-payload-split{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}.grid-format-split{display:grid;gap:var(--stack-gap);align-items:stretch}.grid-format-split>*{min-width:0}@media(min-width:960px){.grid-format-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 11rem)}.format-workspace .grid-format-split>.card{display:flex;flex-direction:column;min-height:100%}.format-workspace .grid-format-split .card-body{flex:1;display:flex;flex-direction:column;min-height:0}.format-workspace .format-input{flex:1;min-height:28rem;height:100%;resize:vertical}.format-workspace .json-tree-viewer{flex:1;min-height:28rem}}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--border);background:var(--surface-2);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.panel-body{padding:1.1rem}.json-editor,textarea.key-textarea{width:100%;min-height:120px;padding:.75rem;font-family:var(--font-mono);font-size:.8rem;line-height:1.5;resize:vertical;border:1px solid var(--border-strong);border-radius:var(--radius);background-color:var(--editor-bg);color:var(--editor-fg);caret-color:var(--accent);-webkit-text-fill-color:var(--editor-fg)}.json-editor:focus,textarea.key-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.field-input::-moz-placeholder,.json-editor::-moz-placeholder,textarea.key-textarea::-moz-placeholder{color:var(--text-subtle);opacity:1}.field-input::placeholder,.json-editor::placeholder,textarea.key-textarea::placeholder{color:var(--text-subtle);opacity:1}.json-editor.invalid{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}.json-readonly{margin:0;padding:.65rem;border:1px solid var(--border-strong);border-radius:var(--radius);font-family:var(--font-mono);font-size:.78rem;line-height:1.45;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:var(--editor-fg);background-color:var(--editor-bg);-webkit-user-select:text;-moz-user-select:text;user-select:text}.panel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}