:root { color-scheme: dark; --gold:#d9a84a; --violet:#b675df; --ink:#08080c; --panel:rgba(17,15,23,.94); --line:#352c42; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:#d8d2df; background:#08070b; font:14px/1.5 Inter,Segoe UI,Arial,sans-serif; }
.topup-backdrop { position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 75% 8%,rgba(115,50,151,.3),transparent 35%),radial-gradient(circle at 12% 28%,rgba(173,101,31,.14),transparent 28%),linear-gradient(180deg,rgba(5,5,8,.25),#08070b 62%),url('/client/assets/brand/og-card.svg') center 15%/cover no-repeat; filter:saturate(.72); }
.topup-backdrop::after { content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(#000,transparent 72%); }
.topup-header { height:72px; padding:0 max(24px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(205,171,96,.18); background:rgba(7,7,10,.86); backdrop-filter:blur(15px); }
.topup-brand { display:flex; align-items:center; gap:12px; color:#eee5d0; text-decoration:none; letter-spacing:1px; }.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid #94713c; color:#eac576; background:linear-gradient(145deg,#342510,#100d0a); font:800 14px Georgia; transform:rotate(45deg); }.brand-mark::first-line { transform:rotate(-45deg); }.topup-brand span:last-child { display:grid; }.topup-brand b { font:800 16px Georgia; }.topup-brand small { color:#716751; font-size:8px; letter-spacing:2px; }
.topup-header nav { display:flex; gap:20px; }.topup-header nav a { color:#aaa1b1; text-decoration:none; font-size:12px; text-transform:uppercase; letter-spacing:1px; }.topup-header nav a:hover { color:#e3c479; }
.topup-shell { width:min(1180px,calc(100% - 32px)); margin:auto; padding:58px 0 70px; }.topup-hero { display:grid; grid-template-columns:1fr 330px; gap:50px; align-items:center; margin-bottom:34px; }.eyebrow { color:#9b7c50; font-size:9px; font-weight:800; letter-spacing:2.4px; }.topup-hero h1 { margin:8px 0 12px; color:#f2edf5; font:700 clamp(34px,5vw,60px)/1.05 Georgia; }.topup-hero h1 em { color:#d6a2f1; font-style:normal; text-shadow:0 0 25px rgba(177,94,219,.28); }.topup-hero p { max-width:680px; margin:0; color:#9e96a4; font-size:15px; }
.wallet-card { padding:20px 22px; border:1px solid #5a4168; background:linear-gradient(145deg,rgba(52,29,65,.95),rgba(13,11,17,.96)); box-shadow:0 18px 45px rgba(0,0,0,.35); }.wallet-card>span { color:#967ca1; font-size:8px; letter-spacing:1.8px; }.wallet-card>strong { display:block; margin:4px 0 15px; color:#f2e8f6; font-size:17px; }.wallet-card div { border-top:1px solid #4a3654; padding-top:12px; }.wallet-card div b { color:#e5bcfa; font-size:28px; }.wallet-card div small { color:#9675a5; }.wallet-card a { display:inline-block; margin-top:12px; color:#d6b06a; font-size:11px; }
.notice { min-height:0; margin:0 0 18px; padding:0; border:0; overflow:hidden; transition:.2s; }.notice.show { min-height:42px; padding:11px 14px; color:#d8c5df; border:1px solid #563968; background:#211628; }.notice.error { color:#f0b6b6; border-color:#6b363b; background:#281316; }
.topup-step { margin-top:22px; padding:24px; border:1px solid var(--line); background:var(--panel); box-shadow:0 22px 55px rgba(0,0,0,.24); }.topup-step>header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }.topup-step>header>span { display:grid; place-items:center; width:35px; height:35px; border:1px solid #765e32; color:#e0b85e; background:#1b160e; font-weight:800; }.topup-step h2,.history-head h2 { margin:0; color:#e9e4ea; font:600 20px Georgia; }.topup-step header p { margin:2px 0 0; color:#716b75; font-size:11px; }
.package-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.package-card { position:relative; min-height:148px; padding:18px; text-align:left; border:1px solid #3e3548; color:inherit; background:linear-gradient(155deg,#201a27,#0d0c11 74%); cursor:pointer; }.package-card:hover,.package-card.selected { border-color:#a567c4; box-shadow:inset 0 0 28px rgba(146,75,180,.12),0 0 0 1px rgba(185,113,219,.08); }.package-card.popular::before { content:"MOST POPULAR"; position:absolute; top:-1px; right:-1px; padding:4px 7px; color:#211426; background:#c692de; font-size:7px; font-weight:900; letter-spacing:1px; }.package-card small { color:#7f7286; font-size:9px; text-transform:uppercase; letter-spacing:1px; }.package-card strong { display:block; margin:10px 0 4px; color:#e7c4f7; font:800 30px/1 Georgia; }.package-card strong span { font:700 12px Segoe UI; }.package-card .bonus { color:#d3a951; font-size:10px; }.package-card .price { position:absolute; left:18px; bottom:15px; color:#eee8ef; font-size:16px; }
.method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.method-card { min-height:88px; padding:15px; display:flex; align-items:center; gap:13px; text-align:left; border:1px solid #38323e; color:inherit; background:#0e0d12; cursor:pointer; }.method-card:hover:not(:disabled),.method-card.selected { border-color:#9a7542; background:#17130f; }.method-card:disabled { opacity:.43; cursor:not-allowed; }.method-icon { display:grid; place-items:center; flex:none; width:43px; height:43px; border-radius:50%; color:#e0b964; background:#28201a; font-weight:900; }.method-card strong,.method-card small { display:block; }.method-card strong { color:#e8e0eb; }.method-card small { color:#766f7b; font-size:10px; }.method-card i { margin-left:auto; color:#79508c; font-size:9px; font-style:normal; }
.checkout-panel { display:grid; grid-template-columns:1fr 160px 250px; gap:20px; align-items:center; margin-top:18px; padding:21px 24px; border:1px solid #604573; background:linear-gradient(100deg,#211429,#100e14); }.checkout-summary { display:grid; }.checkout-summary>span,.checkout-price small { color:#8e7398; font-size:8px; letter-spacing:1.6px; }.checkout-summary strong { color:#f0e6f3; font-size:17px; }.checkout-summary small { color:#7e7482; }.checkout-price { display:grid; text-align:right; }.checkout-price strong { color:#e9c774; font-size:25px; }#checkout { height:48px; border:1px solid #c1974d; color:#181109; background:linear-gradient(#edcb7d,#a87932); font-weight:900; letter-spacing:.8px; cursor:pointer; }#checkout:disabled { opacity:.35; cursor:not-allowed; }
.history-section { margin-top:42px; }.history-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:12px; }.history-head button { border:1px solid #4b414f; padding:7px 12px; color:#a99eac; background:#121015; cursor:pointer; }.history-list { border-top:1px solid #39313e; }.history-list>p { color:#716b75; }.history-row { display:grid; grid-template-columns:1.3fr 1fr 1fr .7fr; gap:12px; align-items:center; padding:14px 10px; border-bottom:1px solid #27232b; }.history-row strong { color:#d9cedd; }.history-row span { color:#887e8c; font-size:11px; }.history-row .pending { color:#e1b55d; }.history-row .paid { color:#7fce99; }.history-row .failed,.history-row .expired { color:#ce7777; }
.security-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:38px; border:1px solid #302a34; background:#302a34; }.security-strip div { display:grid; padding:16px; background:#0c0b0f; }.security-strip b { color:#b1a6b4; font-size:11px; }.security-strip span { color:#68616c; font-size:9px; }footer { padding:22px; text-align:center; color:#554f59; border-top:1px solid #211e24; font-size:10px; letter-spacing:1px; }
.loading-card { grid-column:1/-1; padding:25px; color:#736b78; text-align:center; border:1px dashed #3b3341; }dialog { width:min(520px,calc(100% - 28px)); padding:27px; border:1px solid #725184; color:#ddd2e1; background:#121016; box-shadow:0 30px 90px #000; }dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(4px); }.dialog-close { position:absolute; right:12px; top:10px; border:0; color:#9b8da0; background:none; font-size:24px; cursor:pointer; }dialog h2 { margin:6px 0 18px; color:#f0e7f2; font:600 24px Georgia; }.pay-field { margin:8px 0; padding:11px; border:1px solid #39303f; background:#0a090d; }.pay-field small { display:block; color:#76677d; font-size:8px; letter-spacing:1px; }.pay-field code { display:block; margin-top:3px; color:#e2c3ef; word-break:break-all; }.pay-open { display:block; margin-top:15px; padding:12px; color:#17100a; text-align:center; text-decoration:none; background:#d5ad5b; font-weight:800; }.copy-btn { width:100%; margin-top:8px; padding:9px; border:1px solid #604671; color:#dbc5e3; background:#24172a; cursor:pointer; }.dialog-note { color:#746b78; font-size:10px; }
@media(max-width:850px){.topup-hero{grid-template-columns:1fr}.package-grid{grid-template-columns:repeat(2,1fr)}.method-grid{grid-template-columns:1fr}.checkout-panel{grid-template-columns:1fr 1fr}.checkout-panel button{grid-column:1/-1}.security-strip{grid-template-columns:1fr}.history-row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.topup-header{padding:0 14px}.topup-header nav a:first-child{display:none}.topup-shell{width:min(100% - 20px,1180px);padding-top:30px}.package-grid{grid-template-columns:1fr}.topup-step{padding:16px}.checkout-panel{grid-template-columns:1fr}.checkout-price{text-align:left}.history-row{grid-template-columns:1fr}.topup-brand small{display:none}}