:root{--hpp-bg: #ffffff;--hpp-accent: #1d3557;--hpp-text: #14141f;--hpp-muted: #5a5a6e;--hpp-surface: #f6f6fa;--hpp-border: #d9d9e3;--hpp-notice-bg: #fff3cd;--hpp-notice-border: #ffe69c}@media(prefers-color-scheme:dark){:root{--hpp-text: #ececf4;--hpp-muted: #a0a0b8;--hpp-surface: #23232e;--hpp-border: #3a3a4a;--hpp-notice-bg: #3a3320;--hpp-notice-border: #6b5d24}:root:not([style*=--hpp-bg]){--hpp-bg: #17171f}}body{margin:0;background:var(--hpp-bg)}.hpp{font-family:system-ui,sans-serif;max-width:28rem;margin:0 auto;padding:1.5rem 1rem 3rem;color:var(--hpp-text);line-height:1.5}.hpp h1{font-size:1.4rem}.hpp h2{font-size:1rem}.hpp-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}.mvp-mark{font-weight:700;font-size:1.1rem}.merchant-logo{max-height:40px;max-width:200px}.powered{font-size:.75rem}.skip-link{position:absolute;left:-999px}.skip-link:focus{position:static;display:inline-block;padding:.25rem .5rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.steps{display:flex;gap:1rem;list-style:none;padding:0;margin:0 0 1rem;font-size:.8rem;color:var(--hpp-muted)}.steps li[aria-current=step]{color:var(--hpp-accent);font-weight:600;border-bottom:2px solid var(--hpp-accent)}.summary{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;background:var(--hpp-surface);border-radius:.5rem;padding:.9rem 1rem}.summary dt{font-weight:600}.summary dd{margin:0;text-align:right;overflow-wrap:anywhere}.bank-row{display:flex;align-items:center;gap:.75rem;margin:1rem 0;padding:.75rem;border:1px solid var(--hpp-border);border-radius:.5rem}.bank-row div{flex:1}.muted{color:var(--hpp-muted);font-size:.9rem}.legal{font-size:.85rem;border-left:3px solid var(--hpp-border);padding-left:.75rem}.notice{background:var(--hpp-notice-bg);border:1px solid var(--hpp-notice-border);border-radius:.375rem;padding:.6rem .8rem}.hpp button.primary,.hpp .button-link{display:block;width:100%;box-sizing:border-box;text-align:center;font-size:1rem;padding:.75rem 1rem;border-radius:.5rem;border:none;background:var(--hpp-accent);color:#fff;cursor:pointer;text-decoration:none;margin-top:1rem}.hpp button.link{background:none;border:none;color:var(--hpp-accent);text-decoration:underline;cursor:pointer;font-size:.95rem;padding:0}.more-banks{margin-top:.75rem;display:block}.picker-controls{display:flex;gap:.75rem;align-items:end;margin:.5rem 0 .75rem}.search-wrap{flex:1}.picker-controls label{display:block;font-size:.8rem;color:var(--hpp-muted)}.hpp input[type=search],.hpp input#debtor-iban,.hpp select{display:block;width:100%;box-sizing:border-box;font-size:1rem;padding:.6rem .75rem;margin:.25rem 0 0;border:1px solid var(--hpp-border);border-radius:.5rem;background:var(--hpp-bg);color:var(--hpp-text)}.hpp input#debtor-iban{font-family:ui-monospace,monospace;letter-spacing:.05em}.bank-grid{list-style:none;padding:0;margin:.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.5rem}.bank-tile{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;padding:.75rem .5rem;font-size:.9rem;border:1px solid var(--hpp-border);border-radius:.5rem;background:var(--hpp-bg);color:var(--hpp-text);cursor:pointer;min-height:5.5rem}.bank-tile:hover,.bank-tile:focus-visible{border-color:var(--hpp-accent)}.bank-tile.highlighted{border-color:var(--hpp-accent);border-width:2px}.logo-fallback{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:.375rem;background:var(--hpp-surface);font-weight:700}.hero .bank-tile{flex-direction:row;justify-content:flex-start;min-height:0}.qr-box{display:flex;justify-content:center;margin:1rem 0}.qr-box img{border:8px solid #fff;border-radius:.5rem}.connect{text-align:center;padding-top:2rem}.spinner{width:2rem;height:2rem;margin:0 auto 1rem;border:3px solid var(--hpp-border);border-top-color:var(--hpp-accent);border-radius:50%;animation:hpp-spin .9s linear infinite}@keyframes hpp-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}*{transition:none!important}}
