/* Personal deposit page — club388myanmar.com brand, "minimal single column". Design system (ui-ux-pro-max, 2026-09-29): one primary CTA per screen, large amount type, 8px spacing rhythm (8/16/24/32), Roboto only, tabular figures for money, visible labels + bordered inputs, SVG icons, 48px touch targets. Colours are the site's own: navy ground, gold pill CTA, cream accent, blue links. */ #pl-app { --bg: #132535; /* site background */ --surface: #1a3046; /* panel */ --surface-2: #213a53; /* input / chip */ --line: rgba(255, 255, 255, .09); --text: #ffffff; --text-2: #a9b8c7; /* secondary text */ --hint: rgba(169, 184, 199, .45); /* input placeholder "0" — quick-amount chips use it too (Jimmy) */ --cream: #ffe7bd; /* site cream */ --gold: #f0c05a; --blue: #1d91d5; /* site action blue */ --blue-text: #5cb8f0; /* blue that reads on navy */ --ok: #3ecf8e; --err: #ff8a7a; --r-lg: 16px; --r-md: 12px; --r-pill: 999px; --font: "Roboto", "Padauk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #pl-app:lang(my) { --font: "Padauk", "Roboto", sans-serif; } #pl-app, #pl-app * { box-sizing: border-box; } /* Inside the site theme (2026-09-30): every rule here is prefixed #pl-app so the theme's own button / heading / link styles (and their :hover) never reach the app. The reset below is (1,0,0) — the app's own rules are all (1,1,0)+ and win over it. */ #pl-app { font: 400 16px/1.5 var(--font); color: var(--text); text-align: left; -webkit-text-size-adjust: 100%; } #pl-app :where(button, input, select, textarea) { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0; font: inherit; color: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; text-decoration: none; } #pl-app :where(h1, h2, h3, p, ul, li, label, small, strong, b, span, a, summary, details) { font-family: inherit; letter-spacing: normal; text-transform: none; } #pl-app :where(h1, h2, h3) { color: inherit; line-height: 1.3; padding: 0; clear: none; } #pl-app button, #pl-app input, #pl-app a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #pl-app button { cursor: pointer; } #pl-app :focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; } #pl-app .num { font-variant-numeric: tabular-nums; } #pl-app svg.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #pl-app { max-width: 440px; margin: 0 auto; padding: 0 16px calc(32px + env(safe-area-inset-bottom)); } #pl-app .pl-loading { display: grid; place-items: center; min-height: 60dvh; } #pl-app .spin { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--gold); animation: rot .8s linear infinite; } #pl-app .spin.sm { width: 16px; height: 16px; } @keyframes rot { to { transform: rotate(360deg); } } /* header */ #pl-app .top { display: flex; align-items: center; justify-content: space-between; height: 64px; } #pl-app .top img { height: 32px; width: auto; display: block; } #pl-app .top b { color: var(--gold); font-size: 20px; } #pl-app .lang { height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: none; color: var(--text-2); font-size: 14px; } /* account strip */ #pl-app .who { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); margin-bottom: 16px; } #pl-app .who .av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--cream); } #pl-app .who div { min-width: 0; flex: 1; } #pl-app .who small { display: block; font-size: 13px; color: var(--text-2); } #pl-app .who strong { display: block; font-size: 17px; font-weight: 500; letter-spacing: .02em; overflow-wrap: anywhere; } #pl-app .who .muted { font-size: 14px; font-weight: 400; color: var(--text-2); letter-spacing: 0; } /* the one panel */ #pl-app .panel { padding: 24px 16px; border-radius: var(--r-lg); background: var(--surface); } #pl-app .panel h1 { margin: 0 0 24px; font-size: 22px; font-weight: 700; } #pl-app .field label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); margin-bottom: 8px; } #pl-app .field label svg.ic { width: 18px; height: 18px; color: var(--gold); } #pl-app .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: -8px 0 24px; border-radius: var(--r-pill); background: var(--bg); } #pl-app .tabs button { height: 44px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); font-size: 16px; font-weight: 500; transition: background .15s ease, color .15s ease; } #pl-app .tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; } #pl-app .tabs button svg.ic { width: 18px; height: 18px; } #pl-app .tabs button.on { background: var(--surface-2); color: var(--text); font-weight: 700; } #pl-app .tabs button.on svg.ic { color: var(--gold); } /* Panel member centre (member-panel.js, 2026-11-04): Deposit · Withdraw · Transfer */ #pl-app .tabs.t3 { grid-template-columns: repeat(3, 1fr); } #pl-app .panel.money { margin-top: 24px; } #pl-app .balance { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); text-align: left; } #pl-app .balance small { display: block; font-size: 13px; color: var(--text-2); } #pl-app .balance strong { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 22px; font-weight: 700; } #pl-app .balance svg.ic { color: var(--blue-text); } #pl-app .all { flex: none; height: 32px; margin-left: 8px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--gold); background: none; color: var(--cream); font-size: 13px; font-weight: 500; } #pl-app .text { display: block; width: 100%; height: 52px; margin-top: 8px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 16px; } #pl-app .text:focus { outline: none; border-color: var(--gold); } #pl-app .text::placeholder { color: rgba(169, 184, 199, .6); } #pl-app .bound { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); } #pl-app .bound div { flex: 1; min-width: 0; display: flex; flex-direction: column; } #pl-app .bound span { font-size: 14px; color: var(--text-2); } #pl-app .bound svg.ic { color: var(--text-2); } #pl-app .empty { margin: 8px 0; color: var(--text-2); text-align: center; } #pl-app .amount { display: flex; align-items: center; height: 64px; padding: 0 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); transition: border-color .15s ease; } #pl-app .amount:focus-within { border-color: var(--gold); } #pl-app .amount input { flex: 1; min-width: 0; border: 0; background: none; font-size: 30px; font-weight: 700; color: var(--text); padding: 0; } #pl-app .amount input:focus { outline: none; } #pl-app .amount input::placeholder { color: var(--hint); font-weight: 400; } #pl-app .amount span { font-size: 16px; color: var(--text-2); margin-left: 8px; } /* amount below the picked bonus's minimum (after the popup said so): red number + a small ⊗ right after it */ #pl-app .amount { position: relative; } #pl-app .amount.bad input { color: var(--err); } #pl-app .amount .xbad { position: absolute; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--err); pointer-events: none; } #pl-app .hint { margin: 8px 0 0; font-size: 13px; color: var(--text-2); } #pl-app .hint.err { color: var(--err); } #pl-app .chips { display: flex; gap: 8px; margin-top: 1px; padding: 7px 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } #pl-app .chips::-webkit-scrollbar { display: none; } /* exactly 3½ chips in view: the half chip says "there is more, swipe" */ #pl-app .chips button { flex: 0 0 calc((100% - 24px) / 3.5); position: relative; height: 30px; padding: 0 4px; scroll-snap-align: start; border-radius: var(--r-pill); border: 1px solid var(--line); background: none; color: var(--hint); font-size: 13px; white-space: nowrap; transition: background .15s ease, border-color .15s ease; } /* visual 30px (Jimmy: half the air), but the finger still gets a 44px target */ #pl-app .chips button::before { content: ""; position: absolute; inset: -7px 0; } #pl-app .chips button.on { border-color: var(--gold); background: rgba(240, 192, 90, .12); color: var(--cream); } #pl-app .lblrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } #pl-app .lblrow label { margin-bottom: 8px; } #pl-app .promo { font-size: 13px; font-weight: 500; color: var(--blue-text); text-decoration: none; white-space: nowrap; padding: 8px 0; } #pl-app .select { position: relative; } #pl-app .select select { width: 100%; height: 52px; padding: 0 44px 0 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 16px; -webkit-appearance: none; appearance: none; } #pl-app .select select:focus { outline: none; border-color: var(--gold); } #pl-app .select.has-dot select { padding-left: 42px; color: transparent; } /* text drawn by .val at 14px; the select stays 16px so iOS doesn't zoom on tap */ #pl-app .select.has-dot select option { color: #132535; background: #fff; } #pl-app .select .val { position: absolute; left: 42px; right: 44px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* radio-style marker: outer ring + solid centre when a bonus is picked, empty ring for "No bonus" */ #pl-app .select .dot { position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 1.5px solid var(--text-2); pointer-events: none; transition: border-color .15s ease; } #pl-app .select .dot::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--text); transform: scale(0); transition: transform .15s ease; } #pl-app .select.is-on .dot { border-color: var(--text); } #pl-app .select.is-on .dot::after { transform: scale(1); } #pl-app .select svg.ic { position: absolute; right: 16px; top: 16px; pointer-events: none; color: var(--text-2); } #pl-app .bonus small { display: block; margin-top: 2px; font-size: 12.5px; opacity: .8; } #pl-app .bonus { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; padding: 0; text-align: center; color: var(--cream); } #pl-app .bonus p { margin: 0; font-size: 14px; line-height: 1.4; } #pl-app .bonus b { font-weight: 700; } #pl-app .bonus.off { color: var(--text-2); } #pl-app .cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 80%; height: 42px; margin: 24px auto 0; border: 0; border-radius: var(--r-pill); background: linear-gradient(180deg, #fff1c9 0%, #f3cd6e 46%, #dcaa3f 54%, #f0c865 100%); color: #152433; font-size: 17px; font-weight: 700; box-shadow: inset 0 -2px 0 rgba(120, 72, 0, .3); transition: transform .12s ease, opacity .15s ease; } #pl-app .cta:active { transform: scale(.98); } #pl-app .cta[disabled] { opacity: .5; cursor: default; } #pl-app .secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--text-2); } #pl-app .secure svg.ic { width: 14px; height: 14px; } /* waiting state (replaces the form while a deposit is open) */ #pl-app .wait { text-align: center; } #pl-app .wait .big { margin: 16px 0 4px; font-size: 32px; font-weight: 700; } #pl-app .wait .plus { margin: 0; color: var(--ok); font-weight: 500; } #pl-app .wait .st { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 14px; } #pl-app .wait .again { display: block; margin-top: 16px; color: var(--blue-text); font-size: 15px; background: none; border: 0; width: 100%; min-height: 44px; } /* quiet sections */ #pl-app .sec { margin-top: 32px; } #pl-app .sec h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--text-2); } #pl-app .sec h2 svg.ic { width: 18px; height: 18px; color: var(--gold); } #pl-app .faq details { border-bottom: 1px solid var(--line); } #pl-app .faq details:last-child { border-bottom: 0; } #pl-app .faq summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 0; list-style: none; cursor: pointer; font-size: 15px; } #pl-app .faq summary::-webkit-details-marker { display: none; } #pl-app .faq summary svg.ic { margin-left: auto; width: 16px; height: 16px; color: var(--text-2); transition: transform .2s ease; } #pl-app .faq details[open] summary svg.ic { transform: rotate(90deg); } #pl-app .faq p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--text-2); } #pl-app .list { list-style: none; margin: 0; padding: 0; } #pl-app .list li { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); } #pl-app .list li:last-child { border-bottom: 0; } #pl-app .list small { display: block; font-size: 13px; color: var(--text-2); } #pl-app .list .amt { font-weight: 500; } #pl-app .list .amt.no { color: var(--text-2); text-decoration: line-through; } #pl-app .links { display: flex; flex-direction: column; } #pl-app .links a, #pl-app .links button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; text-decoration: none; color: var(--text); font-size: 15px; } #pl-app .links > :last-child { border-bottom: 0; } #pl-app .links .go { margin-left: auto; color: var(--text-2); } #pl-app .links svg.ic { color: var(--blue-text); } /* credentials sheet */ #pl-app .scrim { position: fixed; inset: 0; background: rgba(4, 10, 16, .6); display: flex; align-items: flex-end; justify-content: center; z-index: 20; animation: fade .2s ease-out; } #pl-app .sheet { width: 100%; max-width: 440px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--surface); animation: up .28s cubic-bezier(.2, .8, .2, 1); } #pl-app .sheet .okic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(62, 207, 142, .15); color: var(--ok); margin-bottom: 16px; } #pl-app .sheet h2 { margin: 0 0 4px; font-size: 22px; } #pl-app .sheet p { margin: 0 0 16px; color: var(--text-2); font-size: 14px; } #pl-app .cred { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 8px; } #pl-app .cred div { flex: 1; min-width: 0; } #pl-app .cred small { display: block; font-size: 13px; color: var(--text-2); } #pl-app .cred strong { font-size: 20px; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; } #pl-app .copy { height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--blue); background: none; color: var(--blue-text); font-size: 14px; font-weight: 500; } #pl-app .copy.done { border-color: var(--ok); color: var(--ok); } #pl-app .sheet .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; } #pl-app .btn2 { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: var(--r-pill); border: 1px solid var(--line); background: none; color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none; } #pl-app .btn2.blue { background: var(--blue); border-color: var(--blue); color: #fff; } @keyframes fade { from { opacity: 0; } } @keyframes up { from { transform: translateY(100%); } } #pl-app .msg { padding: 24px 16px; border-radius: var(--r-lg); background: var(--surface); color: var(--text-2); text-align: center; } /* ── member portal (2026-09-30) — same tokens, same components ─────────── */ #pl-app .top .brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; } #pl-app .menu-btn { width: 44px; height: 44px; margin: 0 8px 0 -10px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: none; color: var(--text); } #pl-app .menu-btn svg.ic { width: 24px; height: 24px; } #pl-app .who[data-view] { cursor: pointer; } #pl-app .who > svg.ic.go { color: var(--text-2); width: 18px; height: 18px; } #pl-app .panel .sub { margin: -16px 0 24px; font-size: 14px; color: var(--text-2); line-height: 1.5; } #pl-app .panel .sub2 { margin: 0 0 12px; font-size: 14px; font-weight: 500; color: var(--text-2); } #pl-app .panel .field + .field { margin-top: 20px; } #pl-app .panel .field .text { margin-top: 0; } #pl-app .pwbox { position: relative; } #pl-app .pwbox .text { padding-right: 52px; } #pl-app .eye { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--text-2); } #pl-app .check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; font-size: 14px; color: var(--text-2); cursor: pointer; } #pl-app .check input { width: 18px; height: 18px; accent-color: var(--gold); } #pl-app .auth .cta { width: 100%; } #pl-app .alt { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--text-2); } #pl-app .alt a { color: var(--blue-text); font-weight: 500; text-decoration: none; padding: 12px 4px; } #pl-app .auth .secure { align-items: flex-start; text-align: left; line-height: 1.5; margin-top: 16px; } #pl-app .auth .secure svg.ic { margin-top: 3px; } #pl-app .hint.ok { display: flex; align-items: center; gap: 8px; color: var(--ok); } #pl-app .hint.ok svg.ic { width: 18px !important; height: 18px !important; } #pl-app .hint svg.ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; } #pl-app .notice { display: flex; gap: 10px; margin: -8px 0 20px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(240, 192, 90, .1); border: 1px solid rgba(240, 192, 90, .35); color: var(--cream); } #pl-app .notice p { margin: 0; font-size: 13.5px; line-height: 1.5; } #pl-app .notice b { display: block; font-size: 14px; } #pl-app .notice svg.ic { width: 18px; height: 18px; margin-top: 1px; color: var(--gold); } #pl-app .list small.note { color: var(--err); font-size: 12.5px; line-height: 1.4; margin-top: 2px; } #pl-app .list small.st2 { font-size: 12.5px; } #pl-app .list li > span:first-child { padding: 10px 12px 10px 0; min-width: 0; } #pl-app .list .amt.pend { color: var(--cream); } #pl-app .list.kv li > span:last-child { color: var(--text-2); text-align: right; overflow-wrap: anywhere; } #pl-app .btn2.more { width: 100%; margin-top: 16px; } #pl-app .eye2 { width: 40px; height: 40px; flex: none; margin-right: -6px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text-2); } #pl-app .eye2[aria-pressed="true"] { color: var(--gold); } #pl-app .cred .linkv { font-size: 14px; font-weight: 500; letter-spacing: 0; } #pl-app .panel > .cta { width: 100%; } body.noscroll { overflow: hidden; } #pl-app .dscrim { position: fixed; inset: 0; z-index: 30; background: rgba(4, 10, 16, .6); animation: fade .2s ease-out; } #pl-app .drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 31; width: min(300px, 84vw); padding: 0 12px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--surface); box-shadow: 8px 0 32px rgba(0, 0, 0, .35); animation: slin .25s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; } #pl-app .drawer .dhead { display: flex; align-items: center; gap: 12px; padding: 20px 4px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } #pl-app .drawer .dhead .av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--cream); } #pl-app .drawer .dhead div { flex: 1; min-width: 0; } #pl-app .drawer .dhead strong { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #pl-app .drawer .dhead small { display: block; font-size: 13px; color: var(--text-2); } #pl-app .drawer .x { width: 44px; height: 44px; margin-right: -8px; display: grid; place-items: center; border: 0; background: none; color: var(--text-2); } #pl-app .drawer > button { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: none; color: var(--text); font-size: 15px; text-align: left; } #pl-app .drawer > button svg.ic { color: var(--text-2); } #pl-app .drawer > button.on { background: var(--surface-2); font-weight: 700; } #pl-app .drawer > button.on svg.ic { color: var(--gold); } #pl-app .drawer > button.out { margin-top: auto; color: var(--err); } #pl-app .drawer > button.out svg.ic { color: var(--err); } @keyframes slin { from { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { #pl-app .spin { animation-duration: 3s; } #pl-app .scrim, #pl-app .sheet, #pl-app .dscrim, #pl-app .drawer { animation: none; } } /* ── inside the site theme (/member/login/, /member/ — Jimmy 2026-09-30: the site's own header) ── */ body.jpr-member-page, body.jpr-member-page #content, body.jpr-member-page .site-content { background: #132535; } /* the site's own page colour */ #pl-app.pl-theme { width: 100%; padding-top: 4px; padding-bottom: 48px; } #pl-app .subbar { display: flex; align-items: center; justify-content: flex-end; min-height: 56px; } #pl-app .subbar .lang { height: 36px; } /* desktop has no hamburger menu → the member sections sit under the language button instead */ #pl-app .mnav { display: none; } @media (min-width: 922px) { /* desktop: the member sections as a left column (same list look as the old drawer), content on the right */ #pl-app.pl-theme.pl-member { max-width: 820px; display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 32px; align-items: start; } #pl-app.pl-theme.pl-member > * { grid-column: 2; } #pl-app.pl-theme.pl-member > .subbar { grid-column: 1 / -1; } #pl-app .mnav { grid-column: 1 !important; grid-row: 2 / span 30; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--r-lg); background: var(--surface); } #pl-app .mnav button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--r-md); color: var(--text); font-size: 15px; text-align: left; } #pl-app .mnav button svg.ic { color: var(--text-2); } #pl-app .mnav button:hover { background: rgba(255, 255, 255, .04); } #pl-app .mnav button.on { background: var(--surface-2); font-weight: 700; } #pl-app .mnav button.on svg.ic { color: var(--gold); } #pl-app .mnav button.out { margin-top: 8px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); color: var(--err); } #pl-app .mnav button.out svg.ic { color: var(--err); } } /* ── "How deposits / withdrawals work" (Jimmy 09-30) ─────────────────────────────────────────────── Link under the tabs; the sheet lives outside #pl-app (see paylink.js), so it carries its own tokens. One orchestrated moment: on open, a gold rail runs down through the three steps and each marker lights as the rail reaches it, ending on the outcome (automatic credit / money in your bank). */ #pl-app .howto { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 36px; margin: -14px 0 14px; color: var(--blue-text); font-size: 13.5px; } #pl-app .howto svg.ic { width: 16px; height: 16px; } html.jpr-noscroll, html.jpr-noscroll body { overflow: hidden; } html.jpr-noscroll #chat-widget-container { visibility: hidden !important; } /* LiveChat's bubble would sit on the button */ #pl-guide { --g-bg: #1a3046; --g-text: #fff; --g-text-2: #a9b8c7; --g-cream: #ffe7bd; --g-gold: #f0c05a; --g-ok: #3ecf8e; --g-font: "Roboto", "Padauk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: none; } #pl-guide:lang(my) { --g-font: "Padauk", "Roboto", sans-serif; } #pl-guide.on { display: block; position: fixed; inset: 0; z-index: 99999; font: 400 16px/1.5 var(--g-font); color: var(--g-text); text-align: left; } #pl-guide *, #pl-guide *::before, #pl-guide *::after { box-sizing: border-box; } #pl-guide :where(h2, p, ol, li, strong, span, button) { margin: 0; padding: 0; font-family: inherit; letter-spacing: normal; text-transform: none; } #pl-guide svg.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #pl-guide .gscrim { position: absolute; inset: 0; background: rgba(4, 10, 16, .66); animation: gFade .22s ease-out; } #pl-guide .gsheet:focus { outline: none; } #pl-guide .gsheet { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; max-width: 440px; max-height: 92dvh; overflow-y: auto; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--g-bg); box-shadow: 0 -12px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 231, 189, .14); animation: gUp .32s cubic-bezier(.2, .8, .2, 1); } #pl-guide .grab { display: block; width: 40px; height: 4px; margin: 0 auto 18px; border-radius: 4px; background: rgba(255, 255, 255, .18); } #pl-guide h2 { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--g-text); } #pl-guide .gsub { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--g-cream); } #pl-guide .gsteps { list-style: none; margin: 22px 0 0; } /* the rail: one gold segment under each marker, drawn down to the next one just before it lights */ #pl-guide .gsteps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: rgba(255, 255, 255, .1); } #pl-guide .gsteps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: linear-gradient(180deg, #f3cd6e, #e2a332); transform-origin: top; animation: gRail .38s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(.4s + var(--i) * .38s); } #pl-guide .gsteps li { position: relative; z-index: 1; display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding-bottom: 18px; } #pl-guide .gm { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #152433; background: linear-gradient(180deg, #fff1c9 0%, #f3cd6e 46%, #dcaa3f 54%, #f0c865 100%); box-shadow: 0 0 0 4px var(--g-bg); animation: gLit .35s ease-out both; animation-delay: calc(.25s + var(--i) * .38s); } #pl-guide li strong { display: block; padding-top: 6px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--g-text); } #pl-guide li p { margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--g-text-2); } /* the outcome step: the thing this sheet exists to say */ #pl-guide li.goal { padding: 0; } #pl-guide li.goal > div { margin: -4px 0 0 -6px; padding: 10px 14px 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(240, 192, 90, .14), rgba(240, 192, 90, .05)); border: 1px solid rgba(240, 192, 90, .35); } #pl-guide li.goal strong { padding-top: 0; color: var(--g-cream); font-size: 17px; } #pl-guide li.goal p { color: #d8e1ea; } #pl-guide li.goal .gn { margin-top: 8px; font-size: 13px; color: var(--g-cream); } #pl-guide li.goal .gm svg.ic { width: 20px; height: 20px; stroke-width: 3; } #pl-guide li.goal .gm { box-shadow: 0 0 0 4px var(--g-bg), 0 0 18px rgba(240, 192, 90, .55); } #pl-guide .gsafe { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: rgba(62, 207, 142, .08); border: 1px solid rgba(62, 207, 142, .28); font-size: 13.5px; line-height: 1.5; color: #cfeee0; } #pl-guide .gsafe svg.ic { width: 18px; height: 18px; margin-top: 1px; color: var(--g-ok); } #pl-guide .gok { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 18px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, #fff1c9 0%, #f3cd6e 46%, #dcaa3f 54%, #f0c865 100%); color: #152433; font: 700 17px/1 var(--g-font); box-shadow: inset 0 -2px 0 rgba(120, 72, 0, .3); -webkit-tap-highlight-color: transparent; } #pl-guide .gok:active { transform: scale(.98); } #pl-guide .gok:focus-visible { outline: 2px solid var(--g-cream); outline-offset: 3px; } /* bonus minimum popup (Jimmy 10-02): one fact — the minimum — in the guides' sheet */ #pl-guide .gmin { text-align: center; } #pl-guide .gmb { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(240, 192, 90, .12); color: var(--g-cream); font-size: 14px; font-weight: 600; line-height: 1.3; } #pl-guide .gmb svg.ic { width: 18px; height: 18px; color: var(--g-gold); } #pl-guide .gmb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #pl-guide .gmin h2 { margin-top: 16px; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--g-text-2); } #pl-guide .gmv { margin-top: 4px; font-size: 38px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff1c9 0%, #f3cd6e 50%, #dcaa3f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } #pl-guide .gmv span { margin-left: 8px; font-size: 20px; font-weight: 700; } #pl-guide .gmin .gok { margin-top: 22px; } @keyframes gFade { from { opacity: 0; } } @keyframes gUp { from { transform: translateY(100%); } } @keyframes gRail { from { transform: scaleY(0); } } @keyframes gLit { from { filter: grayscale(1) brightness(.55); transform: scale(.82); } 70% { transform: scale(1.08); } } @media (min-width: 600px) { #pl-guide .grab { display: none; } #pl-guide .gsheet { padding-top: 24px; bottom: auto; top: 50%; transform: translateY(-50%); border-radius: 22px; animation: gFade .22s ease-out; } } @media (prefers-reduced-motion: reduce) { #pl-guide .gscrim, #pl-guide .gsheet, #pl-guide .gsteps li::after, #pl-guide .gm { animation: none; } } #pl-app .subbar:empty { min-height: 16px; } /* ── "next is Vortex Pay" card (Jimmy 2026-10-03) — deliberately VP's look, not club388's: white card, KBZ blue (#2253A0, VP checkout theme "kbz"), same shape as VP's own .co-sheet-card, so the next page feels like the same place. Centered on every size. The card's bottom edge is the 1 s countdown (same as BK959's auth alert). ── */ #pl-vpgo { display: none; } #pl-vpgo.on { display: flex; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 24px; } #pl-vpgo .vg-scrim { position: absolute; inset: 0; background: rgba(17, 24, 39, .55); animation: gFade .18s ease-out; } #pl-vpgo .vg-card { position: relative; overflow: hidden; width: 100%; max-width: 400px; background: #fff; border-radius: 22px; padding: 26px 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: #111827; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .45); animation: vgPop .2s cubic-bezier(.2, .8, .2, 1); } #pl-vpgo .vg-mark { width: 56px; height: 56px; border-radius: 50%; background: rgba(34, 83, 160, .12); color: #2253A0; display: flex; align-items: center; justify-content: center; } #pl-vpgo .ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #pl-vpgo .vg-mark .ic { width: 26px; height: 26px; } #pl-vpgo h2 { margin: 2px 0 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: #111827; } #pl-vpgo .vg-amt { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.1; color: #111827; } #pl-vpgo .vg-amt span { font-size: 15px; font-weight: 700; color: #6B7280; } #pl-vpgo .vg-s { margin: 0; max-width: 330px; font-size: 14px; line-height: 1.6; color: #6B7280; } #pl-vpgo .vg-go { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: #2253A0; } /* . → .. → ... → (empty) → . …, fast: one round = 0.8 s, all three on the same clock */ #pl-vpgo .vg-dots i { font-style: normal; opacity: 0; animation: .8s steps(1, end) infinite; } #pl-vpgo .vg-dots i:nth-child(1) { animation-name: vgDot1; } #pl-vpgo .vg-dots i:nth-child(2) { animation-name: vgDot2; } #pl-vpgo .vg-dots i:nth-child(3) { animation-name: vgDot3; } @keyframes vgDot1 { 0% { opacity: 0; } 25% { opacity: 1; } } @keyframes vgDot2 { 0% { opacity: 0; } 50% { opacity: 1; } } @keyframes vgDot3 { 0% { opacity: 0; } 75% { opacity: 1; } } #pl-vpgo .vg-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(34, 83, 160, .14); } #pl-vpgo .vg-bar i { display: block; height: 100%; background: #2253A0; transform-origin: left center; animation: vgCount var(--vg-ms, 1000ms) linear both; } #pl-vpgo .vg-by { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12px; color: #6B7280; } #pl-vpgo .vg-by .ic { width: 13px; height: 13px; } @keyframes vgCount { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes vgPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { #pl-vpgo .vg-card, #pl-vpgo .vg-scrim { animation: none; } } /* ── login fields in the register form's look (Jimmy 2026-10-03): gold icon box + dark box, name as placeholder ── */ #pl-app .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #pl-app .field.box { display: flex; align-items: stretch; } #pl-app .field.box .ibox { flex: 0 0 42px; display: flex; align-items: center; justify-content: center; background: #ebba57; color: #3e3e3e; border-radius: 10px 0 0 10px; } #pl-app .field.box .pwbox { flex: 1; min-width: 0; } #pl-app .field.box .text { height: 42px; margin: 0; border: 0; border-radius: 0 10px 10px 0; background: #3e3e3e; color: #ebba57; padding: 0 14px; } #pl-app .field.box .pwbox .text { padding-right: 48px; } #pl-app .field.box .text::placeholder { color: #ccc; } #pl-app .field.box .text:focus { outline: none; box-shadow: inset 0 0 0 1px #ebba57; } #pl-app .field.box .eye { color: #ccc; top: 50%; transform: translateY(-50%); } /* ── login promo (member.login_promo · Jimmy 2026-10-03): animated banner over the login card + provider strip. One picture, 1000:448, everything in cqw so it scales as a whole. Each prop floats on its own clock. The banner box sits outside #pl-app (see paylink.js placePromo) but takes the same width/gutter. ── */ #pl-promo { max-width: 440px; margin: 0 auto; padding: 16px 16px 0; box-sizing: border-box; } /* 16 px under the site header; #pl-app's own top bar gives the gap below */ #pl-promo *, #pl-promo *::before { box-sizing: border-box; } /* login page, wide screens (10-14): banner left, login card right, tops aligned. The theme's container is a flex row from 922 px — the wrapper takes the whole row. Phones/tablets: the wrapper is a plain block (stacked, as before). */ .pl-split { box-sizing: border-box; width: 100%; } @media (min-width: 960px) { .pl-split { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: start; max-width: 1160px; margin: 0 auto; padding: 32px 24px 56px; } .pl-split > #pl-promo { max-width: none; margin: 0; padding: 0; position: sticky; top: 96px; } .pl-split > #pl-promo .c388ban { border-radius: 20px; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); } .pl-split > #pl-promo { margin-top: 20px; } /* = #pl-app's top bar, so banner and card tops line up */ .pl-split > #pl-app { margin: 0; width: auto; max-width: none; } .pl-split > #pl-app > .prov { display: none; } /* the providers strip moves under the banner (left column) */ .pl-split .pl-prov-side { display: block; margin-top: 8px; } } .pl-prov-side { display: none; } #pl-promo .c388ban { position: relative; aspect-ratio: 1000 / 448; margin: 0; border-radius: 16px; overflow: hidden; container-type: inline-size; isolation: isolate; background: #6a0f0f url(../img/login-promo/bg.webp) 70% 50% / cover no-repeat; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); } #pl-promo .c388ban > * { position: absolute; } #pl-promo .c388ban img { display: block; height: auto; max-width: none; } #pl-promo .c388ban .shade { inset: 0; background: linear-gradient(90deg, rgba(60, 0, 0, .55), rgba(60, 0, 0, .15) 42%, transparent 55%); } #pl-promo .c388ban .glow { left: 50%; top: -6%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 170, .65), rgba(255, 170, 70, .22) 45%, transparent 70%); animation: cbGlow 2.6s ease-in-out infinite alternate; } #pl-promo .c388ban .lan1 { left: 44%; top: -4%; width: 9%; transform-origin: 50% 0; animation: cbSway 2.8s ease-in-out infinite alternate; } #pl-promo .c388ban .lan2 { left: 92%; top: -6%; width: 6.5%; transform-origin: 50% 0; animation: cbSway 2.3s ease-in-out infinite alternate-reverse; } #pl-promo .c388ban .coin1 { left: 83%; top: 16%; width: 8%; animation: cbFl 2.4s ease-in-out infinite alternate; } #pl-promo .c388ban .ingot1 { left: 90%; top: 56%; width: 11%; animation: cbFl 3.1s ease-in-out infinite alternate-reverse; } #pl-promo .c388ban .env { left: 41%; top: 52%; width: 8%; transform: rotate(-14deg); animation: cbFlr 2.7s ease-in-out infinite alternate; } #pl-promo .c388ban .orb { left: 58%; top: 4%; width: 6.5%; animation: cbFl 2s ease-in-out infinite alternate; filter: drop-shadow(0 0 1.2cqw rgba(80, 180, 255, .8)); } #pl-promo .c388ban .chars { left: 43%; bottom: -13%; width: 55%; animation: cbBob 3.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 1cqw rgba(255, 200, 110, .55)) drop-shadow(0 1.2cqw 1.4cqw rgba(0, 0, 0, .45)); } #pl-promo .c388ban .ingotf { left: 84%; bottom: -9%; width: 15%; filter: blur(.3cqw); animation: cbFl 3.6s ease-in-out infinite alternate; } #pl-promo .c388ban .coinf { left: 32%; bottom: -10%; width: 9%; filter: blur(.35cqw); transform: rotate(18deg); animation: cbFl 2.9s ease-in-out infinite alternate-reverse; } #pl-promo .c388ban .spark { color: #fff3c4; font-size: 2.2cqw; text-shadow: 0 0 .8cqw #ffd76a, 0 0 1.6cqw #ff9b2e; animation: cbTw 1.6s ease-in-out infinite; } #pl-promo .c388ban .title { left: 3%; top: 9%; width: 41%; z-index: 5; filter: drop-shadow(0 .6cqw .8cqw rgba(0, 0, 0, .55)); animation: cbPulse 1s ease-in-out infinite; } #pl-promo .c388ban .vig { inset: 0; background: radial-gradient(ellipse at 62% 45%, transparent 58%, rgba(30, 0, 0, .45)); pointer-events: none; z-index: 6; } @keyframes cbGlow { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } } @keyframes cbBob { from { transform: translateY(0); } to { transform: translateY(-3.5%); } } @keyframes cbSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateY(-4%); } } @keyframes cbFl { from { transform: translateY(0) rotate(0); } to { transform: translateY(-18%) rotate(8deg); } } @keyframes cbFlr { from { transform: rotate(-14deg) translateY(0); } to { transform: rotate(-4deg) translateY(-16%); } } @keyframes cbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } @keyframes cbTw { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } } #pl-app .prov, #pl-promo .prov { margin: 20px 0 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } #pl-app .prov-h, #pl-promo .prov-h { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-align: center; color: #c9a75b; } #pl-app .prov-track, #pl-promo .prov-track { display: flex; gap: 12px; width: max-content; animation: cbMarquee 24s linear infinite; } #pl-app .prov .chip, #pl-promo .prov .chip { height: 46px; min-width: 96px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 167, 91, .25); display: flex; align-items: center; justify-content: center; } #pl-app .prov .chip img, #pl-promo .prov .chip img { max-height: 26px; max-width: 84px; width: auto; display: block; } @keyframes cbMarquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { #pl-promo .c388ban *, #pl-app .prov-track, #pl-promo .prov-track { animation: none !important; } } /* ── member centre B (1.5.0, member.light — Jimmy 10-05; design = claude.ai artifact Hp7aFfsGipcPNC7gs6ZEyV) ── Light pages (blue-grey ground, white cards, navy buttons, gold accents). The site header stays dark; no footer menu. Member centre + payment link: whole page light. Login: only the card is light (page stays dark). Off (no member.light) = everything above, unchanged. */ #pl-app.pl-light { --bg: #eef3f8; --surface: #ffffff; --surface-2: #f3f7fb; --line: #d3deea; --text: #152433; --text-2: #4f5d6e; --hint: rgba(79, 93, 110, .5); --cream: #8a5a00; --gold: #e2a332; --blue: #1e3a56; --blue-text: #1e5fa8; --ok: #1d7a43; --err: #c62828; --navy: #1e3a56; } body.jpr-light, body.jpr-light #content, body.jpr-light .site-content { background: #eef3f8; } #pl-app.pl-light .panel, #pl-app.pl-light .who, #pl-app.pl-light .msg { border: 1px solid var(--line); } #pl-app.pl-light .cta { background: var(--navy); color: #fff; box-shadow: none; } #pl-app.pl-light .tabs button.on { background: #fff; box-shadow: 0 1px 3px rgba(21, 36, 51, .12); } #pl-app.pl-light .select.has-dot select option { color: #152433; } #pl-app.pl-light .wait .st { background: #f3f7fb; } #pl-app.pl-light .list .amt.pend { color: #7a4f00; } @media (min-width: 922px) { #pl-app.pl-light .mnav { border: 1px solid var(--line); } #pl-app.pl-light .mnav button:hover { background: rgba(21, 36, 51, .04); } } /* payment link (own page, no site header): keep the logo on the site's dark bar */ #pl-app.pl-light .top { margin: 0 -16px 16px; padding: 0 16px; background: linear-gradient(180deg, #1e3344 0%, #0b1922 100%); } #pl-app.pl-light .top .lang { color: #ffe7bd; border-color: rgba(255, 231, 189, .3); } #pl-app.pl-light .top .menu-btn { color: #ffe7bd; } /* home */ #pl-app .b-id { display: flex; align-items: center; gap: 12px; padding: 12px 2px 0; } #pl-app .b-av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #ffea80, #ffaa00); color: #152433; } #pl-app .b-id div { flex: 1; min-width: 0; } #pl-app .b-id small { display: block; font-size: 12px; color: var(--text-2); } #pl-app .b-id strong { display: block; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; } #pl-app .b-id .b-none { font-size: 14px; } #pl-app .b-copy { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--navy); } #pl-app .b-copy.done { color: var(--ok); border-color: var(--ok); } /* game account card (10-14): "balance 0, deposit first" chip under the Player ID + the game password row, lined up with the ID text (avatar 40 + gap 12); eye + copy sit in the same right-hand column as the ID's copy button */ #pl-app .b-zero { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 10px 5px 8px; border: 1px solid #f0d488; border-radius: 10px; background: #fff6dc; color: #6a4800; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; } #pl-app .b-zero .ic { width: 15px; height: 15px; flex: none; color: #c98a00; } #pl-app .b-id--top { align-items: flex-start; } #pl-app .b-id--top .b-av { margin-top: 2px; } #pl-app .b-gpw { flex-wrap: wrap; padding: 10px 2px 0 54px; } #pl-app .b-gpw strong { letter-spacing: .04em; } #pl-app .b-gpw .eye2 { margin-right: -4px; } #pl-app .b-gpw-n { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-2); } #pl-app .b-bal { margin-top: 12px; padding: 18px; border-radius: 22px; border: 1px solid #cfdcea; background: linear-gradient(150deg, #fff 0%, #dce9f6 100%); box-shadow: 0 8px 24px rgba(30, 58, 86, .08); } #pl-app .b-balt { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } #pl-app .b-bal small { display: block; font-size: 13px; color: var(--text-2); } #pl-app .b-bal strong { display: block; margin-top: 2px; font-size: 32px; font-weight: 900; line-height: 1.2; } #pl-app .b-ks { font-size: 16px; font-weight: 700; } #pl-app .b-load { font-size: 20px; font-weight: 500; color: var(--text-2); } #pl-app .b-bal p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-2); } #pl-app .b-ref { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid #cfdcea; background: #fff; color: var(--navy); } #pl-app .b-ref[disabled] svg.ic { animation: rot 1s linear infinite; } #pl-app .b-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } #pl-app .b-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 14px; background: var(--navy); color: #fff; font-size: 16px; font-weight: 700; } #pl-app .b-btn svg.ic { color: #ffd25e; } #pl-app .b-btn.ghost { background: #fff; border: 1.5px solid var(--navy); color: var(--navy); } #pl-app .b-btn.ghost svg.ic { color: var(--navy); } #pl-app .b-pend { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid #f1d88f; background: #fff7dd; text-align: left; color: var(--text); } #pl-app .b-pend > span:nth-child(2) { flex: 1; min-width: 0; } #pl-app .b-pend strong { display: block; font-size: 14px; } #pl-app .b-pend small { display: block; font-size: 13px; color: var(--text-2); } #pl-app .b-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } #pl-app .b-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 104px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: #fff; text-align: left; color: var(--text); } #pl-app .b-tile svg.ic { width: 26px; height: 26px; stroke-width: 1.8; color: var(--navy); margin-bottom: 4px; } #pl-app .b-tile strong { font-size: 15px; font-weight: 700; line-height: 1.3; } #pl-app .b-tile small { font-size: 12px; color: var(--text-2); line-height: 1.35; } #pl-app .b-tile.gold { border-color: transparent; background: linear-gradient(160deg, #fff3cf, #ffe08a); } #pl-app .b-tile.gold svg.ic { color: #152433; } #pl-app .b-tile.gold small { color: #4d4022; } #pl-app .b-card { margin-top: 14px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: #fff; } #pl-app .b-rh { display: flex; align-items: center; justify-content: space-between; } #pl-app .b-rh h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); } #pl-app .b-link { padding: 8px 0; font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; } #pl-app .b-rows { list-style: none; margin: 4px 0 0; padding: 0; } #pl-app .b-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; border-bottom: 1px solid #e6edf5; } #pl-app .b-rows li:last-child { border-bottom: 0; } #pl-app .b-rows strong { display: block; font-size: 14px; font-weight: 600; } #pl-app .b-rows small { display: block; font-size: 12px; color: var(--text-2); } #pl-app .b-rv { display: flex; align-items: center; gap: 10px; } #pl-app .b-rv b { font-size: 14px; font-weight: 700; } #pl-app .b-rv b.plus { color: var(--ok); } #pl-app .b-st { padding: 4px 8px; border-radius: 10px; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; } #pl-app .b-st.ok { background: #eaf6ee; color: #1d5b33; } #pl-app .b-st.pend { background: #fff1cc; color: #7a4f00; } #pl-app .b-st.no { background: #eef1f4; color: #4f5d6e; } #pl-app .b-st.bad { background: #fdecea; color: #b3261e; } #pl-app .b-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0 6px; text-align: center; } #pl-app .b-art { width: 112px; height: 100px; } #pl-app .b-empty strong { font-size: 15px; } #pl-app .b-empty small { font-size: 13px; color: var(--text-2); } #pl-app .b-promo { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(120deg, #fff4d0, #ffe3a0); text-align: left; color: var(--text); } #pl-app .b-promo > svg.ic { color: #8a5a00; } #pl-app .b-promo > span { flex: 1; min-width: 0; } #pl-app .b-promo strong { display: block; font-size: 15px; } #pl-app .b-promo small { display: block; font-size: 13px; color: #4d4022; } /* deposit / withdraw pages */ #pl-app .b-head { display: flex; align-items: center; gap: 4px; margin: 6px -10px 0; } #pl-app .b-back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--text); } #pl-app .b-back svg.ic { width: 22px; height: 22px; } #pl-app .b-head h1 { flex: 1; margin: 0; font-size: 20px; font-weight: 700; } #pl-app .b-how { padding: 10px; font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: underline; } #pl-app .b-head + .notice { margin: 14px 0 0; } #pl-app .b-step { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } #pl-app .b-step label, #pl-app .b-step > span:not(.b-n):not(.b-balm):not(.b-ic) { font-size: 15px; font-weight: 700; color: var(--text); } #pl-app .b-n { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; } #pl-app .b-ic svg.ic { color: var(--navy); } #pl-app .b-step .b-link { margin-left: auto; } #pl-app .b-kbz { display: block; width: 28px; height: 28px; border-radius: 7px; } #pl-app .b-amt { position: relative; display: flex; align-items: baseline; gap: 6px; padding: 4px 2px 8px; border-bottom: 2px solid var(--navy); transition: border-color .15s ease; } #pl-app .b-amt:focus-within { border-bottom-color: var(--gold); } #pl-app .b-amt input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font-size: 34px; font-weight: 800; color: var(--text); } #pl-app .b-amt input:focus { outline: none; } #pl-app .b-amt input::placeholder { color: var(--hint); font-weight: 400; } #pl-app .b-amt > span { font-size: 18px; font-weight: 700; color: var(--text-2); } #pl-app .b-amt.bad input { color: var(--err); } #pl-app .b-amt .xbad { position: absolute; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--err); pointer-events: none; } #pl-app .b-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } #pl-app .b-chips button { height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line); background: #f6f9fc; color: var(--text); font-size: 13px; font-weight: 600; } #pl-app .b-chips button.on { border-color: transparent; background: #ffd25e; font-weight: 700; } #pl-app .b-opts { display: flex; flex-direction: column; gap: 8px; } #pl-app .b-opt { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; } #pl-app .b-opt.on { padding: 11px; border: 2px solid var(--navy); background: #f3f8fd; } #pl-app .b-opt input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--navy); } #pl-app .b-optt { flex: 1; min-width: 0; } #pl-app .b-optt strong { display: block; font-size: 15px; font-weight: 600; } #pl-app .b-optt small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-2); } #pl-app .b-plus { font-size: 14px; font-weight: 700; color: var(--ok); } #pl-app .b-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f6f9fc; } #pl-app .b-sum span { font-size: 14px; color: var(--text-2); } #pl-app .b-sum strong { font-size: 20px; font-weight: 800; } #pl-app .b-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; margin-top: 14px; border: 0; border-radius: 16px; background: var(--navy); color: #fff; font-size: 17px; font-weight: 800; } #pl-app .b-cta svg.ic { color: #ffd25e; } #pl-app .b-cta[disabled] { opacity: .6; cursor: default; } #pl-app .b-cta:active { transform: scale(.98); } #pl-app .b-alt { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 14px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; text-align: center; } #pl-app .b-alt svg.ic { color: var(--navy); } #pl-app .b-alt.plain { min-height: 44px; border: 0; background: none; color: var(--navy); font-size: 13px; } #pl-app .b-bank { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; padding: 18px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #1e3a56 0%, #3a6286 100%); box-shadow: 0 10px 24px rgba(30, 58, 86, .2); } #pl-app .b-bank.kbz { background: linear-gradient(135deg, #2f6fb0 0%, #5b9bd8 100%); box-shadow: 0 10px 24px rgba(47, 111, 176, .25); } #pl-app .b-bkt { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #pl-app .b-bkt strong { font-size: 15px; font-weight: 800; } #pl-app .b-bkt span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 10px; background: rgba(255, 255, 255, .18); font-size: 12px; font-weight: 600; white-space: nowrap; } #pl-app .b-bkt span svg.ic { width: 12px; height: 12px; stroke-width: 2.6; } #pl-app .b-bkn { font-size: 20px; font-weight: 700; letter-spacing: .1em; overflow-wrap: anywhere; } #pl-app .b-bkf { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } #pl-app .b-balm { margin-left: auto; font-size: 13px; color: var(--text-2); white-space: nowrap; } #pl-app .b-balm b { color: var(--text); font-weight: 700; } #pl-app .b-balm .b-load { font-size: 13px; } #pl-app .b-balm .b-ks { font-size: 13px; } #pl-app .b-h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text); } #pl-app .b-next { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } #pl-app .b-next li { display: flex; align-items: center; gap: 10px; font-size: 14px; } #pl-app .b-next span { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #e3edf7; font-size: 12px; font-weight: 700; } #pl-app .b-next span.on { background: #ffd25e; } #pl-app .b-card .text { background: #f6f9fc; } #pl-app .b-card > .hint.err, #pl-app .b-head ~ .hint.err { margin-top: 14px; } /* login (member.light): the card turns light, the page stays the site's dark */ #pl-app.pl-lcard .panel.auth { --text: #152433; --text-2: #4f5d6e; --line: #d3deea; --blue-text: #1e5fa8; --gold: #e2a332; --err: #c62828; background: #fff; color: #152433; border: 1px solid #d3deea; } #pl-app.pl-lcard .panel.auth .field.box .text { background: #f3f7fb; color: #152433; box-shadow: inset 0 0 0 1px #d3deea; } #pl-app.pl-lcard .panel.auth .field.box .text::placeholder { color: #6b7785; } #pl-app.pl-lcard .panel.auth .field.box .text:focus { box-shadow: inset 0 0 0 1px #ebba57; } #pl-app.pl-lcard .panel.auth .field.box .eye { color: #6b7785; } /* sheets on light pages (how-it-works, bonus minimum, Play games) */ #pl-guide.pl-light { --g-bg: #ffffff; --g-text: #152433; --g-text-2: #4f5d6e; --g-cream: #8a5a00; --g-gold: #e2a332; --g-ok: #1d7a43; } #pl-guide.pl-light .gsheet { box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); } #pl-guide.pl-light .grab { background: #d3deea; } #pl-guide.pl-light .gsteps li:not(:last-child)::before { background: rgba(21, 36, 51, .1); } #pl-guide.pl-light li.goal p { color: #2b3a4a; } #pl-guide.pl-light .gsafe { background: rgba(29, 122, 67, .07); border-color: rgba(29, 122, 67, .25); color: #1d5b33; } #pl-guide.pl-light .gmb { background: #fff1cc; color: #7a4f00; } #pl-guide.pl-light .gmv { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #8a5a00; } #pl-guide.pl-light .gok { background: #1e3a56; color: #fff; box-shadow: none; } #pl-guide .gp-top { display: flex; align-items: center; gap: 14px; } #pl-guide .gp-ic { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(160deg, #fff3cf, #ffe08a); color: #152433; } #pl-guide .gp-ic > svg.ic { width: 30px; height: 30px; stroke-width: 1.8; } #pl-guide .gp-ic i { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #1e3a56; border: 2px solid #fff; color: #ffd25e; } #pl-guide .gp-ic i svg.ic { width: 12px; height: 12px; stroke-width: 3; } #pl-guide .gplay h2 { font-size: 20px; line-height: 1.3; } #pl-guide .gp-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 18px 0 0; padding: 14px; border-radius: 16px; background: #f3f7fb; text-align: center; } #pl-guide .gp-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--g-text); } #pl-guide .gp-steps span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #d3deea; color: #1e3a56; font-size: 13px; font-weight: 700; } #pl-guide .gp-steps span.on { background: #1e3a56; color: #fff; } #pl-guide .gp-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; margin-top: 18px; border: 0; border-radius: 16px; cursor: pointer; background: #1e3a56; color: #fff; font: 700 17px/1 var(--g-font); -webkit-tap-highlight-color: transparent; } #pl-guide .gp-go svg.ic { color: #ffd25e; } #pl-guide .gp-later { display: block; width: 100%; height: 48px; margin-top: 4px; border: 0; background: none; cursor: pointer; color: #1e3a56; font: 700 15px/1 var(--g-font); } #pl-guide .gp-cs { display: block; padding: 8px; font-size: 13px; text-align: center; color: var(--g-text-2); text-decoration: none; } #pl-guide .gp-cs b { color: #1e3a56; } /* the same customer-service links as buttons that open the site's LiveChat (no Viber/Telegram configured) */ #pl-app button.b-alt { width: 100%; cursor: pointer; } #pl-guide button.gp-cs { width: 100%; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; } /* login: "Forgot your password? Chat with customer service" (1.6.4, Jimmy 10-07) */ #pl-app .auth .btn2.fgt { width: 100%; margin: 16px 0 0; gap: 8px; padding: 0 16px; height: auto; min-height: 48px; font-size: 14px; line-height: 1.35; text-align: center; cursor: pointer; font-family: inherit; } #pl-app .auth .btn2.fgt svg.ic { flex: none; width: 18px; height: 18px; } #pl-app .sec .btn2.fgt { width: 100%; margin: 14px 0 0; gap: 8px; padding: 10px 16px; height: auto; min-height: 44px; font-size: 14px; line-height: 1.35; text-align: center; cursor: pointer; font-family: inherit; text-decoration: none; } #pl-app .sec .btn2.fgt svg.ic { flex: none; width: 18px; height: 18px; } /* ── Host themes that force every