Your changes

lib/screens/otp_screen.dart

@@ -16,52 +16,124 @@ class _OtpScreenState extends State<OtpScreen> {
   final otpController = TextEditingController();
   bool verifying = false;
 
-  static const String defaultOtp = '123456'; // default OTP as you said
+  static const String defaultOtp = '123456';
 
   void _verifyAndSubmit() async {
     final entered = otpController.text.trim();
+
     if (entered.length != 6) {
-      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Enter 6 digit OTP')));
+      ScaffoldMessenger.of(context)
+          .showSnackBar(const SnackBar(content: Text('Enter 6 digit OTP')));
       return;
     }
 
     if (entered != defaultOtp) {
-      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Invalid OTP')));
+      ScaffoldMessenger.of(context)
+          .showSnackBar(const SnackBar(content: Text('Invalid OTP')));
       return;
     }
 
     setState(() => verifying = true);
-
-    // send signup payload to backend
     final res = await RequestService(context).sendSignup(widget.signupPayload);
-
     setState(() => verifying = false);
 
     if (res['status'] == true || res['status'] == 'success') {
-      // navigate to waiting screen
-      Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => const WaitingScreen()));
+      Navigator.of(context).pushReplacement(
+          MaterialPageRoute(builder: (_) => const WaitingScreen()));
     } else {
       final message = res['message']?.toString() ?? 'Failed';
-      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(message)));
+      ScaffoldMessenger.of(context)
+          .showSnackBar(SnackBar(content: Text(message)));
     }
   }
 
   @override
   Widget build(BuildContext context) {
-    final pad = MediaQuery.of(context).size.width * 0.06;
+    final width = MediaQuery.of(context).size.width;
+
+    /// 📌 Universal scale factor for responsiveness
+    final scale = (width / 390).clamp(0.85, 1.25);
+
     return Scaffold(
-      appBar: AppBar(title: const Text("OTP Verification")),
-      body: Padding(
-        padding: EdgeInsets.symmetric(horizontal: pad, vertical: 20),
-        child: Column(children: [
-          const Text("Enter the 6-digit OTP sent to your mobile/email. (Default OTP: 123456)"),
-          const SizedBox(height: 20),
-          RoundedInput(controller: otpController, hint: "Enter OTP", keyboardType: TextInputType.number),
-          const SizedBox(height: 14),
-          PrimaryButton(label: "Verify & Submit", onTap: _verifyAndSubmit, busy: verifying),
-        ]),
+      body: SafeArea(
+        child: Stack(
+          children: [
+            /// 🔙 Back Button
+            Positioned(
+              top: 18 * scale,
+              left: 18 * scale,
+              child: GestureDetector(
+                onTap: () => Navigator.pop(context),
+                child: Container(
+                  height: 42 * scale,
+                  width: 42 * scale,
+                  decoration: const BoxDecoration(
+                    color: Colors.indigo,
+                    shape: BoxShape.circle,
+                  ),
+                  child: Icon(Icons.arrow_back,
+                      color: Colors.white, size: 22 * scale),
+                ),
+              ),
+            ),
+
+            /// 🟦 Center Card
+            Center(
+              child: Container(
+                width: width * 0.90,
+                padding: EdgeInsets.symmetric(
+                    horizontal: 20 * scale, vertical: 28 * scale),
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(16 * scale),
+                  boxShadow: [
+                    BoxShadow(
+                      color: Colors.black.withOpacity(0.08),
+                      blurRadius: 12 * scale,
+                      offset: Offset(0, 4 * scale),
+                    ),
+                  ],
+                ),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(
+                      "OTP Verification",
+                      style: TextStyle(
+                        fontSize: 22 * scale,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                    SizedBox(height: 10 * scale),
+
+                    Text(
+                      "Enter the 6-digit OTP sent to your mobile/email.\n(Default OTP: 123456)",
+                      textAlign: TextAlign.center,
+                      style: TextStyle(fontSize: 13.5 * scale),
+                    ),
+
+                    SizedBox(height: 18 * scale),
+
+                    RoundedInput(
+                      controller: otpController,
+                      hint: "Enter OTP",
+                      keyboardType: TextInputType.number,
+                    ),
+
+                    SizedBox(height: 22 * scale),
+
+                    PrimaryButton(
+                      label: "Verify & Submit",
+                      onTap: _verifyAndSubmit,
+                      busy: verifying,
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }
 }
-