*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0f1117;--bg-secondary: #1a1d27;--bg-card: #1e2130;--bg-hover: #252a3a;--border: #2d3748;--border-active: #4a5568;--text-primary: #f0f4f8;--text-muted: #a0aec0;--text-dim: #718096;--accent-blue: #4299e1;--accent-purple: #9f7aea;--accent-green: #68d391;--accent-orange: #f6ad55;--accent-red: #fc8181;--accent-teal: #4fd1c7;--token-header: #b794f4;--token-payload: #68d391;--token-sig: #fc8181}html,body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}h1,h2,h3,h4{font-weight:600;line-height:1.3}code,pre{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.85em}a{color:var(--accent-blue);text-decoration:none}a:hover{text-decoration:underline}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:600}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;border:none;transition:opacity .15s,transform .1s}.btn:hover{opacity:.9;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,#3182ce,#805ad5);color:#fff}.btn-secondary{background:var(--bg-hover);color:var(--text-primary);border:1px solid var(--border-active)}.btn-success{background:linear-gradient(135deg,#276749,#2d6a4f);color:#fff}.btn-danger{background:linear-gradient(135deg,#822727,#742a2a);color:#fff}.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:600}.tag-blue{background:#1a365d;color:#90cdf4}.tag-purple{background:#322659;color:#d6bcfa}.tag-green{background:#1c4532;color:#9ae6b4}.tag-orange{background:#652b19;color:#fbd38d}.tag-red{background:#63171b;color:#feb2b2}.tag-teal{background:#1d4044;color:#81e6d9}input,select,textarea{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);border-radius:8px;padding:.5rem .75rem;font-size:.9rem;outline:none;transition:border-color .2s}input:focus,select:focus,textarea:focus{border-color:var(--accent-blue)}.scrollbar-thin{scrollbar-width:thin;scrollbar-color:var(--border-active) transparent}pre.code-block{background:#0d1117;border:1px solid var(--border);border-radius:8px;padding:1rem;overflow-x:auto;font-size:.8rem;line-height:1.6;color:#e2e8f0}.flow-step{display:flex;align-items:flex-start;gap:1rem;padding:1rem;border-radius:10px;border:1px solid var(--border);background:var(--bg-secondary);transition:all .3s ease}.flow-step.active{border-color:var(--accent-blue);background:#4299e114;box-shadow:0 0 0 1px #4299e133}.flow-step.completed{border-color:var(--accent-green);background:#68d3910d;opacity:.75}.flow-step .step-number{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0;background:var(--border);color:var(--text-muted)}.flow-step.active .step-number{background:var(--accent-blue);color:#fff}.flow-step.completed .step-number{background:var(--accent-green);color:#1a202c}.pulse{animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.slide-in{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}