*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #2563eb;--primary-light: #eff6ff;--surface: #fff;--border: #e2e8f0;--text: #1e293b;--muted: #64748b;--success: #16a34a;--error: #ef4444;--radius: 10px;--mono: "SF Mono", "Fira Code", "Consolas", monospace;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}body{font-family:var(--font);background:#f1f5f9;color:var(--text);min-height:100vh;line-height:1.5}.header{background:#0f172a;color:#fff;padding:0 24px;position:sticky;top:0;z-index:10;box-shadow:0 1px 6px #0000002e}.header-inner{max-width:1100px;margin:0 auto;height:56px;display:flex;align-items:center;justify-content:space-between}.header-brand{display:flex;align-items:center;gap:10px;font-size:16px}.header-title{font-weight:400;letter-spacing:-.01em}.header-title strong{font-weight:700}.header-controls{display:flex;align-items:center;gap:10px}.currency-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff26 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 8px center;border:1px solid rgba(255,255,255,.35);border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.02em;padding:4px 28px 4px 10px;outline:none;transition:background .15s}.currency-select:hover{background-color:#ffffff38}.currency-select option{background:#1e40af;color:#fff}.badge-sandbox{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:#ffffff2e;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 11px}.layout{max-width:1100px;margin:32px auto;padding:0 24px 48px;display:grid;grid-template-columns:1fr 284px;gap:24px;align-items:start}@media(max-width:820px){.layout{grid-template-columns:1fr}}.tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.tab-btn{flex:1;min-width:140px;text-align:left;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:border-color .12s,box-shadow .12s}.tab-btn:hover{border-color:#94a3b8}.tab-btn.active{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 3px #2563eb1a}.tab-label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}.tab-btn.active .tab-label{color:var(--primary)}.tab-desc{display:block;font-size:11px;color:var(--muted)}.status-box{padding:16px 20px;border-radius:var(--radius);font-size:14px;line-height:1.6}.status-loading{background:var(--primary-light);color:var(--primary);border:1px solid #bfdbfe}.status-error{background:#fef2f2;color:var(--error);border:1px solid #fecaca}.status-error small{display:block;margin-top:6px;color:#b91c1c;font-size:12px}.demo-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 1px 4px #0000000a}.demo-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.demo-header h2{font-size:18px;font-weight:700;color:var(--text)}.mode-badge{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:var(--primary-light);color:var(--primary);border-radius:999px;padding:3px 10px}.demo-desc{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.65}.demo-desc code{font-family:var(--mono);font-size:12px;background:#f8fafc;border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--primary)}.demo-error{background:#fef2f2;color:var(--error);border:1px solid #fecaca;border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px}.hf-form,.headless-form{max-width:400px}.field-group{margin-bottom:16px}.field-row{display:flex;gap:12px}.field-row .field-group{flex:1}.field-label{display:block;font-size:12px;font-weight:500;color:#475569;margin-bottom:6px}.field-label-opt{font-weight:400;color:var(--muted)}.field-host{border:1.5px solid var(--border);border-radius:8px;height:42px;padding:0 12px;transition:border-color .12s,box-shadow .12s;display:flex;align-items:center;overflow:hidden}.field-host:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.field-host.valid{border-color:var(--success)}.field-error{display:block;font-size:11px;color:var(--error);margin-top:4px}.field-input{width:100%;height:42px;border:1.5px solid var(--border);border-radius:8px;padding:0 12px;font-size:14px;font-family:var(--font);color:var(--text);background:var(--surface);outline:none;transition:border-color .12s,box-shadow .12s}.field-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.field-input--error{border-color:var(--error)!important}.field-input--error:focus{box-shadow:0 0 0 3px #ef44441a}.field-input::placeholder{color:#94a3b8}.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;transition:filter .12s,opacity .12s}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{width:100%;background:var(--primary);color:#fff;margin-top:8px}.btn-primary:hover:not(:disabled){filter:brightness(1.06)}.btn-secondary{background:#f1f5f9;color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:#e2e8f0}.nonce-result{background:#f0fdf4;border:1.5px solid #86efac;border-radius:var(--radius);padding:20px}.nonce-result-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#15803d;font-size:14px;font-weight:600}.nonce-result-icon{flex-shrink:0;width:20px;height:20px;background:var(--success);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}.nonce-value{display:block;font-family:var(--mono);font-size:13px;color:#166534;background:#dcfce7;border:1px solid #86efac;border-radius:6px;padding:10px 14px;word-break:break-all;margin-bottom:12px;letter-spacing:.04em}.nonce-hint{font-size:13px;color:#15803d;margin-bottom:16px;line-height:1.55}.nonce-hint code{font-family:var(--mono);font-size:12px;background:#bbf7d0;border-radius:4px;padding:1px 5px}.payment-result{border-radius:var(--radius);padding:20px;margin-bottom:16px}.payment-result--authorized{background:#f0fdf4;border:1.5px solid #86efac}.payment-result--refused{background:#fffbeb;border:1.5px solid #fcd34d}.payment-result--error{background:#fef2f2;border:1.5px solid #fca5a5}.payment-result-header{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:14px;font-weight:600}.payment-result--authorized .payment-result-header{color:#15803d}.payment-result--refused .payment-result-header{color:#92400e}.payment-result--error .payment-result-header{color:var(--error)}.payment-result-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;color:#fff}.payment-result-icon--authorized{background:var(--success)}.payment-result-icon--refused{background:#d97706}.payment-result-icon--error{background:var(--error)}.payment-result-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px;margin-bottom:16px;align-items:baseline}.payment-result-dl dt{color:var(--muted);font-weight:500;white-space:nowrap}.payment-result-dl dd{color:var(--text)}.payment-result-dl code{font-family:var(--mono);font-size:12px;background:#bbf7d0;border-radius:4px;padding:1px 5px;word-break:break-all}.payment-result-reason{font-size:13px;margin-bottom:16px;line-height:1.55}.payment-result--refused .payment-result-reason{color:#78350f}.payment-result--error .payment-result-reason{color:#991b1b}.payment-result-code{opacity:.7}.sidebar{position:sticky;top:72px}.test-cards{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:0 1px 4px #0000000a}.test-cards-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}.test-cards-subtitle{font-size:11px;color:var(--muted);margin-bottom:14px}.test-cards-list{display:flex;flex-direction:column;gap:8px}.test-card{background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:9px 10px}.test-card-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.test-card-brand{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.test-card-result{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:2px 7px}.test-card-result.ok{background:#dcfce7;color:#15803d}.test-card-result.fail{background:#fef2f2;color:var(--error)}.test-card-number{display:block;width:100%;text-align:left;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:5px 8px;cursor:pointer;transition:background .1s,color .1s,border-color .1s;margin-bottom:5px;letter-spacing:.03em}.test-card-number:hover{background:var(--primary-light);border-color:#93c5fd}.test-card-number.copied{background:#dcfce7;color:var(--success);border-color:#86efac}.test-card-meta{font-size:11px;color:var(--muted)}.test-card-meta code{font-family:var(--mono);font-size:11px;color:var(--text)}.test-cards-section-title{font-size:12px;font-weight:700;color:var(--text);margin-top:16px;margin-bottom:2px;padding-top:14px;border-top:1px solid var(--border)}.test-cards-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);line-height:1.5}