*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh}.app{max-width:1400px;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:3rem}header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}header p{color:#94a3b8;font-size:1.1rem}.providers-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}@media (max-width: 900px){.providers-grid{grid-template-columns:1fr}}.provider-card{background:#1e293b;border-radius:1rem;padding:1.5rem;border:1px solid #334155}.provider-card h2{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;font-size:1.5rem}.provider-card.trinsic h2{color:#3b82f6}.provider-card.hopae h2{color:#10b981}.badge{font-size:.75rem;padding:.25rem .5rem;border-radius:.25rem;font-weight:500}.badge.trinsic{background:#3b82f633;color:#60a5fa}.badge.hopae{background:#10b98133;color:#34d399}.provider-description{color:#94a3b8;margin-bottom:1.5rem;line-height:1.6}.action-buttons{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}button{padding:.75rem 1.5rem;border-radius:.5rem;border:none;font-weight:600;cursor:pointer;transition:all .2s;font-size:.9rem}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}button.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #3b82f666}button.secondary{background:#334155;color:#e2e8f0}button.secondary:hover:not(:disabled){background:#475569}button.success{background:linear-gradient(135deg,#10b981,#059669);color:#fff}button.success:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #10b98166}.status-indicator{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.75rem;border-radius:.5rem;background:#0f172a}.status-dot{width:10px;height:10px;border-radius:50%}.status-dot.pending{background:#f59e0b}.status-dot.success{background:#10b981}.status-dot.error{background:#ef4444}.status-dot.idle{background:#475569}.payload-viewer{background:#0f172a;border-radius:.75rem;margin-top:1rem;overflow:hidden}.payload-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#1e293b;border-bottom:1px solid #334155}.payload-header h3{font-size:.9rem;color:#94a3b8}.payload-tabs{display:flex;gap:.5rem}.payload-tab{padding:.25rem .75rem;font-size:.8rem;border-radius:.25rem;background:transparent;color:#64748b;border:1px solid transparent}.payload-tab.active{background:#334155;color:#e2e8f0;border-color:#475569}.payload-content{padding:1rem;max-height:400px;overflow:auto}.payload-content pre{font-family:JetBrains Mono,Fira Code,monospace;font-size:.8rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}.json-key{color:#7dd3fc}.json-string{color:#86efac}.json-number{color:#fcd34d}.json-boolean{color:#c4b5fd}.json-null{color:#f87171}.flow-diagram{background:#0f172a;border-radius:.75rem;padding:1.5rem;margin-top:2rem}.flow-diagram h3{margin-bottom:1rem;color:#94a3b8}.flow-steps{display:flex;flex-direction:column;gap:.75rem}.flow-step{display:flex;align-items:flex-start;gap:1rem;padding:1rem;background:#1e293b;border-radius:.5rem;border-left:3px solid #334155;transition:all .3s}.flow-step.active{border-left-color:#3b82f6;background:#1e3a5f}.flow-step.completed{border-left-color:#10b981}.flow-step-number{width:28px;height:28px;border-radius:50%;background:#334155;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;flex-shrink:0}.flow-step.active .flow-step-number{background:#3b82f6}.flow-step.completed .flow-step-number{background:#10b981}.flow-step-content h4{font-size:.95rem;margin-bottom:.25rem}.flow-step-content p{font-size:.85rem;color:#94a3b8}.user-profile{background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:1rem;padding:2rem;margin-top:2rem;border:1px solid #334155}.user-profile h3{margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem}.user-profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.profile-field{background:#1e293b;padding:1rem;border-radius:.5rem}.profile-field label{display:block;font-size:.75rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.profile-field value{display:block;font-size:1rem;color:#e2e8f0}.comparison-table{width:100%;margin-top:2rem;border-collapse:collapse}.comparison-table th,.comparison-table td{padding:1rem;text-align:left;border-bottom:1px solid #334155}.comparison-table th{background:#1e293b;color:#94a3b8;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}.comparison-table td{background:#0f172a}.loading-spinner{width:20px;height:20px;border:2px solid #334155;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite;display:inline-block;margin-right:.5rem}@keyframes spin{to{transform:rotate(360deg)}}.copy-button{padding:.25rem .5rem;font-size:.75rem;background:#334155;border-radius:.25rem}.copy-button:hover{background:#475569}.tabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid #334155;padding-bottom:.5rem}.tab{padding:.5rem 1rem .75rem;background:transparent;color:#64748b;border:none;border-bottom:2px solid transparent;margin-bottom:-.5rem}.tab.active{color:#e2e8f0;border-bottom-color:#3b82f6}.mock-protected-content{background:linear-gradient(135deg,#1e3a5f,#1e293b);border:2px solid #3b82f6;border-radius:1rem;padding:2rem;margin-top:2rem;text-align:center}.mock-protected-content h3{color:#60a5fa;margin-bottom:1rem}.mock-protected-content .protected-data{background:#0f172a;padding:1.5rem;border-radius:.5rem;margin-top:1rem}.verification-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.verification-modal{background:#1e293b;border-radius:1rem;width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;border:1px solid #334155;box-shadow:0 25px 50px -12px #00000080}.verification-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #334155}.verification-modal-header h3{margin:0;color:#e2e8f0;font-size:1.25rem}.close-button{background:transparent;border:none;color:#94a3b8;font-size:1.75rem;cursor:pointer;padding:0;line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:.375rem;transition:all .2s}.close-button:hover{background:#334155;color:#e2e8f0}.verification-modal-body{flex:1;position:relative;min-height:500px;background:#0f172a}.verification-modal-body iframe{width:100%;height:100%;min-height:500px;border:none;background:#fff}.iframe-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1rem;color:#94a3b8}.iframe-loading .loading-spinner{width:32px;height:32px}.iframe-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1rem;color:#94a3b8;text-align:center;padding:2rem}.iframe-error p{margin:0}.iframe-error button{margin-top:.5rem}.verification-modal-footer{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-top:1px solid #334155;background:#1e293b}.verification-modal-footer p{color:#94a3b8;font-size:.9rem;margin:0}@media (max-width: 600px){.verification-modal{max-height:100vh;border-radius:0}.verification-modal-body,.verification-modal-body iframe{min-height:400px}}.provider-selector{margin-bottom:1rem}.provider-selector-label{display:block;font-size:.85rem;color:#94a3b8;margin-bottom:.75rem;font-weight:500}.provider-selector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.provider-selector-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:1rem .75rem;background:#0f172a;border:2px solid #334155;border-radius:.75rem;cursor:pointer;transition:all .2s ease;text-align:center;min-height:120px}.provider-selector-card:hover:not(.disabled){border-color:#10b981;background:#1e293b;transform:translateY(-2px)}.provider-selector-card.selected{border-color:#10b981;background:#10b9811a;box-shadow:0 0 0 1px #10b981}.provider-selector-card.disabled{opacity:.5;cursor:not-allowed}.provider-card-logo{width:48px;height:48px;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:.5rem}.provider-card-logo img{max-width:100%;max-height:100%;object-fit:contain}.provider-logo-fallback{width:48px;height:48px;background:linear-gradient(135deg,#10b981,#059669);border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;color:#fff}.provider-logo-fallback.hidden{display:none}.provider-card-info{flex:1;display:flex;flex-direction:column;gap:.25rem;width:100%}.provider-card-name{font-weight:600;font-size:.85rem;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.provider-card-meta{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}.provider-countries{font-size:1rem;line-height:1}.provider-loa-badge{font-size:.65rem;padding:.15rem .35rem;background:#10b98133;color:#34d399;border-radius:.25rem;font-weight:600}.provider-flow-types{display:flex;gap:.25rem;justify-content:center;flex-wrap:wrap;margin-top:.25rem}.flow-type-tag{font-size:.6rem;padding:.1rem .3rem;border-radius:.2rem;background:#334155;color:#94a3b8;text-transform:uppercase;font-weight:500}.flow-type-tag.qr{background:#3b82f633;color:#60a5fa}.flow-type-tag.redirect{background:#a855f733;color:#c084fc}.flow-type-tag.push{background:#fbbf2433;color:#fbbf24}.provider-selected-check{position:absolute;top:.5rem;right:.5rem;width:20px;height:20px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.provider-action-badge{position:absolute;top:.5rem;left:.5rem;width:18px;height:18px;background:#f59e0b;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#0f172a}.provider-selector-loading,.provider-selector-empty{padding:1.5rem;text-align:center;color:#64748b;background:#0f172a;border-radius:.75rem;border:1px dashed #334155}.provider-selector-loading{display:flex;align-items:center;justify-content:center;gap:.75rem}.provider-selector-empty{color:#f87171}@media (max-width: 500px){.provider-selector-grid{grid-template-columns:repeat(2,1fr)}}