:root {
  --pay-bg:#f3f5f7; --pay-card:#fff; --pay-text:#18202b; --pay-muted:#687386;
  --pay-border:#d3d8e0; --pay-field:#fff; --pay-accent:#ef7c18;
  --pay-shadow:0 18px 50px rgba(15,23,42,.10);
}
html[data-theme="dark"] {
  --pay-bg:#050608; --pay-card:#111318; --pay-text:#f5f7fa; --pay-muted:#a5adba;
  --pay-border:#343944; --pay-field:#171a20; --pay-shadow:0 20px 54px rgba(0,0,0,.34);
}
body { margin:0; background:var(--pay-bg); color:var(--pay-text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; }
.page-tools { display:none; }
main { padding:clamp(24px,5vw,54px) 16px 56px; }
.payment-shell { width:min(100%,760px); margin:0 auto; }
.payment-heading { margin:0 0 22px; text-align:center; }
.payment-heading p { margin:0 0 7px; color:var(--pay-accent); font-size:.76rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.payment-heading h1 { margin:0; font-size:clamp(1.9rem,5vw,2.8rem); font-weight:650; letter-spacing:-.035em; line-height:1.08; }
.payment-picker { width:100%; min-height:50px; box-sizing:border-box; margin:0 0 12px; padding:0 44px 0 15px; border:1px solid var(--pay-border); border-radius:13px; outline:0; background:var(--pay-field); color:var(--pay-text); font:inherit; font-weight:600; }
.payment-picker:focus,.vat-input:focus { border-color:var(--pay-accent); box-shadow:0 0 0 4px rgba(239,124,24,.25); }
.vat-toggle { display:block; width:100%; min-height:46px; box-sizing:border-box; margin:18px 0 0; padding:10px 16px; border:1px solid var(--pay-border); border-radius:13px; background:transparent; color:var(--pay-text); font:inherit; font-weight:650; cursor:pointer; }
.vat-toggle:hover { border-color:var(--pay-accent); background:rgba(239,124,24,.07); }
.vat-toggle[aria-expanded="true"] { border-color:var(--pay-accent); color:var(--pay-accent); }
.vat-calculator { margin:12px 0 0; padding:20px; border:1px solid var(--pay-border); border-radius:16px; background:var(--pay-card); box-shadow:0 10px 28px rgba(15,23,42,.08); }
.vat-calculator[hidden] { display:none; }
.vat-calculator h2 { margin:0 0 15px; font-size:1.08rem; }
.vat-field label { display:block; margin:0 0 7px; color:var(--pay-muted); font-size:.82rem; font-weight:650; letter-spacing:.03em; }
.vat-input { width:100%; min-height:48px; box-sizing:border-box; padding:0 13px; border:1px solid var(--pay-border); border-radius:11px; outline:0; background:var(--pay-field); color:var(--pay-text); font:inherit; font-size:1.05rem; }
.vat-results { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 0; }
.vat-result { padding:13px; border-radius:11px; background:rgba(239,124,24,.08); }
.vat-result span { display:block; margin-bottom:5px; color:var(--pay-muted); font-size:.78rem; font-weight:650; }
.vat-result output { display:block; font-size:1.08rem; font-weight:720; overflow-wrap:anywhere; }
.vat-note { margin:14px 0 0; color:var(--pay-muted); font-size:.82rem; line-height:1.45; }
.payment-guidance { margin:18px 0 0; padding:20px; border:1px solid var(--pay-border); border-radius:16px; background:var(--pay-card); }
.payment-guidance h2 { margin:0 0 12px; font-size:1.08rem; }
.payment-guidance p { margin:9px 0 0; color:var(--pay-muted); line-height:1.5; }
.payment-guidance a { color:var(--pay-text); font-weight:650; }
.payment-guidance .security-note { padding-top:10px; border-top:1px solid var(--pay-border); color:var(--pay-text); }
.payment-card { padding:clamp(24px,5vw,44px); border:1px solid var(--pay-border); border-radius:22px; background:var(--pay-card); box-shadow:var(--pay-shadow); text-align:center; }
.bank-mark { display:flex; align-items:center; justify-content:center; min-height:84px; margin:0 auto 18px; }
.bank-mark img { display:block; width:auto; height:auto; max-width:min(100%,340px); max-height:104px; object-fit:contain; }
.bank-mark--icon { width:96px; height:96px; min-height:96px; overflow:hidden; }
.bank-mark--icon img { width:auto; max-width:none; height:96px; max-height:none; }
.payment-card h2 { margin:0; font-size:clamp(1.45rem,4vw,2rem); font-weight:650; }
.payment-card .method { margin:8px 0 28px; color:var(--pay-muted); line-height:1.45; }
.details { display:grid; gap:0; margin:0; text-align:left; }
.detail { display:grid; grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr); gap:16px; padding:15px 0; border-top:1px solid var(--pay-border); }
.detail dt { margin:0; color:var(--pay-muted); font-size:.82rem; font-weight:650; letter-spacing:.04em; text-transform:uppercase; }
.detail dd { min-width:0; margin:0; font-size:1rem; font-weight:620; overflow-wrap:anywhere; }
.detail--account dd { font-size:clamp(1.25rem,4vw,1.7rem); letter-spacing:.04em; }
.detail a { color:inherit; }
.copyable-value { display:flex; align-items:center; gap:12px; }
.copy-button { flex:0 0 auto; margin-inline-start:auto; padding:5px 9px; border:1px solid var(--pay-border); border-radius:8px; background:var(--pay-field); color:var(--pay-text); font:inherit; font-size:.76rem; font-weight:650; cursor:pointer; vertical-align:middle; }
.copy-button:hover,.copy-button:focus { border-color:var(--pay-accent); color:var(--pay-accent); outline:0; }
.notice { margin:24px 0 0; padding:14px 16px; border:1px solid rgba(239,124,24,.35); border-radius:13px; background:rgba(239,124,24,.08); color:var(--pay-text); line-height:1.45; }
.payment-footer { margin:24px 0 0; color:var(--pay-muted); font-size:.84rem; text-align:center; }
.payment-footer a { color:inherit; text-decoration:none; }
@media (max-width:560px) {
  .detail { grid-template-columns:1fr; gap:5px; }
  .payment-card { text-align:left; }
  .payment-card h2,.payment-card .method,.bank-mark { text-align:center; }
  .vat-results { grid-template-columns:1fr; }
  .copyable-value { width:100%; }
}