*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f8fafc;color:#1e293b;line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:#0f172a;color:#fff;padding:0 24px;border-bottom:1px solid #1e293b}.header-inner{max-width:900px;margin:0 auto;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.header-brand{display:flex;align-items:center;gap:12px}.brand-icon{width:40px;height:40px;background:#1d4ed8;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.brand-icon svg{width:22px;height:22px;color:#fff}.brand-title{font-size:18px;font-weight:700;letter-spacing:-.3px}.brand-sub{font-size:13px;color:#94a3b8;margin-top:1px}.status-badge{display:flex;align-items:center;gap:8px;background:#1e293b;border:1px solid #334155;border-radius:20px;padding:6px 14px;font-size:13px;color:#cbd5e1;white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.status-ok{background:#10b981;box-shadow:0 0 0 3px #10b98133}.status-error{background:#ef4444;box-shadow:0 0 0 3px #ef444433}.status-checking{background:#f59e0b;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.main{flex:1;max-width:900px;margin:0 auto;padding:40px 24px;width:100%;display:flex;flex-direction:column;gap:48px}.section{display:flex;flex-direction:column;gap:20px}.section-title{font-size:20px;font-weight:700;color:#0f172a;letter-spacing:-.3px}.section-desc{font-size:14px;color:#64748b}.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px}.flow-step{display:flex;flex-direction:column;align-items:center;gap:8px}.flow-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center}.flow-icon svg{width:22px;height:22px}.flow-icon-blue{background:#dbeafe;color:#1d4ed8}.flow-icon-gray{background:#f1f5f9;color:#475569}.flow-icon-green{background:#d1fae5;color:#059669}.flow-icon-blue2{background:#ede9fe;color:#7c3aed}.flow-label{font-size:12px;font-weight:600;color:#475569;text-align:center;max-width:80px}.flow-arrow{font-size:20px;color:#cbd5e1;flex-shrink:0}.endpoints{display:flex;flex-direction:column;gap:12px}.endpoint-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 20px;display:flex;flex-direction:column;gap:10px}.endpoint-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.endpoint-stage-row{display:flex;align-items:center;gap:10px}.stage-number{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}.stage-name{font-weight:700;font-size:16px;color:#0f172a}.facebook-badge{font-size:12px;background:#ede9fe;color:#6d28d9;border-radius:20px;padding:3px 10px;font-weight:600}.endpoint-trigger{font-size:13px;color:#64748b}.trigger-label{font-weight:600;color:#475569}.endpoint-url-row{display:flex;align-items:center;gap:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:8px 12px;flex-wrap:wrap}.endpoint-url{font-family:SF Mono,Fira Code,monospace;font-size:12px;color:#0f172a;flex:1;word-break:break-all}.copy-btn{font-size:12px;font-weight:600;padding:4px 12px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;color:#475569;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}.copy-btn:hover{background:#f1f5f9}.copy-btn-copied{background:#d1fae5;color:#059669;border-color:#a7f3d0}.code-block{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.code-header{background:#f1f5f9;border-bottom:1px solid #e2e8f0;padding:10px 16px;font-size:12px;font-weight:600;color:#64748b}.code-body{background:#0f172a;color:#e2e8f0;padding:16px;font-family:SF Mono,Fira Code,monospace;font-size:13px;line-height:1.8;overflow-x:auto}.steps{display:flex;flex-direction:column;gap:0}.step{display:flex;gap:16px;padding:20px;background:#fff;border:1px solid #e2e8f0;margin-bottom:-1px}.step:first-child{border-radius:12px 12px 0 0}.step:last-child{border-radius:0 0 12px 12px;margin-bottom:0}.step-num{width:28px;height:28px;background:#1d4ed8;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;margin-top:2px}.step-title{font-weight:700;font-size:15px;color:#0f172a;margin-bottom:4px}.step-body{font-size:13px;color:#64748b;line-height:1.6}.step-body code{background:#f1f5f9;padding:1px 6px;border-radius:4px;font-family:SF Mono,Fira Code,monospace;font-size:12px;color:#0f172a}.step-body strong{color:#374151}.footer{background:#f1f5f9;border-top:1px solid #e2e8f0;padding:16px 24px;text-align:center;font-size:12px;color:#94a3b8}