:root {
  --gpay-orange: #FF8500;
  --gpay-orange-2: #FF5722;
  --gpay-black: #080A0D;
  --gpay-dark: #11151A;
  --gpay-panel: #171C22;
  --gpay-line: #272D35;
  --gpay-white: #FFFFFF;
  --gpay-text: #F5F5F5;
  --gpay-muted: #A7ADB7;
  --gpay-success: #35D19A;
  --gpay-radius: 14px;
}

* { box-sizing: border-box; }
body.gpay-page { margin: 0; min-height: 100vh; background: var(--gpay-black); color: var(--gpay-text); font-family: Kanit, Arial, sans-serif; }
.gpay-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.gpay-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--gpay-line); }
.gpay-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--gpay-white); text-decoration: none; }
.gpay-brand img { width: auto; height: 42px; max-width: min(190px, 45vw); object-fit: contain; }
.gpay-brand strong { display: block; font-size: 21px; line-height: 1; }
.gpay-brand span { display: block; color: var(--gpay-orange); font-size: 10px; letter-spacing: 3px; margin-top: 3px; }
.gpay-links { display: flex; align-items: center; gap: 22px; color: var(--gpay-muted); font-size: 14px; }
.gpay-links a { color: inherit; text-decoration: none; }
.gpay-links a:hover { color: var(--gpay-white); }
.gpay-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 11px; padding: 11px 18px; background: linear-gradient(135deg, var(--gpay-orange), var(--gpay-orange-2)); color: var(--gpay-white); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.gpay-button:hover { filter: brightness(1.07); color: var(--gpay-white); }
.gpay-button.gpay-secondary { background: transparent; border-color: #3a414b; color: var(--gpay-text); }
.gpay-main { padding: 72px 0 88px; }
.gpay-kicker { color: var(--gpay-orange); letter-spacing: 2px; font-size: 12px; font-weight: 600; }
.gpay-title { margin: 10px 0 12px; font-size: clamp(32px, 5vw, 48px); line-height: 1.18; }
.gpay-subtitle { max-width: 650px; margin: 0; color: var(--gpay-muted); font-size: 17px; }
.gpay-card { max-width: 510px; margin: 36px auto 0; padding: 32px; border: 1px solid var(--gpay-line); border-radius: 20px; background: linear-gradient(145deg, var(--gpay-panel), #0c0f12); box-shadow: 0 25px 60px rgba(0, 0, 0, .25); }
.gpay-card h2 { margin: 0 0 8px; font-size: 26px; }.gpay-card p { margin: 0 0 24px; color: var(--gpay-muted); }
.gpay-field { display: block; margin: 16px 0; color: #d4d8dd; font-size: 14px; }.gpay-field input { width: 100%; margin-top: 7px; padding: 13px 14px; border: 1px solid #343b44; border-radius: 10px; outline: none; background: #0c0f12; color: var(--gpay-white); font: inherit; }.gpay-field input:focus { border-color: var(--gpay-orange); }
.gpay-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 24px; }.gpay-form-actions a { color: #ffac4c; font-size: 14px; text-decoration: none; }
.gpay-alert { margin: 16px 0; padding: 12px 14px; border-radius: 10px; background: rgba(255, 87, 34, .12); border: 1px solid rgba(255, 87, 34, .45); color: #ffc0ae; }.gpay-alert.success { background: rgba(53, 209, 154, .12); border-color: rgba(53, 209, 154, .45); color: #9df0d0; }
.gpay-options, .gpay-faq-grid, .gpay-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }.gpay-option, .gpay-faq, .gpay-contact { padding: 28px; border: 1px solid var(--gpay-line); border-radius: 18px; background: var(--gpay-panel); }.gpay-option h2, .gpay-faq h2, .gpay-contact h2 { margin: 12px 0 8px; font-size: 23px; }.gpay-option p, .gpay-faq p, .gpay-contact p { margin: 0 0 22px; color: var(--gpay-muted); }
.gpay-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: rgba(255, 133, 0, .12); color: var(--gpay-orange); font-size: 21px; }.gpay-contact a { color: #ffac4c; text-decoration: none; }
.gpay-footer { border-top: 1px solid var(--gpay-line); padding: 28px 0; color: #808894; font-size: 13px; }.gpay-footer-inner { display: flex; justify-content: space-between; gap: 18px; }.gpay-footer strong { color: var(--gpay-white); }
@media (max-width: 700px) { .gpay-shell { width: min(100% - 28px, 1120px); }.gpay-nav { min-height: 68px; gap: 14px; }.gpay-brand img { height: 36px; width: auto; }.gpay-links { display: none; }.gpay-main { padding: 48px 0 64px; }.gpay-card { padding: 24px; }.gpay-options, .gpay-faq-grid, .gpay-contact-grid { grid-template-columns: 1fr; }.gpay-footer-inner { flex-direction: column; } }

@media (max-width: 480px) { .gpay-shell { width: min(100% - 24px, 1120px); }.gpay-nav { min-height: 62px; gap: 10px; }.gpay-brand img { height: 31px; }.gpay-nav .gpay-button { min-height: 38px; padding: 8px 12px; font-size: .82rem; white-space: nowrap; }.gpay-main { padding: 34px 0 52px; }.gpay-card, .gpay-option, .gpay-faq, .gpay-contact { padding: 18px; }.gpay-title { font-size: clamp(1.8rem, 9vw, 2.35rem); }.gpay-subtitle { font-size: .96rem; }.gpay-form-actions, .gpay-auth-actions { align-items: stretch; flex-direction: column; }.gpay-form-actions .gpay-button, .gpay-auth-actions .gpay-button { justify-content: center; width: 100%; }.gpay-card table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; } }

.gpay-signup-content { margin-top: 30px; padding: 8px 24px 26px; border: 1px solid var(--gpay-line); border-radius: 20px; background: linear-gradient(145deg, var(--gpay-panel), #0c0f12); box-shadow: 0 25px 60px rgba(0, 0, 0, .25); }
.gpay-signup-content .container { width: 100%; padding: 0; color: var(--gpay-text); }.gpay-signup-content #headline { margin: 26px 0 10px; }.gpay-signup-content #headline h2 { color: var(--gpay-white) !important; font-size: 25px; }.gpay-signup-content p { color: var(--gpay-muted); }.gpay-signup-content .shareinfo { color: #c9cdd3; }.gpay-signup-content .table, .gpay-signup-content .table td { color: var(--gpay-text); background: transparent; }
.gpay-signup-content legend { color: var(--gpay-orange); font-size: 16px; font-weight: 600; }.gpay-signup-content .group label, .gpay-signup-content label { color: #e4e7eb; font-weight: 400; }.gpay-signup-content .help { color: var(--gpay-muted); }.gpay-signup-content .form-control, .gpay-signup-content select.form-control { min-height: 42px; border: 1px solid #343b44; border-radius: 9px; background: #0c0f12; color: var(--gpay-white); box-shadow: none; }.gpay-signup-content .form-control:focus { border-color: var(--gpay-orange); box-shadow: none; }
.gpay-signup-content .btn, .gpay-signup-content input[type="submit"] { border: 0; border-radius: 10px; padding: 11px 18px; background: linear-gradient(135deg, var(--gpay-orange), var(--gpay-orange-2)); color: var(--gpay-white); text-transform: none; }.gpay-signup-content #msg { margin: 18px 0; }.gpay-signup-content .msg_error, .gpay-signup-content .error { color: #ffb5a2; }.gpay-signup-content a { color: #ffac4c; }
@media (max-width: 700px) { .gpay-signup-content { padding: 4px 14px 20px; }.gpay-signup-content .row { margin-left: 0; margin-right: 0; } }
@media (max-width: 480px) { .gpay-signup-content { margin-top: 20px; padding: 2px 8px 16px; }.gpay-signup-content #headline h2 { font-size: 21px; }.gpay-signup-content .form-control, .gpay-signup-content select.form-control { font-size: 16px; }.gpay-signup-content .btn, .gpay-signup-content input[type="submit"] { width: 100%; } }