.hpci-demo-layout{grid-template-columns:240px 1fr;align-items:start;gap:2.5rem;max-width:1200px;margin:0 auto;padding:2rem 1.5rem 4rem;display:grid}.hpci-demo-sidebar{top:var(--site-header-h,90px);max-height:calc(100vh - var(--site-header-h,90px));border-right:1px solid #e5e7eb;padding-right:1rem;position:sticky;overflow-y:auto}.hpci-demo-sidebar-title{color:#004e7a;text-align:center;border-bottom:2px solid #004e7a;margin:0 0 1rem;padding-bottom:.75rem;font-size:1.2rem}.hpci-demo-nav{margin:0;padding:0;list-style:none}.hpci-demo-nav li{margin:.25rem 0}.hpci-demo-navlink{color:#374151;border-radius:6px;padding:.5rem .75rem;font-size:.95rem;text-decoration:none;display:block}.hpci-demo-navlink:hover{background:#f3f4f6}.hpci-demo-navlink.active{color:#004e7a;background:#e0f2fe;font-weight:600}.hpci-demo-main{min-width:0}@media (width<=900px){.hpci-demo-layout{grid-template-columns:1fr;gap:1.5rem}.hpci-demo-sidebar{border-bottom:1px solid #e5e7eb;border-right:none;max-height:none;padding:0 0 1rem;position:static;overflow:visible}.hpci-demo-nav{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.hpci-demo-nav li{margin:0}}.hpci-demo-page{color:#1f2937;max-width:1000px;margin:0 auto;padding:2.5rem 1.5rem 4rem;line-height:1.7}.hpci-demo-title{color:#004e7a;text-align:center;margin-bottom:1.5rem;font-size:2rem}.hpci-demo-div{width:100%}.hpci-demo-tabs{justify-content:center}.hpci-demo-hint{text-align:center}.hpci-demo-field,.hpci-demo-tokens,.hpci-demo-status,.hpci-demo-desc{margin-left:auto;margin-right:auto}#ccframe{margin-left:auto;margin-right:auto;display:block}.hpci-demo-apply{width:fit-content;margin-left:auto;margin-right:auto;display:block}.hpci-demo-actions{justify-content:center}.hpci-demo-tabs{border-bottom:2px solid #cbd5e1;flex-wrap:wrap;gap:.25rem;margin-bottom:1.5rem;display:flex}.hpci-demo-tab{color:#475569;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-bottom:none;border-radius:8px 8px 0 0;padding:.6rem 1.4rem;font-size:.95rem;font-weight:600;transition:background .15s,color .15s}.hpci-demo-tab:hover{background:#e2e8f0}.hpci-demo-tab.is-active{color:#fff;background:#004e7a;border-color:#004e7a}.hpci-demo-panel{animation:.2s hpci-demo-fade;display:none}.hpci-demo-panel.is-active{display:block}@keyframes hpci-demo-fade{0%{opacity:0}to{opacity:1}}.hpci-demo-field{flex-direction:column;max-width:560px;margin-bottom:1rem;display:flex}.hpci-demo-field label{color:#0d3b45;margin-bottom:.3rem;font-weight:600}.hpci-demo-field input{border:1px solid #cbd5e1;border-radius:6px;padding:.55rem .75rem;font-family:inherit;font-size:1rem}.hpci-demo-apply,.hpci-demo-submit{color:#fff;cursor:pointer;background:#004e7a;border:none;border-radius:6px;padding:.6rem 1.5rem;font-size:1rem;font-weight:600}.hpci-demo-apply:hover,.hpci-demo-submit:hover{background:#01659c}.hpci-demo-hint{color:#64748b;margin:.25rem 0 1rem;font-size:.9rem}#ccframe-mount,#ccframe-mount1,#ccframe-mount2{margin:.5rem 0 1rem}#ccframe,#ccframe1,#ccframe2{background:#fff;border:1px solid #cbd5e1;border-radius:8px;width:100%;max-width:560px;min-height:150px}.hpci-demo-multi{grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:820px;margin:.5rem auto 1rem;display:grid}.hpci-demo-multi-col{min-width:0}.hpci-demo-subhead{color:#004e7a;text-align:center;margin:0 0 .5rem;font-size:1.05rem}.hpci-demo-multi .hpci-demo-tokens{max-width:none;margin:.75rem 0 0}@media (width<=640px){.hpci-demo-multi{grid-template-columns:1fr}}.hpci-demo-tokens{gap:.6rem;max-width:560px;margin:1.25rem auto;display:grid}.hpci-demo-tokens label{color:#0d3b45;font-weight:600}.hpci-demo-tokens input{color:#1f2937;background:#f8fafc;border:1px solid #cbd5e1;border-radius:6px;width:100%;padding:.55rem .75rem;font-family:SFMono-Regular,Consolas,monospace;font-size:.9rem}.hpci-demo-actions{gap:.75rem;margin-top:.5rem;display:flex}.hpci-demo-reset{color:#334155;cursor:pointer;background:#e2e8f0;border:none;border-radius:6px;padding:.6rem 1.5rem;font-size:1rem;font-weight:600}.hpci-demo-reset:hover{background:#cbd5e1}.hpci-demo-brands{flex-wrap:wrap;justify-content:center;gap:.75rem;max-width:560px;margin:.75rem auto 1rem;display:flex}.hpci-demo-brand{opacity:.3;filter:grayscale();border:2px solid #0000;border-radius:6px;width:56px;height:auto;padding:3px;transition:opacity .2s,filter .2s,transform .2s,border-color .2s,background .2s}.hpci-demo-brand.active{opacity:1;filter:none;background:#e0f2fe;border-color:#004e7a;transform:scale(1.08)}.hpci-demo-field-row{gap:1rem;max-width:560px;margin:0 auto;display:flex}.hpci-demo-field-row .hpci-demo-field{flex:1;margin-left:0;margin-right:0}@media (width<=560px){.hpci-demo-field-row{flex-direction:column;gap:0}}.hpci-pay-result{border:1px solid #0000;border-radius:8px;max-width:560px;margin:1rem auto 0;padding:1rem 1.1rem;font-size:.95rem;line-height:1.5}.hpci-pay-result.is-success{color:#065f46;background:#ecfdf5;border-color:#6ee7b7}.hpci-pay-result.is-error{color:#991b1b;background:#fef2f2;border-color:#fca5a5}.hpci-3ds-otp{background:#fff;border:1px solid #cbd5e1;border-radius:8px;justify-content:center;max-width:520px;min-height:200px;margin:1.5rem auto;padding:1rem;display:flex}.hpci-3ds-otp iframe{display:block}.hpci-demo-status{border-radius:6px;max-width:560px;margin-top:1rem;padding:.7rem 1rem;font-weight:600;display:none}.hpci-demo-status.is-success{color:#065f46;background:#ecfdf5;border:1px solid #6ee7b7;display:block}.hpci-demo-status.is-error{color:#991b1b;background:#fef2f2;border:1px solid #fca5a5;display:block}.hpci-demo-status.is-info{color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe;display:block}.hpci-demo-desc{color:#334155;max-width:760px;font-size:1.05rem;line-height:1.7}.hpci-demo-code{background:#0d1117;border:1px solid #30363d;border-radius:8px;margin:1rem 0;position:relative;overflow:hidden}.hpci-demo-code__bar{background:#161b22;border-bottom:1px solid #30363d;justify-content:space-between;align-items:center;padding:.5rem .9rem;display:flex}.hpci-demo-code__lang{color:#8b949e;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:600}.hpci-demo-copy{color:#c9d1d9;cursor:pointer;background:#21262d;border:1px solid #30363d;border-radius:6px;padding:.25rem .8rem;font-size:.8rem}.hpci-demo-copy:hover{background:#30363d}.hpci-demo-copy.copied{color:#3fb950;border-color:#3fb950}.hpci-demo-code pre{margin:0;padding:1rem;overflow-x:auto}.hpci-demo-code code{color:#e6edf3;white-space:pre;font-family:SFMono-Regular,Consolas,monospace;font-size:.85rem;line-height:1.55}