.payment-mock-page .landing-hero-panel{align-items:center;background:var(--dev-surface-color);display:flex;flex-direction:column;padding:80px 24px;text-align:center}.payment-mock-page .landing-icon-circle{align-items:center;background:var(--dev-primary-light);border-radius:20px;color:var(--dev-primary-color);display:flex;height:80px;justify-content:center;margin-bottom:24px;width:80px}.payment-mock-page .landing-hero-title{color:var(--dev-text-primary);font-size:1.75rem;font-weight:500;margin-bottom:16px}.payment-mock-page .landing-hero-text{color:var(--dev-text-secondary);font-size:1.1rem;line-height:1.6;margin:0 auto 40px;max-width:600px}.payment-mock-page .landing-cta-btn{border-radius:12px;font-size:16px;padding:14px 40px}.payment-mock-page .integration-guide-panel{background:var(--dev-surface-color);border-radius:16px;box-shadow:var(--dev-shadow-md)}.payment-mock-page .guide-header{align-items:center;background:linear-gradient(135deg,#f8f9fa,#fff);border-bottom:1px solid var(--dev-border-color);display:flex;gap:20px;justify-content:space-between;padding:16px 24px}.payment-mock-page .guide-title-area{align-items:center;display:flex;gap:12px}.payment-mock-page .guide-icon{color:var(--dev-primary-color)}.payment-mock-page .guide-header h3{color:var(--dev-text-primary);font-size:1.15rem;font-weight:500;margin:0}.payment-mock-page .guide-header-action{align-items:center;display:flex}.payment-mock-page .dispatch-btn-premium{align-items:center;background:var(--dev-primary-color);border:none;border-radius:8px;box-shadow:0 2px 6px #1a73e833;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:10px;overflow:hidden;padding:10px 20px;position:relative;transition:all .2s}.payment-mock-page .dispatch-btn-premium:hover{background:var(--dev-primary-dark);box-shadow:0 4px 12px #1a73e84d;transform:translateY(-1px)}.payment-mock-page .dispatch-btn-premium:active{transform:translateY(0)}.payment-mock-page .dispatch-btn-premium.loading{cursor:wait;opacity:.8}.payment-mock-page .dispatch-btn-premium.success{background:#28a745;box-shadow:0 4px 12px #28a7454d}.payment-mock-page .dispatch-btn-premium.error{background:var(--dev-error);box-shadow:0 4px 12px #dc35454d}.payment-mock-page .spin-icon{animation:dev-spin 1s linear infinite}@keyframes dev-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.payment-mock-page .btn-glow{background:linear-gradient(90deg,#0000,#fff3,#0000);height:100%;left:-100%;position:absolute;top:0;transition:.5s;width:100%}.payment-mock-page .dispatch-btn-premium:hover .btn-glow{left:100%}.payment-mock-page .guide-body{display:grid;grid-template-columns:1fr;padding:0}.payment-mock-page .guide-step-section{border-bottom:1px solid var(--dev-border-color);display:flex;flex-direction:column;gap:16px;padding:24px 32px}.payment-mock-page .guide-step-section:last-child{border-bottom:none}.payment-mock-page .snippet-block-wrapper{background:#fff;border-radius:0 0 12px 12px;height:320px;margin-top:0;overflow-x:hidden;overflow-y:auto}.payment-mock-page .snippet-block-wrapper code,.payment-mock-page .snippet-block-wrapper pre{white-space:pre-wrap!important;word-break:break-all!important}.payment-mock-page .snippet-block-wrapper .code-block-container{border:none;box-shadow:none;margin:0}.payment-mock-page .webhook-url-card-body{padding:32px}.payment-mock-page .webhook-url-card-title{color:var(--dev-text-primary);font-size:16px;font-weight:600;margin-bottom:16px}.payment-mock-page .url-card-desc{color:var(--dev-text-secondary);font-size:14px;line-height:1.5;margin-bottom:24px}.payment-mock-page .dev-url-preview{align-items:stretch;background:#fff;border:1px solid var(--dev-border-color);border-radius:8px;display:flex;margin-bottom:0;overflow:hidden;padding:0}.payment-mock-page .dev-url-preview:hover{border-color:var(--dev-primary-color);box-shadow:0 4px 12px #1a73e814}.payment-mock-page .method-tag{align-items:center;background:var(--dev-primary-light);border-right:1px solid var(--dev-border-color);color:var(--dev-primary-color);display:flex;font-size:12px;font-weight:700;justify-content:center;min-width:80px;padding:12px 16px}.payment-mock-page .url-text{align-items:center;color:var(--dev-text-secondary);display:flex;flex:1;font-family:Roboto Mono,monospace;font-size:13px;padding:12px 16px;white-space:pre-wrap;word-break:break-all}.payment-mock-page .step-indicator{align-items:center;display:flex;gap:12px}.payment-mock-page .step-num{align-items:center;background:var(--dev-primary-color);border-radius:50%;color:#fff;display:flex;font-size:14px;font-weight:700;height:28px;justify-content:center;width:28px}.payment-mock-page .step-label{color:var(--dev-text-primary);font-size:15px;font-weight:600}.payment-mock-page .snippet-container{background:#fff;border:1px solid var(--dev-border-color);border-radius:12px;display:flex;flex-direction:column;max-width:100%;overflow:hidden}.payment-mock-page .snippet-tabs-row{align-items:center;background:#f8f9fa;border-bottom:1px solid var(--dev-border-color);display:flex;justify-content:space-between;padding:0 8px 0 16px}.payment-mock-page .lang-tabs{display:flex}.payment-mock-page .lang-tab{background:#0000;border:none;border-bottom:2px solid #0000;color:var(--dev-text-tertiary);cursor:pointer;font-size:12px;font-weight:600;padding:12px 16px;text-transform:uppercase;transition:all .2s}.payment-mock-page .lang-tab:hover{color:var(--dev-text-primary)}.payment-mock-page .lang-tab.active{border-bottom-color:var(--dev-primary-color);color:var(--dev-primary-color)}.payment-mock-page .dev-playground-grid{align-items:start;display:grid;gap:0;grid-template-columns:1fr;height:auto;margin-top:32px;min-height:600px}@media(min-width:1024px){.payment-mock-page .dev-playground-grid{gap:24px;grid-template-columns:380px 1fr}}.payment-mock-page .intents-panel{background:#fff;border:1px solid var(--dev-border-color);border-radius:12px;display:flex;flex-direction:column;height:520px;min-height:0;overflow:hidden;position:-webkit-sticky;position:sticky;top:80px;z-index:10}.payment-mock-page .payment-intents-header{align-items:center;background:#f8f9fa;border-bottom:1px solid var(--dev-border-color);display:flex;height:52px;justify-content:space-between;padding:10px 16px}.payment-mock-page .payment-intents-header h4{color:var(--dev-text-primary);font-size:1rem;font-weight:600;margin:0}.payment-mock-page .logs-actions-container{align-items:center;display:flex;gap:8px}.payment-mock-page .logs-status-pill{margin-right:4px}.payment-mock-page .intents-body-container{display:flex;flex-direction:column;height:calc(100% - 52px);overflow:hidden;padding:0}.payment-mock-page .inbox-search-bar{align-items:center;background:#fff;border-bottom:1px solid var(--dev-border-color);display:flex;gap:10px;padding:12px 16px}.payment-mock-page .search-icon{color:var(--dev-text-tertiary)}.payment-mock-page .search-input{border-radius:6px;font-size:13px;padding:8px 12px}.payment-mock-page .intent-list{background:#fff;flex:1;min-height:0;overflow-y:auto}.payment-mock-page .intent-item{border-bottom:1px solid var(--dev-border-color);cursor:pointer;padding:12px 16px;transition:all .2s}.payment-mock-page .intent-item:hover{background:#f8f9fa;transform:none}.payment-mock-page .intent-item.active{background:var(--dev-primary-light);border-left:4px solid var(--dev-primary-color);padding-left:12px!important}.payment-mock-page .content-panel{background:#fff;border:1px solid #9aa0a6;border-radius:12px;box-shadow:0 4px 16px #00000014;min-height:520px;overflow:hidden}.payment-mock-page .inspector-empty-state{align-items:center;display:flex;flex:1;flex-direction:column;height:520px;justify-content:center;padding:32px;text-align:center}.payment-mock-page .inspector-empty-state svg{color:var(--dev-text-tertiary);margin-bottom:24px;opacity:.4}.payment-mock-page .inspector-empty-state h3{color:var(--dev-text-primary);font-size:1.25rem;font-weight:500;margin:0 0 12px}.payment-mock-page .inspector-empty-state p{color:var(--dev-text-secondary);font-size:1rem;line-height:1.6;margin:0;max-width:300px}.payment-mock-page .inspector-header{align-items:center;background:#f8f9fa;border-bottom:1px solid var(--dev-border-color);display:flex;justify-content:space-between;min-height:52px;padding:12px 24px}.payment-mock-page .inspector-header h3{color:var(--dev-text-primary);font-size:1rem;font-weight:600;margin:0}.payment-mock-page .intent-details{padding:32px}.payment-mock-page .dev-info-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px}.payment-mock-page .logs-btn{align-items:center!important;background:var(--dev-primary-color)!important;border:1px solid var(--dev-primary-color)!important;border-radius:var(--dev-radius-sm)!important;color:#fff!important;display:inline-flex!important;font-size:11px!important;font-weight:700!important;gap:6px!important;padding:6px 12px!important;text-decoration:none!important;transition:all .2s!important}.payment-mock-page .logs-btn:hover{background:var(--dev-primary-dark)!important;border-color:var(--dev-primary-dark)!important;box-shadow:0 2px 4px #0000001a!important}.timeline-container{border-left:2px solid var(--dev-border-color);margin-left:8px;padding-left:24px;position:relative}.payment-mock-page .timeline-dot{border:2px solid var(--dev-surface-color);border-radius:50%;box-shadow:0 0 0 2px var(--dev-bg-color);height:12px;left:-31px;position:absolute;top:4px;width:12px}.payment-mock-page .spin{animation:dev-spin 1s linear infinite}.payment-mock-page .webhook-docs-section{border-top:1px solid var(--dev-border-color);margin-top:48px;padding-top:32px}.payment-mock-page .webhook-docs-grid{display:grid;gap:32px;grid-template-columns:1fr}@media(min-width:1024px){.payment-mock-page .webhook-docs-grid{gap:48px;grid-template-columns:1fr 1fr}}.payment-mock-page .webhook-docs-title{color:var(--dev-text-primary);font-size:1.125rem;font-weight:600;margin-bottom:16px}.payment-mock-page .webhook-docs-list{color:var(--dev-text-secondary);font-size:14px;line-height:2;list-style:none;padding:0}.payment-mock-page .webhook-docs-subtitle{color:var(--dev-text-tertiary);font-size:14px;font-weight:500;margin-bottom:12px}.payment-mock-page .webhook-docs-code-list{font-size:13px;list-style:none;padding:0}.payment-mock-page .webhook-docs-code-list li{color:var(--dev-text-secondary);margin-bottom:12px}.payment-mock-page .webhook-docs-code-list strong{color:var(--dev-text-primary)}.payment-mock-page .webhook-docs-alert{margin-top:24px}