.account-page-body { min-height: 100vh; background: #f5f7fb; }
.account-page-body .auth-main { display: grid; }
.simple-header .main-nav { margin-left: 20px; }
.auth-main { min-height: calc(100vh - 74px); grid-template-columns: minmax(0,1.05fr) minmax(480px,.95fr); }
.auth-visual { position: relative; min-height: 720px; overflow: hidden; color: #fff; background: linear-gradient(135deg,rgba(12,17,75,.86),rgba(39,24,125,.34)),url('assets/images/hero-casino-banner.webp') 61% center/cover no-repeat; }
.auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 45%,rgba(10,13,57,.84)); }
.auth-visual-content { position: relative; z-index: 2; width: min(530px,calc(100% - 84px)); height: 100%; min-height: 720px; display: flex; justify-content: flex-end; flex-direction: column; margin-left: 42px; padding-bottom: 65px; }
.auth-visual .brand { position: absolute; z-index: 3; left: 42px; top: 25px; color: #fff; }.auth-visual .brand-mark { color: #fff; }.auth-visual .brand-lockup { width: 236px; height: 88px; }
.auth-visual-content h1 { margin: 0 0 14px; font-size: 43px; line-height: 1.18; letter-spacing: -1.8px; }.auth-visual-content > p { max-width: 500px; margin: 0; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.8; }
.auth-benefits { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }.auth-benefits span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.17); border-radius: 9px; font-size: 9px; backdrop-filter: blur(8px); }.auth-benefits .icon { width: 14px; color: #ffd45e; }
.auth-panel-wrap { display: grid; place-items: center; padding: 44px; background: #fff; }
.auth-panel { width: min(420px,100%); }.auth-panel-top { margin-bottom: 25px; }.auth-panel-top .section-kicker { margin-bottom: 8px; }.auth-panel-top h2 { margin: 0; font-size: 29px; letter-spacing: -.8px; }.auth-panel-top p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 18px; padding: 4px; background: #f1f4f8; border-radius: 11px; }.auth-tabs button { height: 39px; border: 0; color: #758196; background: transparent; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; }.auth-tabs button.active { color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.google-button { width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #dce2ea; background: #fff; border-radius: 11px; font-size: 11px; font-weight: 700; cursor: pointer; transition: .2s ease; }.google-button:hover { border-color: #bfc8d5; box-shadow: var(--shadow-sm); }.google-mark { display: grid; place-items: center; width: 22px; height: 22px; color: #4285f4; border: 1px solid #e5e9ef; border-radius: 50%; font-size: 13px; font-weight: 800; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 17px 0; color: #9aa3b1; font-size: 9px; }.auth-divider::before,.auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-form { display: none; }.auth-form.active { display: block; }.auth-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 13px; }.auth-field > span { font-size: 10px; font-weight: 700; }.auth-field input { height: 44px; padding: 0 13px; color: var(--ink); border: 1px solid #dce2ea; outline: 0; border-radius: 10px; font-size: 11px; }.auth-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(36,107,253,.09); }.auth-field input::placeholder { color: #a0a9b6; }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 15px; color: #7d8898; font-size: 9px; }.auth-row label { display: flex; align-items: center; gap: 6px; }.auth-row a { color: var(--primary); }.auth-submit { width: 100%; height: 48px; }
.auth-note { margin: 14px 0 0; padding: 10px 12px; color: #7f8998; background: #f7f9fc; border-radius: 9px; font-size: 8px; line-height: 1.6; }
.wallet-shell { padding-top: 34px; padding-bottom: 80px; }.page-breadcrumb { display: flex; align-items: center; gap: 7px; margin-bottom: 20px; color: #8d97a6; font-size: 10px; }.page-breadcrumb a:hover { color: var(--primary); }
.wallet-hero { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; min-height: 250px; overflow: hidden; color: #fff; background: linear-gradient(125deg,#172d75,#254fc5 53%,#5d7ff2); border-radius: 22px; box-shadow: 0 20px 45px rgba(32,68,168,.18); }.wallet-hero::after { content: ""; position: absolute; width: 360px; height: 360px; right: -60px; top: -180px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 65px rgba(255,255,255,.035),0 0 0 130px rgba(255,255,255,.025); }.wallet-balance { position: relative; z-index: 2; padding: 38px 42px; }.wallet-balance > span { color: #c9d7ff; font-size: 11px; }.balance-line { display: flex; align-items: baseline; gap: 9px; margin-top: 6px; }.balance-line strong { font-size: 52px; letter-spacing: -2px; }.balance-line b { font-size: 14px; }.rate-note { margin: 10px 0 20px; color: #c9d7ff; font-size: 10px; }.wallet-actions { display: flex; gap: 10px; }.wallet-actions .btn { height: 45px; }.wallet-actions .btn-white { color: #234fbf; }
.wallet-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.09); }
.wallet-art { position: relative; z-index: 2; display: grid; place-items: center; }.coin-stack { position: relative; width: 160px; height: 160px; }.coin-stack span { position: absolute; display: grid; place-items: center; width: 106px; height: 106px; color: #9a6800; background: linear-gradient(145deg,#ffe886,#f4b52d); border: 12px solid #ffd45b; border-radius: 50%; box-shadow: 0 18px 28px rgba(7,22,77,.28),inset 0 0 0 3px rgba(255,255,255,.45); font-size: 38px; font-weight: 800; }.coin-stack span:nth-child(1){left:10px;top:30px}.coin-stack span:nth-child(2){left:45px;top:10px;transform:scale(.86)}.coin-stack span:nth-child(3){left:54px;top:58px;transform:scale(.72)}
.wallet-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 22px 0; }.wallet-stat { padding: 18px; border: 1px solid var(--line); background: #fff; border-radius: 14px; }.wallet-stat span { color: #8b95a4; font-size: 9px; }.wallet-stat strong { display: block; margin-top: 6px; font-size: 19px; }
.wallet-content { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; }.wallet-panel { padding: 24px; border: 1px solid var(--line); background: #fff; border-radius: 17px; }.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }.panel-heading h2 { margin: 0; font-size: 18px; }.panel-heading span { color: #8c96a5; font-size: 9px; }.transaction-list { display: flex; flex-direction: column; }.transaction-item { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; min-height: 64px; border-bottom: 1px solid #edf0f4; }.transaction-item:last-child { border: 0; }.transaction-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 15px; font-weight: 800; }.transaction-icon.plus { color: #168056; background: #e9f7f1; }.transaction-icon.minus { color: #c05b2a; background: #fff0e8; }.transaction-copy { display: flex; flex-direction: column; gap: 3px; }.transaction-copy strong { font-size: 10px; }.transaction-copy small { color: #929baa; font-size: 8px; }.transaction-amount { text-align: right; font-size: 11px; font-weight: 800; }.transaction-amount.plus { color: var(--green); }.empty-wallet { padding: 45px 15px; text-align: center; color: #8b95a4; font-size: 10px; }.wallet-side-list { display: flex; flex-direction: column; gap: 10px; }.wallet-side-card { padding: 15px; color: #556378; background: #f7f9fc; border-radius: 11px; font-size: 10px; line-height: 1.7; }.wallet-side-card strong { display: block; margin-bottom: 3px; color: var(--ink); }
.topup-layout { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }.topup-card,.topup-summary { padding: 27px; border: 1px solid var(--line); background: #fff; border-radius: 18px; }.topup-heading h1 { margin: 0 0 8px; font-size: 27px; }.topup-heading p { margin: 0 0 24px; color: var(--muted); font-size: 11px; }.topup-step { margin-bottom: 22px; }.topup-step > strong { display: block; margin-bottom: 11px; font-size: 11px; }.currency-option { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--primary); background: #f7faff; border-radius: 12px; }.usdt-mark { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: #26a17b; border-radius: 50%; font-size: 20px; font-weight: 800; }.currency-option span { display: flex; flex-direction: column; gap: 3px; }.currency-option b { font-size: 11px; }.currency-option small { color: #8490a1; font-size: 8px; }.currency-option i { width: 15px; height: 15px; margin-left: auto; border: 4px solid var(--primary); border-radius: 50%; }
.amount-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }.amount-option { height: 48px; border: 1px solid #dce2ea; background: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; cursor: pointer; }.amount-option.active { color: var(--primary); border-color: var(--primary); background: #f6f9ff; }.custom-amount { position: relative; margin-top: 9px; }.custom-amount input { width: 100%; height: 47px; padding: 0 58px 0 13px; border: 1px solid #dce2ea; outline: 0; border-radius: 10px; font-size: 12px; }.custom-amount input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(36,107,253,.08); }.custom-amount span { position: absolute; right: 13px; top: 15px; color: #68758a; font-size: 10px; font-weight: 700; }
.network-option { display: flex; align-items: center; justify-content: space-between; padding: 13px; border: 1px solid var(--line); border-radius: 11px; }.network-option span { display: flex; flex-direction: column; gap: 4px; }.network-option b { font-size: 10px; }.network-option small { color: #8b95a4; font-size: 8px; }.network-option em { color: #168056; font-size: 9px; font-style: normal; font-weight: 800; }
.topup-summary { position: sticky; top: 96px; }.topup-summary h2 { margin: 0 0 18px; font-size: 17px; }.summary-row { display: flex; align-items: center; justify-content: space-between; min-height: 39px; color: #718096; border-bottom: 1px solid #edf0f4; font-size: 10px; }.summary-row strong { color: var(--ink); }.summary-total { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0; }.summary-total span { font-size: 11px; }.summary-total strong { color: var(--primary); font-size: 24px; }.topup-submit { width: 100%; height: 49px; }.topup-warning { margin: 13px 0 0; color: #929baa; font-size: 8px; line-height: 1.6; }
.demo-order { display: none; margin-top: 15px; padding: 16px; border: 1px solid #f0d69b; background: #fffbef; border-radius: 12px; }.demo-order.visible { display: block; }.demo-order strong { display: block; margin-bottom: 6px; font-size: 10px; }.demo-order p { margin: 0 0 10px; color: #806b3d; font-size: 8px; line-height: 1.6; }.demo-order .btn { width: 100%; height: 41px; }.payment-order-row { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0; font-size: 9px; }.payment-address { display: grid; gap: 7px; margin: 12px 0; }.payment-address > span,.txid-field > span { color: #806b3d; font-size: 8px; font-weight: 700; }.payment-address code { display: block; padding: 10px; overflow-wrap: anywhere; color: #26344b; background: #fff; border: 1px solid #ead8ad; border-radius: 8px; font-family: "DM Sans",monospace; font-size: 9px; line-height: 1.5; }.txid-field { display: grid; gap: 7px; margin: 12px 0; }.txid-field input { width: 100%; height: 42px; padding: 0 10px; border: 1px solid #e2c989; outline: 0; border-radius: 9px; }.txid-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(36,107,253,.08); }.demo-order .btn + .btn { margin-top: 8px; }
@media (max-width: 950px) { .auth-main { grid-template-columns: 1fr; }.auth-visual { min-height: 390px; }.auth-visual-content { min-height: 390px; padding-bottom: 38px; }.auth-panel-wrap { padding: 45px 25px; }.topup-layout,.wallet-content { grid-template-columns: 1fr; }.topup-summary { position: static; } }
@media (max-width: 650px) { .auth-visual { display: none; }.auth-panel-wrap { min-height: calc(100vh - 66px); padding: 32px 20px; }.wallet-shell { padding-top: 20px; }.wallet-hero { grid-template-columns: 1fr; }.wallet-balance { padding: 30px 24px; }.wallet-art { display: none; }.balance-line strong { font-size: 42px; }.wallet-stats { grid-template-columns: 1fr; }.amount-grid { grid-template-columns: repeat(2,1fr); }.topup-card,.topup-summary,.wallet-panel { padding: 20px 16px; } }