:root{--dev-bg-color:#f8f9fa;--dev-surface-color:#fff;--dev-surface-hover:#f1f3f4;--dev-border-color:#dadce0;--dev-primary-color:#174ea6;--dev-primary-light:#e8f0fe;--dev-primary-dark:#1557b0;--dev-text-primary:#202124;--dev-text-secondary:#54585d;--dev-text-tertiary:#61666b;--dev-success:#0d652d;--dev-error:#d93025;--dev-warning:#f9ab00;--dev-amber:#fb8c00;--dev-shadow-sm:0 1px 2px 0 #3c40434d,0 1px 3px 1px #3c404326;--dev-shadow-md:0 1px 3px 0 #3c40434d,0 4px 8px 3px #3c404326;--dev-radius:12px;--dev-radius-sm:4px}.dev-service-page{background-color:var(--dev-bg-color);color:var(--dev-text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,inherit;min-height:100vh}.dev-header-clean{background:linear-gradient(180deg,var(--dev-surface-color) 0,var(--dev-bg-color) 100%);border-bottom:1px solid var(--dev-border-color);padding:48px 24px 40px;text-align:center}.dev-header-content{margin:0 auto;max-width:800px}.dev-header-clean h1{color:var(--dev-text-primary);font-size:2.25rem;font-weight:400;letter-spacing:-.5px;margin:0 0 12px}.dev-subtitle{color:var(--dev-text-secondary);font-size:1.125rem;line-height:1.6;margin:0}.dev-container-clean{margin:0 auto;max-width:1200px;padding:40px 24px}.dev-back-link{align-items:center;color:var(--dev-text-secondary);display:inline-flex;font-size:14px;font-weight:500;gap:8px;margin-bottom:24px;text-decoration:none;transition:color .2s}.dev-back-link:hover{color:var(--dev-primary-color)}.dev-playground-grid{display:grid;gap:32px;grid-template-columns:1fr}@media(min-width:1024px){.dev-playground-grid{align-items:start;grid-template-columns:1fr}}.dev-panel{background:var(--dev-surface-color);border:1px solid var(--dev-border-color);border-radius:var(--dev-radius);box-shadow:var(--dev-shadow-sm);display:flex;flex-direction:column;overflow:hidden}.dev-panel-body{flex:1;padding:16px}.dev-panel-footer{background:var(--dev-bg-color);border-top:1px solid var(--dev-border-color);padding:12px 20px}.dev-code-block{background:#fff;border:1px solid var(--dev-border-color);border-radius:8px;display:flex;flex-direction:column;margin:16px 0;overflow:hidden;position:relative}.dev-code-block-header{align-items:center;background:#f8f9fa;border-bottom:1px solid var(--dev-border-color);display:flex;justify-content:space-between;padding:8px 16px}.dev-code-block-header .label{align-items:center;color:var(--dev-text-tertiary);display:flex;font-size:11px;font-weight:700;gap:6px;letter-spacing:.5px;text-transform:uppercase}.dev-code-block pre{background:#fff;color:var(--dev-text-primary);font-family:Roboto Mono,Fira Code,monospace;font-size:13px;line-height:1.6;margin:0;padding:20px;white-space:pre-wrap;word-break:break-all}.dev-code-block-dark{background:#fff;border:1px solid var(--dev-border-color)}.dev-code-block-dark pre{background:#fff;color:var(--dev-text-primary)}.dev-copy-btn{align-items:center;background:#0000;border:none;border-radius:8px;color:var(--dev-text-tertiary);cursor:pointer;display:flex;justify-content:center;line-height:normal;padding:8px;transition:all .2s cubic-bezier(.4,0,.2,1)}.dev-copy-btn:focus{outline:none}.dev-copy-btn:hover:not(:disabled){background:var(--dev-surface-hover);color:var(--dev-primary-color)}.dev-copy-btn.success,.dev-copy-btn.success:hover{color:var(--dev-success)!important}.dev-copy-btn:disabled{cursor:not-allowed;opacity:.5}.dev-code-block .dev-copy-btn,.dev-code-block-dark .dev-copy-btn{position:absolute;right:8px;top:6px;z-index:10}.dev-code-block-header .dev-copy-btn{padding:4px;position:static}.dev-code-block-dark .dev-copy-btn{color:#9aa0a6}.dev-code-block-dark .dev-copy-btn:hover:not(:disabled){background:#ffffff1a;color:#fff}.dev-control-btn{align-items:center;background:#0000;border:none;border-radius:8px;color:var(--dev-text-tertiary);cursor:pointer;display:flex;justify-content:center;line-height:normal;padding:8px;transition:all .2s cubic-bezier(.4,0,.2,1)}.dev-control-btn:focus{outline:none}.dev-control-btn:hover:not(:disabled){background:var(--dev-surface-hover);color:var(--dev-primary-color)}.dev-control-btn.active{color:var(--dev-primary-color)}.dev-control-btn.warning{color:var(--dev-warning)}.dev-control-btn.danger{color:var(--dev-error)}.dev-control-btn:disabled{cursor:not-allowed;opacity:.5}.mock-playground-header{align-items:center;background:var(--dev-bg-color);border-bottom:1px solid var(--dev-border-color);display:flex;justify-content:space-between;padding:10px 20px}.mock-playground-header h3{border-bottom:none!important;color:var(--dev-text-primary);font-size:1.125rem;font-weight:500;margin:0!important}.dev-window{background:#202124;border-radius:8px;display:flex;flex-direction:column;overflow:hidden}.dev-window-header{align-items:center;background:#3c4043;color:#fff;display:flex;font-size:12px;justify-content:space-between;padding:8px 16px}.dev-window-body{min-height:200px;overflow:auto;padding:20px}.dev-empty-state{color:var(--dev-text-secondary);padding:40px 20px;text-align:center}.dev-empty-state svg{margin-bottom:16px;opacity:.5}.dev-info-box{margin-top:16px}.dev-info-box label{color:var(--dev-text-tertiary);display:block;font-size:12px;font-weight:600;margin-bottom:8px;text-transform:uppercase}.dev-url-preview{align-items:stretch;background:#fff;border:1px solid var(--dev-border-color);border-radius:8px;display:flex;margin-bottom:24px;overflow:hidden;padding:0}.dev-url-preview .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}.dev-url-preview .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}.dev-url-preview .dev-copy-btn{align-self:center;margin:0 8px}.dev-control-row{margin-bottom:8px}.dev-control-row:last-child{margin-bottom:0}.dev-control-hint{color:var(--dev-text-secondary);font-size:12px}.spacing-top{margin-top:12px}.section-spacing{margin-top:32px}.chaos-controls{border-top:1px solid var(--dev-border-color);margin-top:10px;padding-top:10px}.chaos-header{align-items:center;display:flex;font-size:14px;font-weight:600;gap:8px;margin-bottom:4px}.dev-small-tab-btn{font-size:11px!important;height:auto!important;padding:4px 10px!important;width:auto!important}.dev-control-row label{color:var(--dev-text-tertiary);display:block;font-size:12px;font-weight:600;margin-bottom:8px;text-transform:uppercase}.dev-control-row input[type=range]{width:100%}.dev-control-row input[type=text],.dev-control-row select,.dev-form-input{background:var(--dev-surface-color);border:1px solid var(--dev-border-color);border-radius:var(--dev-radius-sm);font-size:14px;padding:10px 12px;transition:border-color .2s,box-shadow .2s;width:100%}.dev-form-input:focus{border-color:var(--dev-primary-color);box-shadow:0 0 0 2px var(--dev-primary-light);outline:none}.dev-btn-primary{align-items:center;background:var(--dev-primary-color);border:none;border-radius:var(--dev-radius-sm);color:#fff;cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:10px 20px;transition:background .2s}.dev-btn-primary:hover{background:var(--dev-primary-dark)}.dev-btn-primary:disabled{background:var(--dev-border-color);cursor:not-allowed}.dev-btn-secondary{align-items:center;background:var(--dev-surface-color);border:1px solid var(--dev-border-color);border-radius:var(--dev-radius-sm);color:var(--dev-text-secondary);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:9px 19px;transition:all .2s}.dev-btn-secondary:hover:not(:disabled){background:var(--dev-surface-hover);color:var(--dev-text-primary)}.dev-btn-secondary:disabled{background:var(--dev-surface-color);border-color:var(--dev-border-color);cursor:not-allowed;opacity:.5}.dev-status-pill{border-radius:4px;font-size:11px;font-weight:700;padding:2px 8px;text-transform:uppercase}.dev-status-pill.succeeded,.dev-status-pill.success{background:#e6f4ea;color:#1e8e3e}.dev-status-pill.pending,.dev-status-pill.processing,.dev-status-pill.warning{background:#fef7e0;color:#f9ab00}.dev-status-pill.declined,.dev-status-pill.error,.dev-status-pill.failed{background:#fce8e6;color:#d93025}.dev-alert{background:var(--dev-primary-light);border-radius:8px;color:var(--dev-primary-dark);display:flex;font-size:14px;gap:12px;line-height:1.5;padding:16px}.dev-alert svg{flex-shrink:0}@media(max-width:768px){.dev-header-clean{padding:40px 16px 32px}.dev-header-clean h1{font-size:1.75rem}}
