/* Topupdmn.com native-feeling UI layer. Shared visual system only; no business logic. */
:root{
  --gt-bg:#f6f7f9;--gt-surface:#fff;--gt-surface-soft:#fbfcfe;--gt-text:#101828;--gt-muted:#667085;--gt-line:#e4e7ec;
  --gt-primary:#2457f5;--gt-primary-soft:#eef3ff;--gt-success:#12b76a;--gt-warning:#f79009;--gt-danger:#d92d20;
  --gt-radius-sm:9px;--gt-radius-md:12px;--gt-radius-lg:16px;--gt-shadow:0 2px 10px rgba(16,24,40,.05);
  --gt-gutter:24px;--gt-bottom:calc(68px + env(safe-area-inset-bottom));
}
html{background:var(--gt-bg)}body,body.page-dark,body.home-dark,body.dashboard-body,body.admin-page,body.deposit-page{background:var(--gt-bg)!important;color:var(--gt-text)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important}

body{padding-bottom:0!important}.site-header{height:68px!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--gt-line)!important;box-shadow:0 1px 8px rgba(16,24,40,.04)!important;backdrop-filter:blur(14px);z-index:100!important}.header-inner{height:68px!important}.brand,.brand-with-image,.site-header a{color:var(--gt-text)}.brand-mark{background:var(--gt-text)!important;border-radius:9px!important}.desktop-nav{gap:22px!important;color:var(--gt-muted)!important}.desktop-nav a{font-size:13px!important;font-weight:700!important}.desktop-nav a:hover,.desktop-nav .active{color:var(--gt-primary)!important}.header-actions{gap:8px!important}.login-pill,.link-btn{border-radius:9px!important;font-weight:800!important}.solid-btn{min-height:44px!important;border-radius:9px!important;box-shadow:none!important;font-weight:800!important}.ghost-btn,.small-button,.filter-btn{min-height:40px!important;border-radius:9px!important;box-shadow:none!important}
.shell,.home-shell,.detail-shell,.dash-shell,.deposit-shell,.admin-shell,.footer-inner{width:min(1180px,calc(100% - 48px))!important;margin-inline:auto!important}
main{padding-top:4px!important;padding-bottom:40px!important}.transactions-page main,.transactions-page.dashboard-body main{padding-top:4px!important}.transactions-page .transactions-head{margin-top:0!important;padding-top:0!important}.page-dark main,.dashboard-body main,.transactions-page main,.account-page main,.deposit-page main,.payment-page main,.invoice-page main,.admin-page main,.product-detail-page main{padding-top:4px!important}.home-dark main{padding-top:4px!important}.section,.dash-section,.home-section{padding-top:32px!important}.section-head,.home-section-head,.dash-section-head,.panel-head{margin-bottom:14px!important}.section-head h1,.dash-welcome h1,.transactions-head h1,.deposit-head h1,.admin-head h1,.invoice-head h1{font-size:clamp(26px,3vw,34px)!important;line-height:1.1!important;letter-spacing:-.035em!important;color:var(--gt-text)!important}.section-head h2,.home-section-head h2,.dash-section-head h2,.panel-head h2{font-size:20px!important;letter-spacing:-.025em!important;color:var(--gt-text)!important}.section-head p,.dash-welcome p,.transactions-head p,.deposit-head p,.admin-head p,.detail-meta p,.auth-card>p{color:var(--gt-muted)!important;line-height:1.55!important;font-size:13px!important}
.dash-welcome,.balance-card,.dash-panel,.action-card,.transactions-head>div:first-child,.transactions-balance,.transactions-card,.deposit-card,.deposit-note,.payment-card,.payment-admin-card,.dark-panel,.product-detail-hero,.admin-panel,.admin-stat,.admin-nav,.invoice-head,.invoice-card,.faq-intro,.promo-tile,.category-card,.benefit-card,.support-item{background:var(--gt-surface)!important;border:1px solid var(--gt-line)!important;border-radius:var(--gt-radius-md)!important;box-shadow:var(--gt-shadow)!important}.dash-welcome,.balance-card,.dash-panel,.transactions-card,.deposit-card,.payment-card,.invoice-card,.admin-panel{padding:20px!important}.action-card,.benefit-card,.support-item{padding:16px!important}.action-card:hover,.category-card:hover,.support-item:hover{border-color:#b9c9fb!important;transform:translateY(-1px)}
.balance-card>strong{color:var(--gt-text)!important;font-variant-numeric:tabular-nums}.balance-card>span,.invoice-row span{color:var(--gt-muted)!important}.balance-card .solid-btn{background:var(--gt-primary)!important}
input,select,textarea,.admin-search,.admin-select,.field-grid input{min-height:44px!important;border:1px solid #d0d5dd!important;border-radius:var(--gt-radius-sm)!important;background:#fff!important;color:var(--gt-text)!important;box-shadow:none!important;padding-inline:12px!important}input:focus,select:focus,textarea:focus{border-color:var(--gt-primary)!important;outline:3px solid rgba(36,87,245,.14)!important}
.status-pill,.invoice-status,.payment-status{border-radius:999px!important;font-weight:800!important}.amount,.price,.balance-card>strong,.invoice-row strong{font-variant-numeric:tabular-nums}
.product-detail-hero{grid-template-columns:128px minmax(0,1fr)!important;gap:20px!important}.detail-cover{border-radius:12px!important}.detail-meta .eyebrow{color:var(--gt-primary)!important}.purchase-grid{gap:16px!important}.dark-panel{background:var(--gt-surface)!important}.step-title>span{background:var(--gt-primary)!important;color:#fff!important;border-radius:8px!important}.variant-option span,.payment-method-option,.payment-choice,.bank-copy-line,.payment-detail-section,.confirm-summary{background:var(--gt-surface-soft)!important;border:1px solid var(--gt-line)!important;border-radius:var(--gt-radius-sm)!important}.variant-option input:checked+span,.payment-method-option.selected,.payment-choice.selected{border-color:var(--gt-primary)!important;box-shadow:inset 0 0 0 1px var(--gt-primary)!important;background:var(--gt-primary-soft)!important}
.faq-list{border:1px solid var(--gt-line)!important;border-radius:var(--gt-radius-md)!important;background:var(--gt-surface)!important;overflow:hidden}.faq-list details{border-bottom:1px solid var(--gt-line)!important}.faq-list summary{padding:16px!important;font-weight:800!important}.faq-list p{color:var(--gt-muted)!important;line-height:1.55!important}
footer{background:var(--gt-surface)!important;border-top:1px solid var(--gt-line)!important;color:var(--gt-muted)!important}footer .footer-inner{min-height:64px!important}
.mobile-bottom{height:auto!important;min-height:68px!important;background:rgba(255,255,255,.98)!important;border-top:1px solid var(--gt-line)!important;box-shadow:0 -4px 14px rgba(16,24,40,.06)!important;padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;backdrop-filter:blur(14px)!important}.mobile-bottom a{min-height:54px!important;color:#667085!important;border-radius:10px!important;font-weight:800!important}.mobile-bottom a.active{color:var(--gt-primary)!important;background:var(--gt-primary-soft)!important}.mobile-bottom a:nth-child(3){color:var(--gt-primary)!important;transform:translateY(-9px)!important}.mobile-bottom a:nth-child(3) span{background:var(--gt-primary)!important;border:3px solid #fff!important;box-shadow:0 5px 14px rgba(36,87,245,.25)!important}
.skeleton,.loading-skeleton{background:linear-gradient(90deg,#eef1f5 25%,#f8f9fb 37%,#eef1f5 63%);background-size:400% 100%;animation:gt-shimmer 1.4s ease infinite;border-radius:var(--gt-radius-sm)}@keyframes gt-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(max-width:760px){:root{--gt-gutter:16px}body{padding-bottom:var(--gt-bottom)!important}.site-header{position:fixed!important;top:0;left:0;right:0;height:60px!important}.header-inner{height:60px!important}.desktop-nav,.header-actions .solid-btn{display:none!important}.brand-with-image::after{font-size:15px!important}.main,main{padding-top:60px!important}.home-dark main{padding-top:60px!important}.home-dark .home-banner{padding-top:4px!important}.shell,.home-shell,.detail-shell,.dash-shell,.deposit-shell,.admin-shell,.footer-inner{width:calc(100% - 32px)!important}.product-detail-hero{grid-template-columns:82px minmax(0,1fr)!important;gap:14px!important}.detail-meta h1{font-size:26px!important}.dash-top,.purchase-grid,.payment-layout,.deposit-grid{grid-template-columns:1fr!important}.dash-welcome,.balance-card,.dash-panel,.transactions-card,.deposit-card,.payment-card,.invoice-card{padding:16px!important}.action-grid,.feature-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.invoice-row{grid-template-columns:1fr!important;gap:5px!important}.invoice-row strong{text-align:left!important}.payment-modal{padding:12px!important}.payment-modal-card,.purchase-confirm-card{max-height:calc(100vh - 24px)!important;border-radius:16px!important}.footer-inner{padding-bottom:var(--gt-bottom)!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}