/* Existing Studio theme roles, scoped to the public bank-details view. */
html { --pay-bg:#101010; --pay-card:#111; --pay-line:#303030; --pay-muted:#aaa; --pay-ink:#eee; --pay-button:#efefef; --pay-subtle:#1a1a1a; --pay-hover:#242424; --pay-input:#171717; }
html[data-theme="light"] { --pay-bg:#efefef; --pay-card:#f7f7f7; --pay-line:#c7c7c7; --pay-muted:#606060; --pay-ink:#161616; --pay-button:#161616; --pay-subtle:#e3e3e3; --pay-hover:#d9d9d9; --pay-input:#f3f3f3; }
.payment-return { max-width:1280px; margin:auto; padding:0 40px; }
.payment-return a { color:var(--pay-muted); font-size:12px; text-decoration:none; }
.payment-return a:hover { color:var(--pay-ink); }
html:has(.payment-preview) { scrollbar-gutter:stable; }
.payment-preview { background:var(--pay-bg); color:var(--ink); min-height:100vh; margin:0; overflow:auto; font:14px/1.6 var(--sans); color-scheme:light dark; }
.payment-preview * { box-sizing:border-box; }
.payment-top { max-width:1280px; margin:auto; padding:30px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.payment-top a { color:var(--ink); text-decoration:none; }
.payment-top a span { font:10px var(--mono); letter-spacing:.23em; margin-left:15px; }
.payment-local { color:var(--pay-muted); font:10px var(--mono); }
#payment-root { max-width:1080px; margin:54px auto 64px; padding:0 40px; }
.payment-eyebrow { color:var(--pay-muted); font:10px var(--mono); letter-spacing:.15em; margin:0 0 20px; }
.payment-heading { font:400 42px/1.15 'MQ Manrope',var(--sans); letter-spacing:-.04em; margin:0 0 18px; }
.payment-intro { color:var(--pay-muted); max-width:620px; margin:0 0 34px; }
.payment-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start; }
.payment-card { background:var(--pay-card); border:1px solid var(--pay-line); border-radius:18px; padding:26px; min-width:0; }
.payment-card h2 { font-size:17px; font-weight:400; margin:0 0 18px; letter-spacing:-.02em; }
.payment-bank { display:flex; align-items:center; gap:10px; padding-bottom:20px; border-bottom:1px solid var(--pay-line); }
.payment-bank i { width:7px; height:7px; background:#0071e3; border-radius:50%; }
.payment-bank small { margin-left:auto; font:10px var(--mono); color:var(--pay-muted); }
.payment-methods { display:flex; gap:4px; padding:4px; margin:20px 0 22px; background:var(--pay-subtle); border:1px solid var(--pay-line); border-radius:999px; }
.payment-methods button { flex:1; padding:10px 16px; border:0; border-radius:999px; background:transparent; color:var(--pay-muted); font-size:12px; transition:background var(--control-state-time) ease,color var(--control-state-time) ease; }
.payment-methods button[aria-selected="true"] { background:var(--pay-button); color:var(--pay-card); }
.payment-methods button[aria-selected="false"]:hover { background:var(--pay-hover); color:var(--pay-ink); }
.payment-method-panels { display:grid; align-items:start; overflow:clip; }
.payment-method-panels > [role="tabpanel"] { grid-area:1 / 1; min-width:0; }
.payment-qr-panel { text-align:center; }
.payment-qr-lead { font-size:13px; margin:0 0 20px; color:var(--pay-ink); }
.payment-qr-image { display:block; margin:auto; padding:0; border:0; border-radius:20px; background:#fff; overflow:hidden; box-shadow:0 8px 30px #0003; }
.payment-qr-image img { display:block; width:min(264px,100%); height:auto; aspect-ratio:1; image-rendering:pixelated; }
.payment-qr-panel .payment-actions { justify-content:center; gap:28px; margin-top:16px; }
.payment-qr-panel .payment-note { max-width:350px; margin-inline:auto; }
.payment-qr-help { color:var(--pay-muted); }
.payment-qr-large { width:min(352px,100%); margin:0 auto 20px; border-radius:20px; overflow:hidden; background:#fff; }
.payment-qr-large img { display:block; width:100%; height:auto; aspect-ratio:1; image-rendering:pixelated; }
.payment-data { margin:0; }
.payment-row { border-bottom:1px solid var(--pay-line); padding:14px 0; display:grid; grid-template-columns:118px minmax(0,1fr) 30px; gap:10px; align-items:center; }
.payment-row dt { font-size:11px; color:var(--pay-muted); }
.payment-row dd { margin:0; font-size:12px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.payment-row dd.number { font-family:var(--mono); }
.payment-preview button { cursor:pointer; font:inherit; }
.payment-copy { border:0; background:transparent; color:var(--pay-muted); width:30px; height:34px; display:grid; place-items:center; padding:0; border-radius:7px; transition:background 200ms,color 200ms; }
.payment-copy svg { width:15px; height:15px; grid-area:1 / 1; }
.payment-copy.is-copied { color:var(--pay-muted); }
.payment-copy:hover { color:var(--pay-ink); background:var(--pay-hover); }
.payment-copy.is-copied:hover { color:var(--pay-muted); }
.payment-preview :is(button,a):focus-visible { outline:1px solid var(--pay-muted); outline-offset:4px; }
/* Pointer-origin dialog focus is restored for navigation, without a mouse ring.
   Tab clears this marker before native keyboard focus is drawn. */
.payment-preview [data-pointer-focus]:focus { outline:none; }
.payment-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:24px; }
.payment-primary { border:1px solid rgba(255,255,255,.24); border-radius:999px; background:var(--pay-button); color:var(--pay-card); min-height:44px; padding:11px 24px; font-size:12px!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 8px rgba(0,0,0,.16); transition:background var(--control-state-time) ease,box-shadow var(--control-state-time) ease,border-color var(--control-state-time) ease; }
.payment-primary:is(:hover,:focus-visible) { background:#fff; border-color:#fff; box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(255,255,255,.07),0 0 24px rgba(255,255,255,.18),0 4px 12px rgba(0,0,0,.22); }
.payment-primary:active { background:#dedede; box-shadow:inset 0 1px 3px rgba(0,0,0,.12); }
.payment-link { border:0; background:none; color:#0071e3; text-decoration:none; padding:0; font-size:12px!important; }
.payment-link:hover { text-decoration:none; }
.payment-note { font-size:11px; color:var(--pay-muted); margin:18px 0 0; }
.payment-status { display:flex; gap:9px; align-items:center; font:10px var(--mono); color:var(--pay-muted); margin-bottom:26px; }
.payment-status i { width:6px; height:6px; background:currentColor; border-radius:50%; }
.payment-status[data-state="pending"] { color:#e0b66b; }
.payment-amount { font:400 29px/1.3 'MQ Manrope',var(--sans); margin:0 0 12px; letter-spacing:-.035em; }
.payment-rule { border:0; border-top:1px solid var(--pay-line); margin:24px 0; }
.payment-label { display:block; font-size:11px; color:var(--pay-muted); margin-bottom:8px; }
.payment-purpose { margin:0; color:var(--pay-ink); font-size:12px; }
.payment-contact { display:block; color:#ff5102; font-size:12px; margin-top:24px; text-decoration:none; }
.payment-live { min-height:22px; font-size:12px; color:var(--pay-muted); margin:20px 0 0; }
.payment-preview dialog { padding:0; border:1px solid color-mix(in srgb,var(--ink) 9%,transparent); border-radius:18px; background:var(--mq-surface); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:0 24px 72px rgba(0,0,0,.22); color:var(--pay-ink); width:480px; max-width:calc(100vw - 48px); }
/* Match Studio windows: translated entrance/exit content must not create a
   temporary scrollbar. Native scrolling returns when the motion settles. */
.payment-preview dialog[data-window-moving] { overflow:hidden; }
.payment-preview dialog::backdrop { background:transparent; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:backdrop-filter 1000ms var(--mq-surface-ease),-webkit-backdrop-filter 1000ms var(--mq-surface-ease); }
.payment-preview dialog[data-closing]::backdrop { -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px); }
@starting-style { .payment-preview dialog[open]::backdrop { -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px); } }
.payment-dialog-inner { padding:28px; }
.payment-dialog-top { -webkit-user-select:none; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.payment-dialog-top h2 { font-size:18px; font-weight:400; margin:0; }
.payment-close { width:34px; height:34px; display:grid; place-items:center; background:transparent; border:0; color:var(--pay-muted); border-radius:0; transition:color 240ms ease; }
.payment-close:hover { background:transparent; color:var(--ink); }
/* Same reversible close-icon recipe as studio-chrome.css; preview only loads the base stylesheet. */
.payment-close svg { width:16px; height:16px; transform:rotate(0deg); transform-origin:center; transition:transform 840ms cubic-bezier(.4,0,.2,1); }
.payment-close:is(:hover,:focus-visible) svg { transform:rotate(90deg); }
html[data-motion="reduced"] .payment-close svg { transition:none; transform:none; }
.payment-dialog-inner p { font-size:13px; color:var(--pay-muted); }
.payment-preview [hidden] { display:none!important; }
.payment-config { margin:0 0 24px; color:var(--pay-muted); font-size:12px; }
.payment-config-trigger { display:inline-flex; align-items:center; gap:12px; padding:10px 14px; margin-left:-14px; color:var(--pay-muted); border:0; border-radius:999px; background:transparent; transition:color 200ms,background 200ms; }
.payment-config-trigger:hover { color:var(--pay-ink); background:rgba(255,255,255,.035); }
.payment-config-trigger svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; transition:transform 760ms cubic-bezier(.45,0,.25,1); }
.payment-config-trigger[aria-expanded="true"] svg { transform:rotate(180deg); }
.payment-config-panel { height:0; overflow:hidden; }
.payment-config form { padding:18px 0 24px; max-width:650px; }
.payment-config-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.payment-config label { display:block; margin:12px 0; }
.payment-config input,.payment-config textarea { display:block; width:100%; color:var(--pay-ink); background:var(--pay-input); border:1px solid var(--pay-line); border-radius:14px; padding:12px 15px; margin-top:7px; font:13px var(--sans); font-variant-numeric:tabular-nums; outline:none; transition:border-color 200ms,box-shadow 200ms,background 200ms; }
.payment-config :is(input,textarea):focus { border-color:#8a8a8a; background:var(--pay-hover); box-shadow:0 0 0 2px rgba(255,255,255,.055); }
.payment-config :is(input,textarea)::selection { color:#fff; background:#494949; }
.payment-config textarea { resize:vertical; }
#copy-purpose { margin-top:14px; }
/* Existing Studio account action recipe: studio-account.css, label/arrow
   760ms cubic-bezier(.45,0,.25,1); growing hairline from account-nav__label.
   The clickable box stays still throughout entry and reversal. */
.payment-preview :is(.payment-link,.payment-contact) {
  --account-ease:cubic-bezier(.45,0,.25,1);
  position:relative; display:inline-flex; align-items:baseline; gap:5px;
  width:fit-content; max-width:100%; padding-block:5px; text-align:left;
  text-decoration:none;
}
.payment-preview :is(.payment-link,.payment-contact)::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.55; transform:scaleX(0); transform-origin:center;
  transition:transform 700ms var(--account-ease),opacity 700ms var(--account-ease);
}
.payment-action__label,.payment-action__arrow { display:inline-block; transition:transform 700ms var(--account-ease); }
.payment-action__label { min-width:0; }
.payment-action__arrow { flex-shrink:0; }
.payment-preview :is(.payment-link,.payment-contact):is(:hover,:focus-visible)::after { transform:scaleX(1); opacity:1; }
.payment-preview :is(.payment-link,.payment-contact):is(:hover,:focus-visible) .payment-action__label { transform:none; }
.payment-preview :is(.payment-link,.payment-contact):is(:hover,:focus-visible) .payment-action__arrow { transform:translateX(3px); }
html[data-motion="reduced"] .payment-preview :is(.payment-action__label,.payment-action__arrow) { transform:none!important; transition:none!important; }
html[data-motion="reduced"] .payment-preview :is(.payment-link,.payment-contact)::after { transition:none!important; }
@media(prefers-reduced-motion:reduce) {
  .payment-preview dialog::backdrop { transition:none; }
  .payment-close svg { transition:none; transform:none!important; }
  .payment-copy svg { transition:none; }
  .payment-config-trigger svg { transition:none; }
  .payment-preview :is(.payment-action__label,.payment-action__arrow) { transform:none!important; transition:none!important; }
  .payment-preview :is(.payment-link,.payment-contact)::after { transition:none!important; }
}

.payment-preview .payment-close:focus-visible { outline:0; color:var(--ink); }
.payment-preview .payment-close:focus-visible svg { stroke-width:1.8; filter:drop-shadow(0 0 2px currentColor); }
.payment-primary { color:var(--pay-bg); }
html[data-theme="light"] .payment-primary:is(:hover,:focus-visible) { background:#303030; color:#fff; border-color:#303030; box-shadow:none; }
html[data-theme="light"] .payment-primary:active { background:#454545; }
html[data-motion="reduced"] .payment-preview dialog::backdrop,
html[data-motion="reduced"] .payment-preview .payment-config-trigger svg { transition:none; }
@media(max-width:760px) {
  .payment-top { padding:24px; align-items:flex-start; flex-wrap:wrap; gap:12px; }
  .payment-return { padding:0 24px; }
  #payment-root { padding:0 24px; margin:36px auto 40px; }
  .payment-grid { grid-template-columns:minmax(0,1fr); }
  .payment-heading { font-size:34px; }
  .payment-config-grid { grid-template-columns:1fr; gap:0; }
  .payment-card { padding:20px; }
  .payment-bank { flex-wrap:wrap; }
  .payment-bank small { margin-left:17px; flex-basis:100%; }
  .payment-row { grid-template-columns:minmax(0,1fr) 34px; gap:4px 10px; }
  .payment-row dt { grid-column:1; }
  .payment-row dd { grid-column:1; }
  .payment-copy { grid-column:2; grid-row:1 / 3; width:34px; height:44px; }
  .payment-preview dialog { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
  .payment-dialog-inner { padding:20px; }
  .payment-close { width:44px; height:44px; flex-shrink:0; }
  .payment-methods button { padding:10px 8px; }
}
/* The preview has no main-app theme controller; derive text from its own
   contextual tokens rather than the base stylesheet's initial dark values. */
html:has(.payment-preview) { --ink:var(--pay-ink); --ink2:var(--pay-muted); --bg0:var(--pay-bg); }
.payment-preview { color:var(--pay-ink); color-scheme:dark; }
html[data-theme="light"] .payment-preview { color-scheme:light; }
.payment-preview dialog { background:color-mix(in srgb,var(--pay-card) 94%,transparent); }

/* Shared Studio controls: stable text, matte capsule, reversible arrow. */
.payment-preview .payment-primary { box-shadow:none; border-color:transparent; }
.payment-preview .payment-primary:is(:hover,:focus-visible,:active) { box-shadow:none; }
.payment-preview .payment-close:focus-visible svg { filter:none; stroke-width:2; }