:root { color-scheme: dark; --ink: #f8f3df; --muted: #b7cbc2; --gold: #f2ce75; --line: rgba(255, 255, 255, .16); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-width: 100%; min-height: 100%; margin: 0; }
body { min-height: 100dvh; background: radial-gradient(circle at 50% -15%, rgba(52, 164, 120, .46), transparent 38%), linear-gradient(150deg, #0a644c, #06382e 60%, #03231d); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", sans-serif; }
.support-page { min-height: 100dvh; }
.support-header { display: grid; min-height: calc(64px + env(safe-area-inset-top)); grid-template-columns: 1fr auto 1fr; align-items: center; padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); border-bottom: 1px solid rgba(255, 255, 255, .12); background: rgba(2, 27, 21, .9); }
.support-header > div { text-align: center; }
.support-header span, .eyebrow { display: block; color: var(--gold); font-family: Georgia, serif; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.support-header h1 { margin: 2px 0 0; font-size: 21px; line-height: 1.1; }
.back-link { display: grid; justify-self: start; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .07); color: #dcebe4; font-size: 28px; font-weight: 500; line-height: 1; text-decoration: none; }
.support-main { padding: 20px max(14px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.support-card { width: min(640px, 100%); margin: 0 auto; padding: clamp(18px, 4vw, 30px); border: 1px solid var(--line); border-radius: 18px; background: rgba(3, 29, 23, .86); }
.support-card h2 { margin: 7px 0 10px; font-size: clamp(21px, 5vw, 28px); }
.support-card p { color: var(--muted); line-height: 1.65; }
.qr-link { display: block; width: min(240px, 100%); margin: 22px auto 0; overflow: visible; }
.qr-link img { display: block; width: 100%; height: auto !important; max-height: none; aspect-ratio: 642 / 1280; object-fit: contain; object-position: center top; border-radius: 8px; }
.scan-note { text-align: center; font-size: 13px; }
.payment-details { margin: 22px 0 12px; border-top: 1px solid var(--line); }
.payment-details > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.payment-details dt { color: var(--muted); font-size: 13px; }
.payment-details dd { min-width: 0; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.copy-button { width: 100%; min-height: 46px; border: 1px solid var(--gold); border-radius: 12px; background: rgba(242, 206, 117, .12); color: var(--gold); font: inherit; font-weight: 800; }
.copy-button:disabled { opacity: .5; }
.copy-status { min-height: 1.5em; margin: 6px 0 0; font-size: 13px; }
.offline-notice { padding: 14px; border: 1px solid var(--gold); border-radius: 10px; color: var(--gold); }
.caution { margin-top: 22px; font-size: 13px; }
.wallet-note { margin-bottom: 0; font-size: 13px; }
.wallet-note a { color: var(--gold); text-underline-offset: 3px; }
@media (orientation: landscape) and (max-height: 500px) { .support-header { min-height: calc(52px + env(safe-area-inset-top)); } .support-header h1 { font-size: 18px; } .support-main { padding-top: 12px; } }