:root{--bg: #f8f9fa;--surface: #ffffff;--border: #dee2e6;--text: #212529;--text-soft: #6c757d;--accent: #0d6efd;--accent-dark: #0b5ed7;--radius: 6px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono: "SF Mono", "Fira Code", "Cascadia Code", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6}.app{max-width:720px;margin:0 auto;padding:2rem 1.5rem}header{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}header h1{font-size:1.4rem;font-weight:600;margin-bottom:.25rem}header p{color:var(--text-soft);font-size:.875rem}.demo{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1rem}.demo h2{font-size:1rem;font-weight:600;margin-bottom:.4rem}.demo p{color:var(--text-soft);font-size:.875rem;margin-bottom:1rem}code{background:#f1f3f5;padding:.1em .35em;border-radius:3px;font-size:.8em;font-family:var(--mono)}button{background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:.45rem 1rem;font-size:.875rem;font-family:var(--font);cursor:pointer}button:hover:not(:disabled){background:var(--accent-dark)}button:disabled{opacity:.5;cursor:not-allowed}form{display:flex;gap:.5rem;margin-bottom:.75rem}input{flex:1;border:1px solid var(--border);border-radius:var(--radius);padding:.45rem .75rem;font-size:.875rem;font-family:var(--font);background:var(--bg)}input:focus{outline:none;border-color:var(--accent)}pre{background:#f1f3f5;border-radius:var(--radius);padding:.75rem 1rem;font-size:.8rem;font-family:var(--mono);overflow-x:auto;margin:.75rem 0}table{width:100%;border-collapse:collapse;margin-top:.75rem;font-size:.875rem}th,td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--border)}th{font-weight:600;color:var(--text-soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}.auth-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1rem;padding:.5rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem}.auth-provider{color:var(--text-soft);font-size:.85em}.auth-soft{color:var(--text-soft)}.auth-link{color:var(--accent);text-decoration:none;font-weight:600;flex-shrink:0}.auth-link:hover{color:var(--accent-dark);text-decoration:underline}.auth-hint{color:#92400e!important;background:#fff8e1;border:1px solid #ffe082;border-radius:var(--radius);padding:.4rem .75rem;font-size:.8rem!important;margin-bottom:.75rem!important}.role-badge{display:inline-block;background:#e7f1ff;color:#0b5ed7;border:1px solid #b6d4fe;border-radius:999px;padding:.1rem .6rem;margin:0 .3rem .3rem 0;font-size:.78rem;font-weight:600}.claims summary{cursor:pointer;font-size:.82rem;color:var(--text-soft);margin:.5rem 0}.inspector-note{font-size:.8rem!important;color:var(--text-soft)!important;margin-top:.75rem}.connecting-banner{display:flex;align-items:center;gap:.6rem;background:#fff8e1;border:1px solid #ffe082;border-radius:var(--radius);padding:.6rem 1rem;font-size:.875rem;color:#5d4037;margin-bottom:1rem}.connecting-dot{width:8px;height:8px;border-radius:50%;background:#f59e0b;flex-shrink:0;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}