#satuxMobile{display:none}
@media(max-width:820px){
#satuxMobile, #satuxMobile *{box-sizing: border-box;}
#satuxMobile{--green: #087a4b; --green-dark: #005c3d; --green-light: #e7f8ef; --red: #e51d2a; --red-dark: #c51e2b; --red-light: #ffe9eb; --ink: #102330; --muted: #68777e; --background: #f6f9f7; --line: #e5ece9;}
#satuxMobile{scroll-behavior: smooth;}
#satuxMobile{margin: 0px; min-height: 100vh; background: rgb(232, 239, 235); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased;}
#satuxMobile button{border: 0px; background: none; font: inherit; cursor: pointer;}
#satuxMobile{width: min(100%, 430px); min-height: 100svh; margin: 0px auto; padding: 18px 16px calc(95px + env(safe-area-inset-bottom)); background: var(--background); overflow: hidden; position: relative; box-shadow: rgba(20, 50, 40, 0.13) 0px 0px 55px;}
#satuxMobile .m-top-header{display: flex; align-items: flex-start; justify-content: space-between;}
#satuxMobile .m-satux-brand{position: relative;}
#satuxMobile .m-logo-wrap{position: relative; display: inline-block; color: rgb(7, 153, 87); font-size: 31px; font-weight: 950; font-style: italic; letter-spacing: -2.7px;}
#satuxMobile .m-satux-word span{color: var(--red);}
#satuxMobile .m-red-swoosh{position: absolute; width: 52px; height: 14px; left: 0px; top: -9px; background: var(--red); clip-path: polygon(0px 100%, 30% 40%, 100% 0px, 62% 58%);}
#satuxMobile .m-green-swoosh{position: absolute; width: 58px; height: 14px; right: -21px; bottom: -4px; background: var(--green); clip-path: polygon(0px 72%, 62% 34%, 100% 0px, 78% 83%); transform: rotate(-12deg);}
#satuxMobile .m-tagline{display: block; margin-top: 2px; font-size: 10px; color: rgb(123, 137, 143);}
#satuxMobile .m-header-actions{display: flex; gap: 9px;}
#satuxMobile .m-notification-btn,#satuxMobile .m-user-avatar{width: 43px; height: 43px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(12, 55, 38, 0.1) 0px 8px 22px; position: relative;}
#satuxMobile .m-bell{font-size: 24px; color: rgb(23, 43, 51);}
#satuxMobile .m-badge{position: absolute; top: -3px; right: -2px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: rgb(255, 255, 255); background: var(--red); border: 2px solid var(--background); font-size: 11px; font-weight: 800;}
#satuxMobile .m-user-avatar{background: rgb(221, 245, 232);}
#satuxMobile .m-avatar-head{position: absolute; width: 13px; height: 13px; left: 15px; top: 8px; background: var(--green); border-radius: 50%;}
#satuxMobile .m-avatar-body{position: absolute; width: 28px; height: 15px; left: 7px; bottom: 7px; background: var(--green); border-radius: 18px 18px 12px 12px;}
#satuxMobile .m-user-greeting{display: flex; align-items: center; justify-content: space-between; margin: 17px 4px 18px;}
#satuxMobile .m-hello{color: rgb(117, 132, 138); font-size: 15px;}
#satuxMobile .m-user-greeting h1{margin: 1px 0px 3px; font-size: 21px; line-height: 1.1; letter-spacing: -0.3px;}
#satuxMobile .m-satux-id{color: rgb(117, 132, 138); font-size: 12px;}
#satuxMobile .m-profile-arrow{padding: 10px; color: rgb(82, 99, 108); font-size: 27px;}
#satuxMobile .m-balance-card{position: relative; height: 238px; overflow: hidden; border-radius: 29px; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(8, 126, 78) 0%, rgb(0, 107, 66) 58%, rgb(7, 90, 62) 100%); box-shadow: rgba(0, 117, 74, 0.25) 0px 19px 40px; isolation: isolate;}
#satuxMobile .m-balance-content{position: relative; z-index: 5; padding: 26px 20px;}
#satuxMobile .m-balance-title{display: flex; align-items: center; gap: 7px; font-size: 15px;}
#satuxMobile .m-balance-title button{color: rgb(255, 255, 255); padding: 0px; font-size: 17px;}
#satuxMobile .m-balance-value{margin: 10px 0px 5px; font-size: 35px; font-weight: 850; letter-spacing: -1.3px; transition: filter 0.25s, opacity 0.25s;}
#satuxMobile .m-credit-label{font-size: 14px; opacity: 0.92;}
#satuxMobile .m-usage{display: flex; align-items: center; gap: 12px; margin-top: 20px;}
#satuxMobile .m-usage-track{width: 230px; max-width: 55%; height: 9px; overflow: hidden; border-radius: 20px; background: rgba(255, 255, 255, 0.18);}
#satuxMobile .m-usage-fill{width: 41%; height: 100%; border-radius: 20px; background: linear-gradient(90deg, rgb(88, 237, 59), rgb(223, 255, 153)); animation: 0.95s ease-out 0s 1 normal both running m-progress;}
#satuxMobile .m-usage span{font-size: 11px; white-space: nowrap;}
#satuxMobile .m-wallet-btn{position: absolute; z-index: 7; right: 18px; top: 83px; display: flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); transition: 0.25s;}
#satuxMobile .m-wallet-btn:hover{transform: translateX(-3px); background: rgba(255, 255, 255, 0.17);}
#satuxMobile .m-wallet-btn strong{font-size: 23px; line-height: 10px;}
#satuxMobile .m-balance-art{position: absolute; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none;}
#satuxMobile .m-art-a{width: 360px; height: 165px; right: -125px; bottom: -82px; transform: rotate(-14deg);}
#satuxMobile .m-art-b{width: 285px; height: 135px; right: -60px; bottom: -48px; transform: rotate(-14deg);}
#satuxMobile .m-balance-card::after{content: ""; position: absolute; width: 245px; height: 245px; right: -100px; top: -100px; border-radius: 50%; background: rgba(55, 240, 142, 0.17); filter: blur(7px); animation: 5s ease-in-out 0s infinite normal none running m-floatOrb;}
#satuxMobile .m-movement-row{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;}
#satuxMobile .m-movement-card{display: flex; align-items: center; gap: 10px; min-width: 0px; padding: 17px 11px; border: 1px solid var(--line); border-radius: 22px; background: rgb(255, 255, 255); box-shadow: rgba(12, 55, 38, 0.07) 0px 8px 21px; transition: transform 0.25s, box-shadow 0.25s;}
#satuxMobile .m-movement-card:active{transform: scale(0.98);}
#satuxMobile .m-movement-icon{width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 23px; font-weight: 800;}
#satuxMobile .m-movement-income .m-movement-icon{color: var(--green); background: rgb(223, 248, 233);}
#satuxMobile .m-movement-withdraw .m-movement-icon{color: var(--red); background: rgb(255, 224, 227);}
#satuxMobile .m-movement-card span,#satuxMobile .m-movement-card small{display: block; color: rgb(100, 116, 123); font-size: 11px;}
#satuxMobile .m-movement-card strong{display: block; margin: 4px 0px; font-size: 15px; white-space: nowrap;}
#satuxMobile .m-movement-income strong{color: var(--green);}
#satuxMobile .m-movement-withdraw strong{color: var(--red-dark);}
#satuxMobile .m-movement-card small{font-size: 10px;}
#satuxMobile .m-payment-card{display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 23px; background: rgb(255, 255, 255); box-shadow: rgba(12, 55, 38, 0.06) 0px 8px 22px;}
#satuxMobile .m-calendar-box{width: 49px; height: 49px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 17px; color: rgb(23, 45, 53); background: rgb(240, 244, 243); font-size: 25px;}
#satuxMobile .m-payment-copy{flex: 1 1 0%;}
#satuxMobile .m-payment-copy span{display: block; color: rgb(104, 119, 126); font-size: 12px;}
#satuxMobile .m-payment-copy strong{display: block; margin-top: 3px; font-size: 19px;}
#satuxMobile .m-days-pill{padding: 10px 9px; border-radius: 20px; color: var(--red-dark); background: rgb(255, 232, 234); font-size: 10px; white-space: nowrap;}
#satuxMobile .m-days-pill span{font-size: 14px;}
#satuxMobile .m-days-pill i{margin-left: 3px; font-size: 18px; font-style: normal;}
#satuxMobile .m-metrics{display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 12px;}
#satuxMobile .m-metric{min-width: 0px; padding: 11px 5px; text-align: center; border: 1px solid var(--line); border-radius: 18px; background: rgb(255, 255, 255);}
#satuxMobile .m-metric-icon{display: block; margin-bottom: 5px; color: rgb(40, 91, 112); font-size: 18px;}
#satuxMobile .m-metric small{display: block; min-height: 24px; color: rgb(83, 100, 109); font-size: 10px; line-height: 1.15;}
#satuxMobile .m-metric strong{display: block; margin-top: 4px; font-size: 12px; white-space: nowrap;}
#satuxMobile .m-metric em{display: block; color: rgb(137, 149, 155); font-size: 9px; font-style: normal;}
#satuxMobile .m-metric.m-late,#satuxMobile .m-metric.m-total{background: rgb(255, 240, 241);}
#satuxMobile .m-metric.m-late .m-metric-icon,#satuxMobile .m-metric.m-late strong,#satuxMobile .m-metric.m-total .m-metric-icon,#satuxMobile .m-metric.m-total strong{color: var(--red-dark);}
#satuxMobile .m-metric.m-withdrawn{background: rgb(235, 250, 241);}
#satuxMobile .m-metric.m-withdrawn .m-metric-icon,#satuxMobile .m-metric.m-withdrawn strong{color: var(--green);}
#satuxMobile .m-bank-card{margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: rgb(255, 255, 255); box-shadow: rgba(12, 55, 38, 0.07) 0px 9px 24px;}
#satuxMobile .m-bank-header{display: flex; align-items: center; justify-content: space-between; gap: 8px;}
#satuxMobile .m-bank-heading{display: flex; align-items: center; gap: 8px;}
#satuxMobile .m-bank-heading h2{margin: 0px; font-size: 15px;}
#satuxMobile .m-bank-heading-icon{width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: var(--green); background: rgb(231, 248, 239);}
#satuxMobile .m-change-bank{color: var(--green); font-size: 12px; font-weight: 800;}
#satuxMobile .m-change-bank b{font-size: 19px;}
#satuxMobile .m-bank-info{display: grid; grid-template-columns: 45px 1fr; gap: 11px; margin-top: 15px;}
#satuxMobile .m-bank-logo{width: 45px; height: 45px; display: grid; place-items: center; border-radius: 9px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 900; background: linear-gradient(135deg, rgb(20, 60, 114), rgb(22, 130, 201));}
#satuxMobile .m-bank-name strong,#satuxMobile .m-bank-name span,#satuxMobile .m-bank-name small{display: block;}
#satuxMobile .m-bank-name strong{font-size: 13px;}
#satuxMobile .m-bank-name span,#satuxMobile .m-bank-name small{margin-top: 4px; color: rgb(104, 119, 126); font-size: 11px;}
#satuxMobile .m-bank-details{display: grid; grid-template-columns: 1fr 1fr; gap: 5px 15px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line);}
#satuxMobile .m-bank-details span{display: block; color: rgb(120, 134, 141); font-size: 9px;}
#satuxMobile .m-bank-details strong{display: flex; align-items: center; justify-content: space-between; margin-top: 2px; font-size: 12px;}
#satuxMobile .m-copy-btn{padding: 0px 2px; color: rgb(96, 115, 123); font-size: 13px;}
#satuxMobile .m-card-area{padding: 14px 0px 2px; perspective: 1100px;}
#satuxMobile .m-satux-card{position: relative; height: 210px; overflow: hidden; padding: 21px 20px; border-radius: 25px; color: rgb(255, 255, 255); background: linear-gradient(120deg, rgb(229, 29, 42) 0%, rgb(166, 19, 36) 27%, rgb(18, 62, 53) 56%, rgb(8, 122, 75) 100%); box-shadow: rgba(9, 62, 45, 0.27) 0px 19px 34px; transform-style: preserve-3d; transition: transform 0.12s, box-shadow 0.3s; will-change: transform;}
#satuxMobile .m-satux-card:hover{box-shadow: rgba(9, 62, 45, 0.38) 0px 28px 48px;}
#satuxMobile .m-card-shine{position: absolute; inset: -100%; background: linear-gradient(110deg, transparent 43%, rgba(255, 255, 255, 0.27) 50%, transparent 57%); transform: rotate(18deg); animation: 4.8s linear 0s infinite normal none running m-shine; pointer-events: none;}
#satuxMobile .m-card-decoration{position: absolute; inset: 0px; background: linear-gradient(135deg, transparent 0px, transparent 44%, rgba(255, 255, 255, 0.07) 44%, rgba(255, 255, 255, 0.07) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, 0.06) 60%, rgba(255, 255, 255, 0.06) 66%, transparent 66%);}
#satuxMobile .m-card-top,#satuxMobile .m-card-bottom{position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between;}
#satuxMobile .m-card-logo{font-size: 28px; font-weight: 950; font-style: italic; letter-spacing: -2px;}
#satuxMobile .m-card-logo::first-letter{color: rgb(255, 255, 255);}
#satuxMobile .m-card-logo small{display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.72); font-size: 9px; font-style: normal; font-weight: 500; letter-spacing: 0px;}
#satuxMobile .m-card-credit{text-align: right;}
#satuxMobile .m-card-credit span{display: block; color: rgba(255, 255, 255, 0.75); font-size: 9px;}
#satuxMobile .m-card-credit strong{font-size: 13px;}
#satuxMobile .m-chip{position: relative; z-index: 2; width: 43px; height: 32px; margin-top: 22px; padding-top: 7px; overflow: hidden; border-radius: 7px; background: linear-gradient(135deg, rgb(233, 227, 200), rgb(162, 157, 132));}
#satuxMobile .m-chip span{display: block; margin-top: 5px; border-top: 1px solid rgb(119, 113, 94);}
#satuxMobile .m-card-number{position: relative; z-index: 2; margin-top: 12px; font-size: 18px; letter-spacing: 1px;}
#satuxMobile .m-card-bottom{align-items: flex-end; margin-top: 14px;}
#satuxMobile .m-card-bottom small{display: block; color: rgba(255, 255, 255, 0.7); font-size: 7px;}
#satuxMobile .m-card-bottom strong{display: block; margin-top: 3px; font-size: 10px;}
#satuxMobile .m-mastercard{position: relative; width: 45px; height: 28px;}
#satuxMobile .m-mastercard i{position: absolute; width: 28px; height: 28px; border-radius: 50%; background: rgb(255, 48, 59);}
#satuxMobile .m-mastercard i:last-child{left: 15px; background: rgb(255, 178, 26);}
#satuxMobile .m-bottom-nav{position: fixed; z-index: 40; left: 50%; bottom: 0px; width: min(100%, 430px); height: 79px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px 7px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(223, 232, 227); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(18px);}
#satuxMobile .m-nav-item{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 18px; color: rgb(100, 116, 124); transition: 0.25s;}
#satuxMobile .m-nav-item span{font-size: 23px; line-height: 1;}
#satuxMobile .m-nav-item small{font-size: 10px;}
#satuxMobile .m-nav-item.m-active{color: var(--red); background: rgb(255, 234, 235); transform: translateY(-2px);}
#satuxMobile .m-notification-panel{position: fixed; z-index: 100; top: 12px; left: 50%; width: min(390px, 100% - 24px); padding: 16px; border-radius: 23px; background: rgb(255, 255, 255); box-shadow: rgba(8, 37, 27, 0.25) 0px 22px 55px; opacity: 0; pointer-events: none; transform: translate(-50%, -15px) scale(0.97); transition: 0.25s;}
#satuxMobile .m-notification-panel.m-open{opacity: 1; pointer-events: auto; transform: translate(-50%, 0px) scale(1);}
#satuxMobile .m-panel-title{display: flex; align-items: center; justify-content: space-between;}
#satuxMobile .m-panel-title strong{font-size: 15px;}
#satuxMobile .m-panel-title button{color: rgb(104, 119, 126); font-size: 25px;}
#satuxMobile .m-notice{margin-top: 8px; padding: 11px 3px 4px; border-top: 1px solid var(--line);}
#satuxMobile .m-notice b,#satuxMobile .m-notice span{display: block;}
#satuxMobile .m-notice b{font-size: 12px;}
#satuxMobile .m-notice span{margin-top: 3px; color: rgb(107, 122, 129); font-size: 11px;}
#satuxMobile .m-toast{position: fixed; z-index: 120; left: 50%; bottom: 96px; padding: 9px 15px; border-radius: 20px; color: rgb(255, 255, 255); background: rgb(16, 42, 32); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: 0.25s;}
#satuxMobile .m-toast.m-show{opacity: 1; transform: translate(-50%, 0px);}
@keyframes m-progress { 
  0% { width: 0px; }
  100% { width: 41%; }
}
@keyframes m-shine { 
  0% { transform: translateX(-30%) rotate(18deg); }
  100% { transform: translateX(30%) rotate(18deg); }
}
@keyframes m-floatOrb { 
  0%, 100% { transform: translate3d(0px, 0px, 0px); }
  50% { transform: translate3d(-10px, 12px, 0px); }
}
@media (max-width: 355px){#satuxMobile .m-balance-value{font-size: 30px;}
#satuxMobile .m-movement-card{padding: 14px 8px;}
#satuxMobile .m-movement-card strong{font-size: 13px;}
#satuxMobile .m-metrics{gap: 4px;}
#satuxMobile .m-metric strong{font-size: 11px;}
#satuxMobile .m-card-number{font-size: 15px;}
#satuxMobile .m-satux-card{height: 195px;}}

/* Layout boundary: all the reference styles above apply only to this mobile component. */
body[data-page="dashboard"]{background:#f6f9f7}
body[data-page="dashboard"]>.mobile-header,body[data-page="dashboard"]>.bottom-nav,body[data-page="dashboard"]>footer{display:none!important}
body[data-page="dashboard"][data-view="home"]>main{display:none}
body[data-page="dashboard"] main .topline{display:none}
body[data-page="dashboard"] .chat-launcher{display:none}
body[data-page="dashboard"] .conversation-hub{bottom:calc(90px + env(safe-area-inset-bottom));max-height:calc(100dvh - 110px)}
body[data-page="dashboard"] .toast{bottom:calc(100px + env(safe-area-inset-bottom))}
body[data-page="dashboard"] .modal{z-index:100}
body[data-page="dashboard"] #satuxMobile{display:block;width:min(100%,560px);padding:16px 16px calc(110px + env(safe-area-inset-bottom));margin:0 auto;min-height:100svh;box-shadow:none;overflow:visible;color:#102330}
body[data-page="dashboard"]:not([data-view="home"]) #satuxMobile{min-height:0;padding-bottom:0}
body[data-page="dashboard"]:not([data-view="home"]) #satuxMobile .m-home{display:none}
body[data-page="dashboard"]:not([data-view="home"])>main{max-width:560px;margin:auto;padding-top:0}
#satuxMobile .m-brand-image{width:114px;height:64px;object-fit:cover;object-position:center 52%;display:block}
#satuxMobile .m-tagline{font-size:11px;margin-top:-2px}
#satuxMobile .m-header-actions{padding-top:10px}
#satuxMobile .m-user-avatar{display:block}
#satuxMobile .m-user-greeting{margin:20px 2px}
#satuxMobile .m-user-greeting>div{min-width:0}
#satuxMobile .m-user-greeting h1{font-size:23px;line-height:1.3;overflow-wrap:anywhere}
#satuxMobile .m-satux-id{font-size:13px}
#satuxMobile .m-profile-arrow{min-width:44px;text-align:center}
#satuxMobile .m-balance-card{height:auto;min-height:238px}
#satuxMobile .m-balance-content{padding:22px}
#satuxMobile .m-balance-title{justify-content:space-between}
#satuxMobile .m-balance-title button{min-width:44px;min-height:44px}
#satuxMobile .m-balance-value{font-size:clamp(26px,8vw,38px);line-height:1.2;margin-top:4px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#satuxMobile .m-credit-label{margin-top:10px;font-size:14px}
#satuxMobile .m-usage{margin-top:18px;flex-wrap:wrap}
#satuxMobile .m-usage span{font-size:12px}
#satuxMobile .m-usage-fill{animation:none;width:0}
#satuxMobile .m-wallet-btn{position:relative;inset:auto;display:flex;width:max-content;max-width:100%;margin:18px 0 0 auto;min-height:44px;font-size:14px;padding:10px 16px}
#satuxMobile .m-movement-card{flex-direction:column;align-items:flex-start;gap:8px;padding:14px;min-width:0}
#satuxMobile .m-movement-icon{width:32px;height:32px;font-size:20px}
#satuxMobile .m-movement-card>div{min-width:0;max-width:100%}
#satuxMobile .m-movement-card span,#satuxMobile .m-movement-card small{font-size:12px}
#satuxMobile .m-movement-card strong{font-size:15px;white-space:normal;overflow-wrap:anywhere}
#satuxMobile .m-payment-card{color:inherit;flex-wrap:wrap;gap:10px}
#satuxMobile .m-payment-copy{min-width:140px}
#satuxMobile .m-payment-copy strong{font-size:17px}
#satuxMobile .m-days-pill{font-size:12px;margin-left:auto;white-space:normal}
#satuxMobile .m-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#satuxMobile .m-metric{padding:14px 10px}
#satuxMobile .m-metric small{font-size:13px;min-height:0;line-height:1.4}
#satuxMobile .m-metric strong{font-size:16px;white-space:normal;overflow-wrap:anywhere}
#satuxMobile .m-metric em{font-size:12px}
#satuxMobile .m-bank-header{flex-wrap:wrap}
#satuxMobile .m-bank-heading{flex:1;min-width:0}
#satuxMobile .m-bank-heading h2{font-size:16px}
#satuxMobile .m-bank-heading-icon{flex-shrink:0}
#satuxMobile .m-change-bank{font-size:13px;min-height:44px;margin-left:auto}
#satuxMobile .m-bank-info{grid-template-columns:84px minmax(0,1fr);align-items:center}
#satuxMobile .m-bank-logo{width:84px;height:48px;background:white;color:#087a4b}
#satuxMobile .m-bank-logo img{width:84px;height:42px;object-fit:cover}
#satuxMobile .m-bank-name strong{font-size:14px}
#satuxMobile .m-bank-name span,#satuxMobile .m-bank-name small{font-size:12px}
#satuxMobile .m-bank-details{grid-template-columns:1fr;gap:12px}
#satuxMobile .m-bank-details span{font-size:12px}
#satuxMobile .m-bank-details strong>span{font-size:14px;color:#102330;overflow-wrap:anywhere;min-width:0}
#satuxMobile .m-bank-details strong{gap:10px}
#satuxMobile .m-copy-btn{min-width:44px;min-height:44px;flex-shrink:0}
#satuxMobile .m-card-area{scroll-margin-top:18px}
#satuxMobile .m-satux-card{height:auto;min-height:244px;padding:20px;border-radius:24px}
#satuxMobile .m-card-top{gap:12px}
#satuxMobile .m-card-logo{min-width:0;flex:1}
#satuxMobile .m-card-logo .m-brand-image{width:90px;height:50px;background:#fff;border-radius:8px}
#satuxMobile .m-card-logo small{font-size:10px;line-height:1.4;max-width:150px}
#satuxMobile .m-card-credit{max-width:48%;overflow-wrap:anywhere}
#satuxMobile .m-card-credit span{font-size:11px}
#satuxMobile .m-card-credit strong{font-size:14px}
#satuxMobile .m-chip{margin-top:16px}
#satuxMobile .m-card-number{font-size:16px;overflow-wrap:anywhere}
#satuxMobile .m-card-bottom{gap:14px;margin-top:16px}
#satuxMobile .m-card-bottom>div{min-width:0}
#satuxMobile .m-card-bottom small{font-size:10px}
#satuxMobile .m-card-bottom strong{font-size:12px;overflow-wrap:anywhere}
#satuxMobile .m-wallet-actions{display:flex;gap:12px;margin:18px 0}
#satuxMobile .m-wallet-actions>*{flex:1;padding:12px;min-height:46px;border-radius:12px;text-align:center;font-size:14px;background:#087a4b;color:#fff;font-weight:700}
#satuxMobile .m-wallet-actions>button{background:#e7f8ef;color:#005c3d}
#satuxMobile .m-account-links{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-top:16px}
#satuxMobile .m-account-links>*{padding:12px 0;color:#52636c}
#satuxMobile .m-account-alert{font-size:14px;padding:14px;border-radius:14px;background:#ffe9eb;color:#a61324;margin:0 0 14px}
#satuxMobile .m-bottom-nav{width:min(100%,560px);height:auto;min-height:79px;z-index:70;gap:3px;padding:8px 5px calc(8px + env(safe-area-inset-bottom))}
#satuxMobile .m-nav-item{min-width:0;min-height:56px;text-align:center;padding:6px 2px}
#satuxMobile .m-nav-item small{font-size:11px}
#satuxMobile .m-nav-item.m-active{color:#e51d2a;background:#ffeaeb}
#satuxMobile [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){#satuxMobile *,#satuxMobile *::after{animation:none!important;transition:none!important}}

}
@media(max-width:820px){#satuxMobile{width:100%;max-width:600px}#satuxMobile .m-balance-card{height:auto;min-height:210px}#satuxMobile .m-wallet-btn{position:static;display:inline-flex;margin-top:16px}#satuxMobile .m-balance-value{font-size:clamp(26px,8vw,35px);overflow-wrap:anywhere}#satuxMobile .m-bottom-nav{display:flex;justify-content:space-around}#satuxMobile .m-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}#satuxMobile .m-wallet-actions{margin:16px 0 20px}#satuxMobile .m-wallet-actions>*{display:flex;align-items:center;justify-content:center;text-decoration:none}}

#satuxMobile .m-usage-fill{animation:none;transition:width .4s}#satuxMobile .m-usage-track{flex:1;max-width:none}.progress i{animation:none!important;transition:width .4s}