/* Responsive layout: content can grow without clipping or horizontal scrolling. */
html{scroll-padding-bottom:110px}
body{padding:0}
.app-shell{width:100%;max-width:560px;min-height:100vh;min-height:100dvh;border-radius:0;overflow:visible}
.screen,.auth-screen{min-height:100vh;min-height:100dvh;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-top:max(16px,env(safe-area-inset-top))}
.screen.with-nav{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.screen>*,.auth-screen>*,.credit-card>*,.hello-row>*,.update-item>*,.reward-list article>*,.mini-balance>*,.method-list label>*{min-width:0}
img{max-width:100%}
h1,h2,h3,p,strong,b,.muted,.switch,.alert{overflow-wrap:anywhere}
button,a,input{scroll-margin-block:24px 110px}
.field{min-height:48px;height:auto;padding-top:2px;padding-bottom:2px}
.field input{width:100%;min-width:0;flex:1;font-size:16px;min-height:44px}
.field>span,.field .icon-button{flex-shrink:0}
.btn{height:auto;min-height:50px;padding:12px;text-align:center}
.form-stack,.social-stack{min-width:0}
.check-row input{flex-shrink:0;margin-top:3px}
.switch{line-height:1.6;margin-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
.page-head{height:auto;min-height:56px;grid-template-columns:44px minmax(0,1fr) 44px}
.page-head h1{font-size:20px;line-height:1.3}
.dashboard-screen .topbar{grid-template-columns:44px minmax(0,1fr) 44px}
.dashboard-screen .wallet-black h1{overflow-wrap:anywhere;min-height:40px}
.dashboard-screen .credit-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-screen .service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.bottom-nav{width:min(100%,560px);bottom:0;grid-template-columns:repeat(5,minmax(0,1fr));padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));border-radius:0}
.bottom-nav a{min-width:0;text-align:center}
.bottom-nav small{font-size:11px;overflow-wrap:anywhere}
.update-item{grid-template-columns:28px minmax(0,1fr) minmax(0,100px)}
.update-item>b{text-align:right;overflow-wrap:anywhere}
.package-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.package-card{min-width:0}
.payment-methods .active-method{grid-template-columns:22px minmax(0,1fr) 18px}
.payment-methods .disabled-method{grid-template-columns:22px minmax(0,1fr) auto 18px}
.payment-methods label{line-height:1.5}
.payment-methods .disabled-method em{white-space:normal;text-align:center}
.mini-balance strong{overflow-wrap:anywhere}
.reward-list article{grid-template-columns:28px minmax(0,1fr) auto}
.reward-list button{max-width:110px;white-space:normal}
.my-qr{padding:24px 8px}
.my-qr>span{font-size:120px}
.my-qr strong{font-size:20px;overflow-wrap:anywhere}
.segmented{margin-bottom:28px}
.qr-frame{width:100%;max-width:300px;height:auto;aspect-ratio:1;margin:auto}
.qr-frame:before,.qr-frame span:before{left:8px}
.qr-frame:after,.qr-frame span:after{right:8px}
.quick-actions{gap:40px;margin:28px 0}
.exact-welcome{min-height:100vh;min-height:100dvh;justify-content:space-between;background:linear-gradient(#00152d33,#0009),url("../images/welcome-beach-clean.png") center/cover no-repeat;padding-top:env(safe-area-inset-top)}
.exact-welcome .hero-photo{position:relative;inset:auto;background:none;flex:1;justify-content:center;padding:40px 22px 32px}
.exact-welcome .welcome-logo{width:180px;max-width:65%;margin-bottom:22px}
.exact-welcome .hero-photo h2{font-size:18px;line-height:1.4}
.exact-welcome .hero-photo p{font-size:15px;line-height:1.5}
.exact-welcome .welcome-actions{padding:0 24px max(24px,env(safe-area-inset-bottom));gap:10px}
.exact-welcome .btn{min-height:48px;height:auto;font-size:16px}
.exact-welcome .explore{min-height:32px;font-size:14px}
@media(max-width:360px){
 .screen,.auth-screen{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
 .dashboard-screen .wallet-black{padding:16px 12px}
 .dashboard-screen .wallet-black h1{font-size:28px}
 .dashboard-screen .wallet-black .pill{font-size:12px;gap:4px}
 .dashboard-screen .service-grid{gap:10px}
 .package-card strong{font-size:18px}.package-card b{font-size:12px}
 .payment-methods label{padding:10px 8px;gap:6px}
 .payment-methods .disabled-method em{font-size:10px;padding:3px 5px}
 .bottom-nav small{font-size:10px}
}
@media(max-height:700px){
 .exact-welcome .hero-photo{padding-top:24px;padding-bottom:22px}
 .exact-welcome .welcome-logo{width:120px;margin-bottom:14px}
 .auth-screen .auth-brand img{width:72px}
 .auth-screen h1{font-size:28px;margin-top:12px}
 .auth-screen .muted{font-size:14px;margin-bottom:12px}
 .auth-screen .form-stack{gap:8px}
}
@media(min-width:760px){
 body{padding:24px}
 .app-shell{min-height:calc(100dvh - 48px);border-radius:16px;box-shadow:0 8px 32px #00000008}
 .screen,.auth-screen,.exact-welcome{min-height:calc(100dvh - 48px)}
 .exact-welcome{border-radius:16px}
 .bottom-nav{bottom:0}
}
@media(orientation:landscape) and (max-height:500px){
 .exact-welcome{min-height:560px}
 .screen.with-nav{padding-bottom:100px}
 .bottom-nav{height:calc(68px + env(safe-area-inset-bottom))}
 .bottom-nav .scan span{width:36px;height:36px}
}
/* MCTC customer QR and merchant approval */
.mctc-screen{max-width:560px;margin:auto}
.mctc-order{border:1px solid #e4e4e4;border-radius:8px;padding:18px;margin:14px 0}
.mctc-order h2{font-size:22px;font-weight:600;margin:4px 0}
.mctc-order .muted{font-size:13px;margin:10px 0 2px}
.mctc-order strong{display:block;font-size:16px;overflow-wrap:anywhere}
.mctc-approval-form{margin-top:20px}
.mctc-approval-form .check-row{align-items:center}
.mctc-qr-panel{text-align:center;margin:24px auto;padding:18px 12px;border:1px solid #e4e4e4;border-radius:8px;max-width:320px}
.mctc-qr{display:grid;place-items:center;margin:0 auto 12px;width:min(100%,260px);aspect-ratio:1}
.mctc-qr svg{display:block;width:100%;height:auto}
.mctc-qr-panel strong{display:block;font-size:15px}
.mctc-qr-panel p{font-size:14px;color:#555}
#mctc-reader{width:100%;max-width:320px;margin:12px auto;overflow:hidden}
#mctc-reader video{max-width:100%}
#mctc-start,#mctc-stop{margin-top:12px}
.mctc-link{width:100%;min-height:44px;border:1px solid #ddd;border-radius:6px;padding:8px;font-size:12px;margin-top:8px}.mctc-qr-panel details{margin-top:14px;text-align:left}.mctc-qr-panel summary{cursor:pointer;color:#555}

.environment-note{margin:10px 0 14px;padding:10px 12px;border:1px solid #e5e5e5;border-radius:8px;background:#f7f7f7;color:#5f5f5f;font-size:13px;line-height:1.45}